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

如果您想使用默认的 DataTable 分页添加选择框分页，那么我已经找到了用于在不使用任何 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中实现下拉分页，输出将显示在下面。