jQuery DataTables 中的下拉分页

Posted 2023-03-10

【中文标题】jQuery DataTables 中的下拉分页

【英文标题】：Dropdown pagination in jQuery DataTables

【发布时间】：2012-10-19 17:32:48

【问题描述】：

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

【问题讨论】：

您能分享一下您是如何实现这一目标的吗？

【参考方案1】：

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

【参考方案2】：

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

将 select.js 与您的数据表 js 文件一起导入。

您可以使用CDN //cdn.datatables.net/plug-ins/1.10.19/pagination/select.js

例子：

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

【参考方案3】：

如果您想使用默认分页添加选择框分页，那么我找到了使用默认分页创建添加选择框分页的代码，而无需使用任何 DataTable 分页插件。您可以在下面找到使用创建动态选择框初始化 DataTable 的源代码。

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();

            console.log(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);
        
    );

我从这里找到了这个源代码 - https://www.webslesson.info/2021/04/how-to-add-custom-select-box-pagination-in-jquery-datatable-with-ajax-php.html

添加以上代码后，就可以在jQuery DataTable中实现下拉分页，输出会显示在下方。