How do I enable DataTable JS Server Side?

Question

I am trying to make a function table to be a data table but as a noob am failing. I want search and pagination Datatable. Can anyone help?

$(document).ready(function(){  

function fetch_data()
{
    $.ajax({
        url:"fetch.php",
        method:"POST",
        dataType:"json",
        success:function(data)
        {
            var html = '';
            for(var count = 0; count < data.length; count++)
            {
                html += '<tr>';
                html += '<td><input type="checkbox" id="'+data[count].id+'" data-name="'+data[count].name+'" data-address="'+data[count].address+'" data-gender="'+data[count].gender+'" data-designation="'+data[count].designation+'" data-age="'+data[count].age+'" class="check_box"  /></td>';
                html += '<td>'+data[count].name+'</td>';
                html += '<td>'+data[count].address+'</td>';
                html += '<td>'+data[count].gender+'</td>';
                html += '<td>'+data[count].designation+'</td>';
                html += '<td>'+data[count].age+'</td></tr>';
            }
            $('tbody').html(html);
        }
    });
}

fetch_data();

**UPDATE: **Tried this also

$('#myTable').DataTable( {
   serverSide: true,
   ajax: {
    url:"product_fetchmulti.php",
    method:"POST",
    dataType:"json",
    success:function(data)
    {
        var html = '';
        for(var count = 0; count < data.length; count++)
        {
            html += '<tr>';
            html += '<td><input type="checkbox" id="'+data[count].product_id+'" data-name="'+data[count].product_name+'" data-product_sku="'+data[count].product_sku+'" data-product_status="'+data[count].product_status+'" data-product_quantity="'+data[count].product_quantity+'" data-product_color="'+data[count].product_color+'" class="check_box"  /></td>';
            html += '<td>'+data[count].product_name+'</td>';
            html += '<td>'+data[count].product_sku+'</td>';
            html += '<td>'+data[count].product_status+'</td>';
            html += '<td>'+data[count].product_quantity+'</td>';
            html += '<td>'+data[count].product_color+'</td></tr>';
        }
        $('tbody').html(html);
    }
    }
} );

Answer 1

Are you using DataTables plugin ( https://datatables.net/ )?

If yes, i think you don't call the datatable function. That's why you can't search and paginate your tab.

Following code use JQuery

//myTable is your table id
$(document).ready( function () {
    $('#myTable').DataTable();
} );

EDIT: According to your edit, you are trying to rewrite the tab when datatable does it for you. You just have to get your json (with ajax query) and set the columns:

$('#myTable').DataTable( 
    { serverSide: true,
      "ajax": 
           { url:"product_fetchmulti.php",
             method:"POST",
             dataType:"json", 
           },
      "columns":
           [
              {"data" : "product_id"}
              {"data" : "product_name"} 
                 .... 
           ]
          });
});

Answer 2

A better way to initialise your datatable would be using the example shown here:

https://www.datatables.net/examples/ajax/objects.html

Have your Ajax link echo data in the format as shown in the Ajax tab, then set up your JavaScript and HTML as shown in their respective tabs. If you have a query returning an array of objects from a database, you can echo your response like this:

$jsonEncoded =  '{"data": ' . json_encode($result) . '}';
echo $jsonEncoded;

Answer 3

Finally Solved

After '$('tbody').html(html); this line:

$('#myTable').DataTable({
"columnDefs": [
{ "searchable": true, "targets": 0 }],
});