Question

我在我的代码中使用Datatable，但搜索和排序和分页不起作用我称之为静态功能。数据在表格中成功显示，但是当我搜索此节目的任何数据时，搜索无效。＆＃34;没有匹配的记录＆＃34;我输入的文本存在于表

中

检查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>

LINKS

    <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

我这样做

var tilesArray = Array.prototype.slice.call(tilesArray);

var fails = tilesArray.some(function(element) {
    return element.children.length === 0;
})

if (fails) {
    console.log("No child.");       
} else {
    console.log("A child exists!");
}

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

 $("#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>

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

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

3 个答案: