Как включить DataTable JS Server Side?

Question

Я пытаюсь создать таблицу функций, которая будет таблицей данных, но как новичок терпит неудачу. Я хочу поиск и нумерацию страниц. Кто-нибудь может помочь?

$(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();

** ОБНОВЛЕНИЕ: ** Пробовал это также

$('#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

Лучшим способом инициализации вашей таблицы данных будет использование приведенного ниже примера:

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

Получите эхо-данные вашей Ajax-ссылки в формате, как показано на вкладке Ajax, затемнастройте JavaScript и HTML, как показано на соответствующих вкладках. Если у вас есть запрос, возвращающий массив объектов из базы данных, вы можете повторить свой ответ следующим образом:

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

Answer 2

Окончательно решено

После '$('tbody').html(html); эта строка:

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

Answer 3

Используете ли вы плагин DataTables (https://datatables.net/)?

Если да, я думаю, что вы не вызываете функцию обработки данных. Вот почему вы не можете искать и разбивать на страницы свою вкладку.

В следующем коде используется JQuery

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

РЕДАКТИРОВАТЬ: в соответствии с вашими правками вы пытаетесь переписать вкладку, когда datatable делает это за вас. Вам просто нужно получить свой json (с помощью запроса ajax) и установить столбцы:

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