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

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>

以下是控制台中的错误，

未

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

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

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

我们使用虚拟数据链接创建代码

您可能在启动 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>