如何启用 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 =&nbsp; '{"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 () {&nbsp; &nbsp; $('#myTable').DataTable();} );编辑：根据您的编辑，当数据表为您完成时，您正在尝试重写选项卡。您只需要获取 json（使用 ajax 查询）并设置列：$('#myTable').DataTable(&nbsp;&nbsp; &nbsp; { serverSide: true,&nbsp; &nbsp; &nbsp; "ajax":&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ url:"product_fetchmulti.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;method:"POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dataType:"json",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; "columns":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {"data" : "product_id"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {"data" : "product_name"}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;....&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });});