Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vandan's avatar
Level 13

how to display dynamic data in datatable ?

how to display dynamic data in datatable

here is my controller code

public function json_view()
    {
        $view = Pg::all();
        return response()->json(['data'=>$view]);
    }

here is my datatable.js

datatable = $('#kt_apps_user_list_datatable').KTDatatable({
data: {
            type: 'remote',
            source: {
                read: {
                    url: "/pg/display",
                    method:'GET',
                },
            },
columns: [
            {
        field: "name",
                    title: "Name",
                    width: 200,
            Name : {data: "name"}
    }]
}

here is my route file

Route::get('pg/display','Pages\PgController@json_view')->name('json_view');

i try to display data into datatable but not working please wait message display

thanks

0 likes
15 replies
vandan's avatar
Level 13

@himanshurajvanshi yes i have use datatable.js and css library but data can't display message like please wait i use metronic theme

yes already check documentation of metronic theme but i cant understand how to display record

vandan's avatar
Level 13

@himanshurajvanshi here is my $view = Pg::all(); output

[{
    "id": 1,
    "user_id": 2,
    "unique_id": "YSJGu4NF",
    "name": "punit",
    "new_name": null,
    "email": "[email protected]",
    "new_email": null,
    "owner": "punit pathak",
    "new_owner": null,
    "contact_no": "1231231231",
    "new_contact_no": null,
    "address": "pune",
    "new_address": null,
    "status": "active",
    "password": "punit",
    "approval": "0",
    "created_at": "2019-11-29 05:39:08",
    "updated_at": "2019-11-29 05:39:08",
    "deleted_at": null
}, {
    "id": 2,
    "user_id": 3,
    "unique_id": "DH60bcRs",
    "name": "remo",
    "new_name": null,
    "email": "[email protected]",
    "new_email": null,
    "owner": "remo dsuza",
    "new_owner": null,
    "contact_no": "1231231231",
    "new_contact_no": null,
    "address": "mumbai",
    "new_address": null,
    "status": "active",
    "password": null,
    "approval": "0",
    "created_at": "2019-11-29 05:39:55",
    "updated_at": "2019-11-29 05:39:55",
    "deleted_at": null
}]
vandan's avatar
Level 13

@himanshurajvanshi i try this but nothing any response its same blank nothing data fetch

http://localhost/pgmanagment/public/pg/display

and i use php artisan serve so can i use url is right or wrong?

error like

plugins.bundle.js:9837 GET http://localhost/pgmanagment/public/pg/display?pagination%5Bpage%5D=1&pagination%5Bpages%5D=1&pagination%5Bperpage%5D=10&pagination%5Btotal%5D=2&query=&sort%5Bfield%5D=Address&sort%5Bsort%5D=asc 404 (Not Found)

vandan's avatar
Level 13

@agelios nothing enough for solve my issue give some other references

list-datatable.js:212 Uncaught TypeError: Cannot read property 'class' of undefined 
        at Object.template (list-datatable.js:212)
        at HTMLTableCellElement.<anonymous> (scripts.bundle.js:5764)
        at Function.each (plugins.bundle.js:367)
        at jQuery.fn.init.each (plugins.bundle.js:202)
        at HTMLTableRowElement.<anonymous> (scripts.bundle.js:5749)
        at Function.each (plugins.bundle.js:367)
        at jQuery.fn.init.each (plugins.bundle.js:202)
        at Object.setupTemplateCell (scripts.bundle.js:5709)
        at Object.insertData (scripts.bundle.js:6337)
        at Object.afterGetData (scripts.bundle.js:6227)
Agelios's avatar

It works with my data

let table = $('#kt_table_1').DataTable({
                serverSide: true,
                ajax: "url",
                columns: [
                    {name: 'id'}
                    {name: 'name'}
                ]
1 like
vandan's avatar
Level 13

@agelios but i have use metronic theme which have some diffrent functionlity so your code is not enough for me

give some other refrerences

mati's avatar

Looks like your JSON data file does not contain "meta" data that is required by KTDatatables

himanshurajvanshi's avatar

@van-india try this

$(document).ready(function() { $('#kt_apps_user_list_datatable').KTDatatable( { "processing": true, "serverSide": true, "ajax": { "url": "http://localhost/pgmanagment/public/pg/display", "type": "POST" success: function(data) { console.log(data); } },

    "columns": [
        { "data": "first_name" },
        { "data": "last_name" },
        ]
} );

} );

taha786's avatar

Note: write it without controller. your web.php (for laravel 8) or route.php will be like : Route :: get ('datatablelist' , [yourController :: class, 'datalist'])

and your blade view will be having url 'datatablelist' and type 'remote'

Please or to participate in this conversation.