数据表不显示默认分页和搜索栏

Posted 2023-05-09

【中文标题】数据表不显示默认分页和搜索栏

【英文标题】：datatables not displaying default pagination and search bar

【发布时间】：2019-02-05 12:13:13

【问题描述】：

我在我网站的其他页面中使用了数据表，我倾向于在每个文件中单独声明脚本，而不是在标题中声明它们。其他页面完美显示分页，我只对这个特定页面有问题。

<div class="page-wrapper">
  
  <div class="container-fluid" >
    <div class="col-sm-12">
      <div class="card">

        <table border="0"  cellpadding="5">
          <tbody><tr>
            <td>Minimum age:</td>
            <td><input type="text" id="min" name="min"></td>
            <td>Maximum age:</td>
            <td><input type="text" id="max" name="max"></td>
            </tr>
          </tbody>
        </table>

        <div class="table-responsive" >

          <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
          <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
          <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
          

          <table id="example" class="display" style="width:100%">
            <thead>


              <tr>
                //table headers

              </tr>
            </thead>
            <tbody>
             //table body
                  
                else 
                  echo "<tr>";
                  echo "<td colspan='6'>";
                  echo "<h4 class='text-danger'>No Data Found</h4>";
                  echo "</td>";
                  echo "</tr>";
                
              ?>      
            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>
</div>
<script >

  


  /* Custom filtering function which will search data in column four between two values */
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) 
      // var Row = document.getElementById("data_row");
      // var Cells = Row.getElementsByTagName("td");
      //   var age = Cells[0].innerText;
      //   console.log(age);
      //   var min = document.getElementById("min").value;
      //   var max = document.getElementById("max").value;// use data for the age column

      var min = parseInt( $('#min').val(), 10 );
      var max = parseInt( $('#max').val(), 10 );
      var age = parseFloat( data[3] ) || 0;

      if ( ( isNaN( min ) && isNaN( max ) ) ||
      ( isNaN( min ) && age <= max ) ||
      ( min <= age   && isNaN( max ) ) ||
      ( min <= age   && age <= max ) )
      
        return true;
      
      return false;
    
  );

  $(document).ready(function() 
    var table = $('#example').DataTable();

      // Event listener to the two range filtering inputs to redraw on input
      $('#min, #max').keyup( function() 
        table.draw();
       );
     );


</script>

以下是控制台中的错误，

未捕获的类型错误：无法读取未定义的属性“长度”

at Ia (jquery.dataTables.min.js:24)

at htmlTableRowElement.<anonymous> (jquery.dataTables.min.js:17)

at jquery-3.3.1.js:194

at Function.map (jquery-3.3.1.js:443)

at jQuery.fn.init.map (jquery-3.3.1.js:193)

at na (jquery.dataTables.min.js:16)

at e (jquery.dataTables.min.js:92)

at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:93)

at Function.each (jquery-3.3.1.js:354)

at jQuery.fn.init.each (jquery-3.3.1.js:189)

我参考并借用了以下来源https://datatables.net/examples/plug-ins/range_filtering.html的源代码

如果有人能告诉我我做错了什么就太好了？

感谢您的建议

【问题讨论】：

您不必附加空表行，DataTables 会为您处理。但是您需要了解 option 和 dom 在初始化 DataTables 时是如何工作的，以便控制它的分页、排序、过滤和定位。

【参考方案1】：

你可以在这里看到你的例子：-

我们用虚拟数据link创建代码

你可能在启动 php 标记时遇到问题：-

在这里

<tbody>
             //table body
                  
                else 
                  echo "<tr>";
                  echo "<td colspan='6'>";
                  echo "<h4 class='text-danger'>No Data Found</h4>";
                  echo "</td>";
                  echo "</tr>";
                
              ?>      
            </tbody>