Question

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

"processing": true,
"serverSide": true

初始化表但不起作用。

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

我想实现以下步骤：

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

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

第3步：

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

问题

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

Answer 1

你可以发布你的代码吗？

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

该表格必须包含<thead>和<tbody>代码
该表必须具有启动脚本示例中使用的ID：

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

Answer 2

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

下面您可以看到一个取自dataTables'doc

的示例

JS

$(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"
    }
  ]
}

Answer 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}]

它对我有用..

Answer 4

问题出现是因为＆＃39;列＆＃39;属性尝试在获取数据之前将数据行值与列匹配所以我把关闭的卷曲括号放在＆＃39; ajax＆＃39;属于＆＃39;列＆＃39;之前的属性属性。
现在，只有在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" }         
        ]          
    });  
} );

从ajax API响应加载数据时，Bootstrap dataTable搜索和分页不起作用

4 个答案: