7

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

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

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

示例线框

有什么建议么？

4

2 回答 2

3

另一种选择是将您的UL/ LIs更改为table 动态，然后附加dataTables()。此示例添加了一个名为的 jQuery 扩展方法dataList，该方法将任何目标转换ULs为 a 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/

于 2015-03-10T14:38:57.903 回答
1

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

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

于 2012-05-13T16:32:56.430 回答