在数据表的分页控件中显示没有省略号的页面
Displaying pages without ellipses in the pagination control of a datatable
我正在将 jQuery Datatables JS 与 Bootstrap 一起使用,我 运行 遇到了一个有解决方法但不是最好的解决方法的问题。
问题:我的 table 包含超过 4k 条记录
如果在 table 上工作的人需要从 200 条记录工作到 300 条记录,为了方便起见,他需要在一个页面中看到 10 条记录,那么他可以在页码上单击 5 ,然后是 6,然后是 7,一直到第 20 页。(我知道解决方法是显示 100 条记录,只需单击第 3 页即可从 200 条开始,但是正如我提到的,由于他们的工作,它是他们更容易看到每页不超过 10-20 条记录)。
下图显示,当我到达第 5 页时,我无法转到除第一个、最后一个、下一个或上一个以外的其他页面
有什么设置可以显示所有页面吗?
这个table是服务器端处理的,我添加了选项:
'sPaginationType' : 'full_numbers',
编辑:
<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//cdn.datatables.net/tabletools/2.2.2/css/dataTables.tableTools.css" rel="stylesheet" type="text/css" />
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/pagination/ellipses.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/pagination/select.js"></script>
j$(document).ready(function() {
j$('#sharkTankTable').dataTable({
'aoColumns': aoColumns,
'sPaginationType': 'listbox',
// 'pageLength': 10,
// // 'sPaginationType': 'ellipses',
// 'iShowPages': 10,
'bProcessing': true,
'bServerSide': true,
// 'sPaginationType' : 'full_numbers',
'sDom': 'T<"clear">lfrtip',
'bFilter': true,
'tableTools':{"sSwfPath": "//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls_pdf.swf"},
'sAjaxSource': 'fakeUrl',
'fnServerData': function(sSource, aoData, fnCallback) {
.....
问题
最新版DataTables 1.10.7默认没有这个功能
有 pagination plug-ins that provide additional functionality. One of them, Ellipses,有 iShowPages
选项允许定义在分页控件中显示的页数。
但是根据 ,Ellipses 插件不完全支持 DataTables 1.10,即不显示当前选定的页面和某些按钮的禁用状态。
解决方案
请参阅 or jQuery DataTables – Pagination without ellipses 以获得更好的解决方案。
我以前遇到过这个问题,您可以使用页面顶部的 css 隐藏元素,就像这样:
.ellipsis {
display: none;
}
我正在将 jQuery Datatables JS 与 Bootstrap 一起使用,我 运行 遇到了一个有解决方法但不是最好的解决方法的问题。
问题:我的 table 包含超过 4k 条记录
如果在 table 上工作的人需要从 200 条记录工作到 300 条记录,为了方便起见,他需要在一个页面中看到 10 条记录,那么他可以在页码上单击 5 ,然后是 6,然后是 7,一直到第 20 页。(我知道解决方法是显示 100 条记录,只需单击第 3 页即可从 200 条开始,但是正如我提到的,由于他们的工作,它是他们更容易看到每页不超过 10-20 条记录)。
下图显示,当我到达第 5 页时,我无法转到除第一个、最后一个、下一个或上一个以外的其他页面
有什么设置可以显示所有页面吗?
这个table是服务器端处理的,我添加了选项:
'sPaginationType' : 'full_numbers',
编辑:
<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//cdn.datatables.net/tabletools/2.2.2/css/dataTables.tableTools.css" rel="stylesheet" type="text/css" />
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/pagination/ellipses.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/pagination/select.js"></script>
j$(document).ready(function() {
j$('#sharkTankTable').dataTable({
'aoColumns': aoColumns,
'sPaginationType': 'listbox',
// 'pageLength': 10,
// // 'sPaginationType': 'ellipses',
// 'iShowPages': 10,
'bProcessing': true,
'bServerSide': true,
// 'sPaginationType' : 'full_numbers',
'sDom': 'T<"clear">lfrtip',
'bFilter': true,
'tableTools':{"sSwfPath": "//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls_pdf.swf"},
'sAjaxSource': 'fakeUrl',
'fnServerData': function(sSource, aoData, fnCallback) {
.....
问题
最新版DataTables 1.10.7默认没有这个功能
有 pagination plug-ins that provide additional functionality. One of them, Ellipses,有 iShowPages
选项允许定义在分页控件中显示的页数。
但是根据
解决方案
请参阅
我以前遇到过这个问题,您可以使用页面顶部的 css 隐藏元素,就像这样:
.ellipsis {
display: none;
}