是否有用于 <ul> 的 jQuery 插件，例如 DataTables？

Posted 2023-05-09

【中文标题】是否有用于 <ul> 的 jQuery 插件，例如 DataTables？

【英文标题】：Is there a jQuery plugin like DataTables for a <ul>?

【发布时间】：2012-05-11 02:49:36

【问题描述】：

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

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

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

有什么建议吗？

【问题讨论】：

自己构建一个应该不难。隐藏列表元素 li:gt(results*pagenum - 1) 和 li:lt(results*(pagenum-1)) 的函数可能会解决问题。

是的，我可能会朝那个方向发展。不能使用已经存在的 DataTables 的精美功能真是太可惜了......

【参考方案1】：

另一种选择是将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);
    );

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

【参考方案2】：

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

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

【讨论】：

嗨，你能告诉我如何取消数据表的样式吗？即使我只删除thead，我也会遇到一些错误。以及如何删除标题部分？谢谢

兔西，我取消了数据表的样式，并将thead全部隐藏在CSS文件中。只需添加 CSS：#mydatatable thead display: none; 取消其余数据表的样式有点繁琐，但您可以在创建表。