如何启用 DataTable JS 服务器端？

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>';        }

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

} );

编辑：根据您的编辑，当数据表为您完成时，您正在尝试重写选项卡。您只需要获取 json（使用 ajax 查询）并设置列：

$('#myTable').DataTable( 

    { serverSide: true,

      "ajax": 

           { url:"product_fetchmulti.php",

             method:"POST",

             dataType:"json", 

           },

      "columns":

           [

              {"data" : "product_id"}

              {"data" : "product_name"} 

                 .... 

           ]

          });

});