数据表未显示默认分页和搜索栏 [英] datatables not displaying default pagination and search bar
问题描述
我在网站的其他页面中使用了数据表,并且我倾向于在每个文件中声明脚本,而不是在标头中声明脚本.其他页面完美地显示了分页,我仅对此特定页面有问题.
I have used datatables in other pages of my website and i tend to declare scripts in each file saperately instead declaring them in header. Other pages are showing pagination perfectly, i am having problem with this particular page only.
<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'
Uncaught TypeError: Cannot read property 'length' of undefined
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
I referred and borrowed the source code from following sources https://datatables.net/examples/plug-ins/range_filtering.html
如果有人能告诉我我在做什么错,那太好了
It would be great if someone could tell me what am i doing wrong?
谢谢您的建议
推荐答案
您可以在这里看到您的示例:-
you can see your example here :-
我们使用伪数据创建代码链接
we create code with dummy data link
在启动PHP标记时可能会遇到问题:-
might you have issue with starting PHP tag :-
在这里
<tbody>
//table body
}
}else {
echo "<tr>";
echo "<td colspan='6'>";
echo "<h4 class='text-danger'>No Data Found</h4>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
这篇关于数据表未显示默认分页和搜索栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!