How to load data in datatable using ajax?

Web Development
, ,
1

I am trying to use datatable in my project. I can use datatable in an existing table but I am unable to load data from the server side. I am using the code below.

<script type="text/javascript">
    $('#my-table').DataTable();
</script>
2

You need to set the ajax URL also the columns to show in the table.

$(document).ready(function () {
    $('#my-table').DataTable({
        ajax: 'ajax-url',           // Ajax URL
        columns: [                  // Columns
            { data: 'name' },
            { data: 'position' },
            { data: 'office' },
            { data: 'extn' },
            { data: 'start_date' },
            { data: 'salary' },
        ],
    });
});

From your server side, you need to send an object to load the data in datatable.

<?php
    $datatable = [
        'data' => [
            [
                "id" => "1",
                "name" => "Tiger Nixon",
                "position" => "System Architect",
                "salary" => "$320,800",
                "start_date" => "2011/04/25",
                "office" => "Edinburgh",
                "extn" => "5421"
            ],
            [
                "id" => "2",
                "name" => "Garrett Winters",
                "position" => "Accountant",
                "salary" => "$170,750",
                "start_date" => "2011/07/25",
                "office" => "Tokyo",
                "extn" => "8422"
            ]
        ]
    ];

    echo json_encode($datatable); 
?>

If you check their official website, you will find the solution.
https://datatables.net/examples/ajax/objects.html