数据表搜索，排序不起作用

Question

我在代码中使用了 Datatable，但搜索、排序和分页不起作用 我调用了静态函数。数据在表中成功显示，但是当我搜索任何显示“无匹配记录”的数据时搜索不起作用，因为我输入的文本存在于表中

检查 GIF 图片

https://i.stack.imgur.com/YDK1S.gif

这就是我的尝试

<table id="example"   class="display nowrap cell-border" style="width:100%;" cellspacing="0">
  </table>


<script type="text/javascript">
       success: function (result) {
                $("#example").empty()
                if (re.length > 0) {
                    $("#example").append
                    ("<thead><tr><th>Service Type</th><th>Service frequency</th><th>Last performed</th><th>Next Service</th><th>Create reminder</th></tr></thead>");
                    for (var i = 0; i < re.length; i++) {
                        if (re[i] !== null) {
                            $("#example").append("<tbody><tr><td>" +
                                re[i][0] + "</td><td>" +
                                re[i][1] + "</td><td>" +
                                re[i][2] + "</td><td>" +
                                re[i][3] + "</td><td>" +
                                re[i][4] + "</td></tr></tbody>");

                            sdate = re[i][2];
                        }      
                             }
                }
                var myTable = $('#example').DataTable();
            },

    </script>

链接

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.3.js"></script> 
     <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
     <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 
     <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script> 
     <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script> 
     <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
     <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />

   <link href=" https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script> 
   <link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" />

检查 gif 图片

Answer 1

我知道这是一篇旧帖子，但我今天自己解决了一个类似的问题 非常简单的解决方案。我在 DataTables 论坛上找到了答案https://datatables.net/forums/discussion/38873/datatables-sorting-does-not-work-at-all-and-filtering-acts-weird

基本上，我在 foreach 循环中显示数据，就像上面链接中的海报一样，我在每次循环迭代中重复我的 <tbody></tbody> 块，从而阻止 DataTables 按预期运行。 （这也将允许显示灰色/白色条纹。）

Answer 2

请尝试使用下面的代码，我用测试数据创建了sample fiddle

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
           <tr>
           <th>Service Type</th>
           <th>Service frequency</th>       
           </tr>
        </thead>
        <tbody id="tabledata">      
        </tbody>
    </table>

    $(document).ready(function() {
        var myTable = $('#example').DataTable();
        success: function(result) {
                $("#tabledata").empty()
                if (re.length > 0) {
                    for (var i = 0; i < re.length; i++) {
                        if (re[i] !== null) {

                            myTable.row.add([re[i][0], re[i][1], re[i][2], re[i][3], re[i][4]]).draw();

                            sdate = re[i][2];
                        }
                    }
                }

            },

    });

Answer 3

我这样做

 $("#example").empty()

                if (re.length > 0) {


                    $('#example thead').append(
                    "<tr><th>Service Type</th><th>Service frequency</th><th>Last performed</th><th>Next Service</th><th>Create reminder</th></tr>"
                       );

                    for (var i = 0; i < re.length; i++) {
                        if (re[i] !== null) {
                            $('#example tbody').append('<tr><td>' + re[i][0] + '</td><td>' + re[i][1] + '</td><td>' + re[i][2] + '</td><td>' + re[i][3] + '</td><td>' + re[i][4] + '</td></tr>');
                        }
                    }
                }

<table id="example"   class="display nowrap cell-border" style="width:100%;" cellspacing="0">
                     <thead></thead>
                <tbody></tbody>
                 </table>

这对我有用，因为我在像这样发布有问题的代码时生成了错误的表格

$('#example ').append("<thead><tr><th></th></tr></thead>

我是这样重新编码的

 $('#example thead').append(tr><th></th></tr>);

我也是为 tbody 做的 这对我来说很完美