从 ajax API 响应加载数据时，引导数据表搜索和分页不起作用答案

【问题标题】：Bootstrap dataTable search and pagination is not working when data is loading from ajax API response从 ajax API 响应加载数据时，引导数据表搜索和分页不起作用
【发布时间】：2015-11-13 16:45:50
【问题描述】：

我正在开发一个管理面板。我能够在引导程序dataTable 中加载从 Ajax API 响应中获取的数据，但默认的表搜索和分页不起作用。我试过了

"processing": true,
"serverSide": true

初始化表格，但它不工作。

这个 dataTable 功能是否可以作为 Bootstrap dataTable 提供的默认功能工作。

我想实现以下步骤：

第 1 步： 带有提交按钮的表单。

第 2 步： 点击提交后，进行 ajax 调用并取回 JSON 数据以将其动态添加到 dataTable 行中。

第三步：

         $("#editable-sample").DataTable({ // what should I do here.});

问题

数据正在加载，但搜索框和分页不在页面上。

【问题讨论】：

如果您将代码放在这里，我们真的可以帮助您。
我认为我无法初始化数据表
@hakkikonu，我在提交按钮上发送 ajax 请求，而不是在 dataTable 函数内。

标签： javascript ajax twitter-bootstrap datatable

【解决方案1】：

你能发布你的代码吗？

您确定满足 dataTables 的先决条件吗：

表格必须有<thead>和<tbody>标签
表必须有一个在启动脚本示例中使用的 id：

<table class="table table-bordered" id="dataTables-example"> <script> $(document).ready(function() { $('#dataTables-example').dataTable(); }); </script>

【讨论】：

谢谢。我按照你的建议做了同样的事情，但是搜索和分页正在工作，但是当数据来自 api 响应时，这些功能不起作用。
@RaghavSingh 那么这一定与初始化有关g试试这个： var dataTable = ""; $(document).ready(function() { dataTable = $('#dataTables-example').dataTable({ "sPaginationType": "full_numbers", "bServerSide": true, "sAjaxSource": "/script-to-接受请求.php", "sServerMethod": "POST", "iDisplayLength": 50 }); }

【解决方案2】：

datatables 支持 Ajax 数据源（对象），see

您可以在下面看到一个取自 dataTables 文档的示例

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/objects.txt", //
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

HTML

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

AJAX

{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    }
  ]
}

【讨论】：

谢谢。但问题是最初 dataTable 是空的。现在在此表单上有小型表单基础，我在提交表单 ajax 调用时调用 API。然后我解析 json 并将数据加载到 dataTable 行中。然后一切正常，数据即将到来并加载到表中，但分页和搜索不起作用。如果我在搜索框中输入内容，那么表格将会为空。
所以请将这些句子作为代码添加到您的问题中。没有代码，很多用户都不知道你做了什么？

【解决方案3】：

$.ajax({..

 success: function(data) {..  

var table = $('#datatable').DataTable();
table.clear().draw();
var rowNode= new Array();
for (var key=0, size=data.length; key<size; key++){
            var j = -1;
            var r = new Array();
// represent columns as array
                r[++j] ='<tr><td><input type="hidden" name="somename1" value="'+data[key].id+'"/><input type="hidden" name="somename2" value="'+data[key].is_deleted+'"/>'+data[key].lic_category_name+'</td>';
                r[++j] = '<td>'+data[key].someval1+'</td>';
                r[++j] = '<td>'+ data[key].someval2+'</td>';
                r[++j] = '<td>'+ data[key].someval13+ '</td>';
                r[++j] ='<td class="last"><a href="view?id='+data[key].id+' title="View"><i class="fa fa-eye"></i></a> <a href="edit?id='+data[key].id+'title="Edit"><i class="fa fa-edit"></i></a> <a href="delete?id='+data[key].id+'onclick="return confirm("Are you sure you want to delete?")" title="Delete"><i class="fa fa-trash"></i></a></td></tr>'; 
                rowNode = table.row.add(r);

        }

        rowNode.draw().node()

   }
}

我的 JSON 响应，

[{"id":70,"somekey1":"GC 1","somekey2":"GC 1","somekey3":8,"somekey4":5000,"somekey5":1,"somekey5":1,"is_deleted":0}]

它对我有用..

【讨论】：

【解决方案4】：

由于“column”属性在获取数据之前尝试将数据行值与列匹配，因此出现问题。
所以我将'ajax'属性的右大括号放在'column'属性之前。
现在只有在ajax函数完成后才能调用列属性函数。

$(document).ready(function() {             
    $('#example').DataTable( {            
        "ajax":{ "data/objects.txt" },//<------------------------------------------------place here//            
        "columns": [                                                              
            { "data": "name" },             
            { "data": "position" },         
            { "data": "office" },        
            { "data": "extn" },           
            { "data": "start_date" },          
            { "data": "salary" }         
        ]          
    });  
} );

【讨论】：