数据表的自定义分页

Question

我想针对我的客户需求之一自定义 DataTalble 的分页视图。我希望分页视图与图像中显示的相同。

为此，我修改了 datables.js 的一些代码。

DataTable.js：

$.extend(extPagination, {
            simple: function (page, pages) {
                return ['previous', 'next'];
            },

            full: function (page, pages) {
                return ['first', 'previous', 'next', 'last'];
            },

            numbers: function (page, pages) {
                return [_numbers(page, pages)];
            },

            simple_numbers: function (page, pages) {
                return ['previous', _numbers(page, pages), 'next'];
            },

            full_numbers: function (page, pages) {
                return ['first', 'previous', _numbers(page, pages), 'next', 'last'];
            },

            first_last_numbers: function (page, pages) {
                return ['first', _numbers(page, pages), 'last'];
            },
            custom: function (page, pages) {
                return ['previous', _numbers(page, pages), 'next'];
            },

            // For testing and plug-ins to use
            _numbers: _numbers,

            // Number of number buttons (including ellipsis) to show. _Must be odd!_
            numbers_length: 7
        });

在我的数据表视图中，我已将 sPaginationType 添加为 custom。

$('#tblSessionList').DataTable({
            "bPaginate": true,
            "sPaginationType": "custom",
            "bLengthChange": false,
            "columnDefs": [
                { "targets": 0, "orderable": true },
                { "targets": 1, "orderable": false },
                { "targets": 2, "orderable": false }

            ],
            "bFilter": true,
            "bInfo": false,
            "bAutoWidth": false,
            "searching": false,
            "scrollX": true
        });

通过创建新功能，我无法隐藏页码。现在我不知道如何修改视图。请帮忙

Answer 1

嘿，伙计，这是解决方案：http://jsfiddle.net/ishandemon/bbLjzspf/1450/

<div class="container">
  <table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example">

  </table>
</div>

$(document).ready(function() {

  var dataSet = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
    ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
    ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
    ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
    ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
    ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
    ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
    ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"],
    ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500"],
    ["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600"],
    ["Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560"],
    ["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000"],
    ["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600"],
    ["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500"],
    ["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750"],
    ["Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500"],
    ["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000"],
    ["Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500"],
    ["Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000"],
    ["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500"],
    ["Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000"],
    ["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000"],
    ["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450"],
    ["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600"],
    ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"],
    ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"],
    ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"],
    ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"],
    ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"],
    ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"],
    ["Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400"],
    ["Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500"],
    ["Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000"],
    ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500"],
    ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
    ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
  ];

  var columnDefs = [{
    title: "Name"
  }, {
    title: "Position"
  }, {
    title: "Office"
  }, {
    title: "Extn."
  }, {
    title: "Start date"
  }, {
    title: "Salary"
  }];

  var myTable;

  myTable = $('#example').DataTable({
  "pagingType": "simple",
   language: {
            paginate: {
                previous: "<",
                next: ">"
            }
        },
    data: dataSet,
    columns: columnDefs,
    "bInfo" : false,
          select: 'single',
          responsive: true,
          altEditor: true,     // Enable altEditor
            drawCallback: function(){

          $('.paginate_button.next', this.api().table().container())          
             .on('click', function(){
             var info = myTable.page.info();
                console.log(info) ;
                $('.cdatatableDetails').remove();
                $('.paginate_button.next').before($('<span>',{
                'text':'Page '+ (info.page+1) +' of '+info.pages,
                class:'cdatatableDetails'
                }));

             });    
             $('.paginate_button.previous', this.api().table().container())          
             .on('click', function(){
             var info = myTable.page.info();
                console.log(info) ;
                $('.cdatatableDetails').remove();
                $('.paginate_button.next').before($('<span>',{
                'text':'Page '+ (info.page+1) +' of '+info.pages,
                class:'cdatatableDetails'
                }));

             }); 
       }
  });

  var info = myTable.page.info();
             console.log(info);
             $('.paginate_button.next').before($('<span>',{
                'text':'Page '+ (info.page+1) +' of '+info.pages,
                class:'cdatatableDetails'
                }));


});

Answer 2

您可以通过language.paginate.next和language.paginate.previous自定义分页按钮标签。

$('#tblSessionList').DataTable({
 language: {
 paginate: {
 next: '<img src="path/to/arrow.png">',
 previous: '<i class="fa fa-fw fa-long-arrow-left">'  
}
 },
 "bPaginate": true,
 "bLengthChange": false,
  "columnDefs": [
   { "targets": 0, "orderable": true },
    { "targets": 1, "orderable": false },
     { "targets": 2, "orderable": false }

    ],
   "bFilter": true,
    "bInfo": false,
   "bAutoWidth": false,
   "searching": false,
     "scrollX": true
});

Answer 3

在对 datatable.js 做了一些研究之后。我找到了解决办法。

HTML：

$('#tblSessionList').DataTable({
                language: {
                    paginate: {
                        next: '<span class="glyphicon glyphicon-menu-right"></span>',
                        previous: '<span class="glyphicon glyphicon-menu-left"></span>'
                    }
                },
                "bPaginate": true,
                "sPaginationType": "custom",
                "bLengthChange": false,
                "columnDefs": [
                    { "targets": 0, "orderable": true },
                    { "targets": 1, "orderable": false },
                    { "targets": 2, "orderable": false }

                ],
                "bFilter": true,
                "bInfo": false,
                "bAutoWidth": false,
                "searching": false,
                "scrollX": true
            });

这是您需要在 datatable.js 中更改的所有内容：

$.extend(true, DataTable.ext.renderer, {
    pageButton: {
      _: function(settings, host, idx, buttons, page, pages) {
        var classes = settings.oClasses;
        var lang = settings.oLanguage.oPaginate;
        var aria = settings.oLanguage.oAria.paginate || {};
        var btnDisplay,
          btnClass,
          counter = 0;

        var attach = function(container, buttons) {
          var i, ien, node, button;
          var clickHandler = function(e) {
            _fnPageChange(settings, e.data.action, true);
          };

          for (i = 0, ien = buttons.length; i < ien; i++) {
            button = buttons[i];

            if ($.isArray(button)) {
              var inner;
              if (settings.sPaginationType == "custom") {

                inner = $(
                  "<span class='custom-pagination'> Page " + parseInt(page + 1) + " of " + pages + " </span>"
                ).appendTo(container);
              } else {
                inner = $("<" + (button.DT_el || "div") + "/>").appendTo(
                  container
                );
                attach(inner, button);
              }
            } else {
              btnDisplay = null;
              btnClass = "";

              switch (button) {
                case "ellipsis":
                  container.append('<span class="ellipsis">&#x2026;</span>');
                  break;

                case "first":
                  btnDisplay = lang.sFirst;
                  btnClass =
                    button +
                    (page > 0 ? "" : " " + classes.sPageButtonDisabled);
                  break;

                case "previous":
                  btnDisplay = lang.sPrevious;
                  btnClass =
                    button +
                    (page > 0 ? "" : " " + classes.sPageButtonDisabled);
                  break;

                case "next":
                  btnDisplay = lang.sNext;
                  btnClass =
                    button +
                    (page < pages - 1 ? "" : " " + classes.sPageButtonDisabled);
                    console.log(btnClass)
                  break;

                case "last":
                  btnDisplay = lang.sLast;
                  btnClass =
                    button +
                    (page < pages - 1 ? "" : " " + classes.sPageButtonDisabled);
                  break;

                default:
                  // To Button
                  btnDisplay = button + 1;
                  btnClass = page === button ? classes.sPageButtonActive : "";
                  console.log(btnDisplay);
                  break;
              }

              if (btnDisplay !== null) {
//                 
                  node = $("<a>", {
                    class: classes.sPageButton + " " + btnClass,
                    "aria-controls": settings.sTableId,
                    "aria-label": aria[button],
                    "data-dt-idx": counter,
                    tabindex: settings.iTabIndex,
                    id:
                      idx === 0 && typeof button === "string"
                        ? settings.sTableId + "_" + button
                        : null
                  })
                    .html(btnDisplay)
                    .appendTo(container);
//                 }

                _fnBindAction(node, { action: button }, clickHandler);

                counter++;
              }
            }
          }
        };

        // IE9 throws an 'unknown error' if document.activeElement is used
        // inside an iframe or frame. Try / catch the error. Not good for
        // accessibility, but neither are frames.
        var activeEl;

        try {
          // Because this approach is destroying and recreating the paging
          // elements, focus is lost on the select button which is bad for
          // accessibility. So we want to restore focus once the draw has
          // completed
          activeEl = $(host)
            .find(document.activeElement)
            .data("dt-idx");
        } catch (e) {}

        attach($(host).empty(), buttons);

        if (activeEl !== undefined) {
          $(host)
            .find("[data-dt-idx=" + activeEl + "]")
            .focus();
        }
      }
    }
  });