是否有任何 jQuery 插件可以应用分页，允许用户选择页面大小，并管理在结果中显示用户的当前位置（例如“显示结果：1-5 of 230”）？我想在初始页面加载时将所有列表项加载到“ul”中，并应用分页后缀。
DataTables 似乎可以完成所有这些（以及更多），但它不适用于“ul”。
这是我想要完成的线框截图：
有什么建议吗？
【问题讨论】：
li:gt(results*pagenum - 1) 和 li:lt(results*(pagenum-1)) 的函数可能会解决问题。
标签： jquery html jquery-plugins datatables
另一种选择是将UL/LIs 更改为table 即时，然后附加dataTables()。此示例添加了一个名为 dataList 的 jQuery 扩展方法，它将任何目标 ULs 转换为 TABLE（但保留现有表）：
JSFiddle： http://jsfiddle.net/TrueBlueAussie/r5xf61zp/5/
$.fn.dataList = function (options) {
this.each(function () {
var $table = $(this);
if ($table.is('ul')) {
var $ul = $table;
$table = $ul.wrap('<table><tbody/></table').closest('table');
$ul.find('li').wrap('<tr><td/></tr>').contents().unwrap();
$ul.contents().unwrap()
$table.prepend('<thead><tr><th>Heading</th></tr></thead>');
}
$table.dataTable(options);
});
}
并像.dataTable()一样使用：
$('.example').dataList({
"sPaginationType": "full_numbers"
});
唯一悬而未决的问题是标题的显示内容（当前示例中为 Heading :)
重新审视这个并决定提供标题的最佳方式是通过UL 上的data-heading 属性。
HTML 示例：
<ul class="example" data-heading="My new heading">
代码：
$.fn.dataList = function (options) {
this.each(function () {
var $table = $(this);
if ($table.is('ul')) {
var $ul = $table;
$table = $ul.wrap('<table><tbody/></table').closest('table');
$ul.find('li').wrap('<tr><td/></tr>').contents().unwrap();
$ul.contents().unwrap()
$table.prepend('<thead><tr><th>' + ($ul.data('heading') || '') + '</th></tr></thead>');
}
$table.dataTable(options);
});
}
【讨论】：
经过进一步研究，我没有找到与 <ul>s 一起使用的 DataTables 等效项。
因为网站是内部网站，而且 DataTables 非常强大，所以我选择了 DataTables。该页面呈现一个单列表，并且对样式进行了调整以隐藏表格的页眉和页脚。最后，它看起来和上面的线框一模一样。可惜标记必须被丑陋的<table> 标签污染。
【讨论】：