在数据表的分页控制中显示没有省略号的页面 [英] Displaying pages without ellipses in the pagination control of a datatable

问题描述

我正在使用带有Bootstrap的jQuery Datatables JS，我遇到一个有一个解决方法的问题，但它不是最好的。

I am using jQuery Datatables JS with Bootstrap, I am running into an issue where there is a workaround but it is not the nicest.

问题：我的表包含超过4k的记录

The issue: my table contains more than 4k records

如果在桌上工作的人需要从记录200到300工作，为了易于理解，他需要在页面中看到10条记录，那么他可以点击页面上的5号，然后在6，然后在7，一直到第20页（我知道工作将显示100条记录，只需点击第3页从200开始，但是正如我所提到的，由于他们的工作，他们更容易看到每页不超过10-20条记录）。

If the person who is working on the table needs to work from record 200 to 300 and for easibility, he needs to see 10 records in a page, then he can click on 5 on the page number, and then on 6, then on 7 and all the way to page 20. (I know the work around will be to display 100 records and just click on page 3 to start from 200, however as I mentioned due to their job it is easier for them to see no more than 10-20 records per page).

下图显示我无法去第一页，最后一页，下一页或其他页面，一旦达到第5页

The image below shows that I am unable to go other pages other than first,last, next or previous once I reach page 5

有什么设置可以显示所有页面？

Is there any settings where I can say display all the pages?

此表是处理服务器端，我已经添加了选项：

This table is processed server side, and I have added the option:

'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没有默认情况下具有此功能。

Latest version of DataTables 1.10.7 does not have this ability by default.

有分页插件，提供附加功能。其中一个， Ellipses ，具有 iShowPages 选项允许定义在分页控件中显示的页数。

There are pagination plug-ins that provide additional functionality. One of them, Ellipses, has iShowPages option allowing to define number of pages to display in pagination control.

但是，根据 @ davidkonrad的笔记，椭圆插件不完全支持DataTables 1.10，即不显示当前选定的页面和某些按钮的禁用状态。

However per @davidkonrad's note, Ellipses plug-in doesn't fully support DataTables 1.10, i.e. doesn't show currently selected page and disabled state of some buttons.

解决方案

请参阅这个答案或 jQuery DataTables - 没有省略号的分页，以获得更好的解决方案。

See this answer or jQuery DataTables – Pagination without ellipses for a better solution.

这篇关于在数据表的分页控制中显示没有省略号的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！