Question

我在网站其他页面上使用过数据表，并且我倾向于在每个文件中声明脚本，而不是在标头中声明脚本。其他页面完美地显示了分页，我仅对此特定页面有问题。

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

以下是控制台中的错误

未捕获的TypeError：无法读取未定义的属性'length'

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引用并借用了源代码

如果有人能告诉我我在做什么错，那太好了

谢谢您的建议

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

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

1 个答案: