对于<ul>？</ul>是否有像DataTables这样的jQuery插件

Question

是否有任何jQuery插件应用分页，允许用户选择页面大小，并管理显示用户在结果中的当前位置（例如'显示结果：1-5 of 230'）？我想在初始页面加载时将所有列表项加载到'ul'，并应用分页后缀。

DataTables似乎完成了所有这些（以及更多），但它不适用于'ul'。

这是我想要完成的线框截图：

有什么建议吗？

Answer 1

经过进一步研究后，我没有找到与<ul>一起使用的DataTables的等价物。

因为网站是内部网站而且DataTables非常强大，所以我选择了DataTables。该页面呈现单列表格，并调整样式以隐藏表格页眉和页脚。最后，它看起来与上面的线框完全一样。遗憾的是标记必须被丑陋的<table>标签污染。

Answer 2

另一个选择是将您的UL / LI动态更改为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 ：）

更新 - （添加标题支持）

重新审视此问题并确定提供标题的最佳方式是data-heading上的UL属性。

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

JSFiddle： http://jsfiddle.net/TrueBlueAussie/r5xf61zp/8/