jQuery DataTables 中的下拉分页

Question

是否可以使用 jquery 数据表实现如下图所示的下拉分页？

Answer 1

是的 - 使用如下插件：http://datatables.net/plug-ins/pagination#listbox

Answer 2

使用选择分页插件列表你可以实现这一点。

导入 select.js 以及数据表 js 文件。

您可以使用CDN

//cdn.datatables.net/plug-ins/1.10.19/pagination/select.js

示例：

 $(document).ready(function() {
          $('#example').dataTable( {
              "sPaginationType": "listbox"
          } );
      } );

Answer 3

如果您想添加默认的选择框分页

DataTables pagination

而不使用任何DataTables分页插件，您可以使用以下源代码：

var dataTable = $('#customer_data').DataTable({
    processing : true,
    serverSide : true,
    // order : [],
    // dom: 'Bfrtip',
    retrieve: true,
    ajax: {
        url: 'fetch.php,
        method: 'POST',
        data: {
            start: start,
            length: length
        }
    },
    drawCallback: function( settings ) {
      var page_info = dataTable.page.info();
      $('#totalpages').text(page_info.pages);
      var html = '';
      var start = 0;
      var length = page_info.length;
      for(var count = 1; count <= page_info.pages; count++) {         
          var page_number = count - 1;
          html += '<option value="'+page_number+'" data-start="'+start+'" data-length="'+length+'">'+count+'</option>';
          start = start + page_info.length;
      }
      $('#pagelist').html(html);
      $('#pagelist').val(page_info.page);
    }
});

我找到了这个源代码。

添加上述代码后，您将能够在 jQuery DataTables 中实现下拉分页，输出如下所示：