jquery - 是否有像 <ul> 的 DataTables 这样的 jQuery 插件？

Question

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

DataTables似乎可以完成所有这些(以及更多)，但不适用于“ul”。

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

有什么建议吗？

Answer 1

另一种选择是将您的 UL/LI 更改为 table on the fly 然后附加数据表()。此示例添加了一个名为 dataList 的 jQuery 扩展方法，可将任何目标 UL 转换为 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);
    });
}

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