7

ページングを適用し、ユーザーがページサイズを選択できるようにし、結果でのユーザーの現在の位置の表示を管理するjQueryプラグインはありますか（例：「結果の表示：1-5 of 230」）？最初のページの読み込み時にすべてのリストアイテムを「ul」に読み込み、ページングの後に適用します。

DataTablesはこれらすべて（およびそれ以上）を実行しているように見えますが、「ul」では機能しません。

これが私が達成しようとしていることのワイヤーフレームのスクリーンショットです：

ワイヤーフレームの例

助言がありますか？

4

2 に答える 2

3

別のオプションは、UL/LIをtable オンザフライに変更してから添付することdataTables()です。この例では、任意のターゲットを にdataList変換するという jQuery 拡張メソッドを追加します(ただし、既存のテーブルはそのままにします)。ULsTABLE

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

さらに調査した結果、s で動作する DataTables に相当するものは見つかりませんでした<ul>。

Web サイトは内部 Web サイトであり、DataTables は非常に堅牢であるため、DataTables を使用しました。ページは 1 列のテーブルをレンダリングし、スタイルを微調整してテーブルのヘッダーとフッターを非表示にします。最終的に、上のワイヤフレームとまったく同じように見えました。<table>マークアップが醜いタグで汚染されなければならないのは残念です。

于 2012-05-13T16:32:56.430 に答える