web-dev-qa-db-ja.com

jQuery DataTablesカスタムページ付け（| <<< <> >>> |）

DataTablesプラグインに関してご協力をお願いします。

以下のように、datatablesWebサイトのセットアップドキュメントに従ってすべてのセットアップを行いました。

    $("#DataTableNuse").DataTable(
{        
    ordering: true,
    bLengthChange: false,
    iDisplayLength: 10,
    bFilter: false,
    pagingType: "full_numbers",
    bInfo: false,
    dom: "Bfrtip",
    buttons:
    [
        { extend: 'pdf', text: 'Exportar PDF', title: 'Nuse' },
        { extend: 'Excel', text: 'Exportar Excel', title: 'Nuse' }
    ],
    language:
    {
        emptyTable: "<li class='text-danger' align='center'>NUSE não encontrada</li>",
        paginate:
        {
            previous: "<",
            next: ">",
            first: "|<",
            last: ">|"
        }
    }    
});

また、「full_numbers」の代わりに「full」オプションも試してみました。

ページ付けレイアウト

すべて正常に機能していますが、問題は、顧客の基準に正しく準拠するようにレイアウトを変更する必要があることです。

以下のような新しいレイアウトが必要です。

新しいページ付けレイアウト

どこ：

">"は10分の10をページングします

「>>」は20分の20をページングします

「|>」最後のページ

誰でも私にそれを手に入れることができました。

前もって感謝します。

宜しくお願いします、

チアゴ

jquerypaginationdatatablescustomization
4
Thiago Gracioso

次のように手動で行う必要がある場合があります。

https://jsfiddle.net/7ramuk9c/1/

初めて、およびテーブルが描画されるたびに、<<および>>ボタンを追加します。

addExtraButtons();
$('#example').on("draw.dt", function(e) {
    addExtraButtons();
})

必要に応じて無効にします。

 if (currentPage.page == 0) {
     $(".quick_previous").addClass("disabled")
 }

<<および>>ボタンにイベントを追加します。

function quickPrevious(e) {
   var pageToGoTo = (currentPage.page - 2) <= 0 ? 0 : (currentPage.page - 2);
   table.page(pageToGoTo).draw(false);
}
6
Tom Glover

これはもう1つのかなりハッキーな解決策です jsFiddle ですが、クイックショットを探している場合は、次のコードですべてのデータテーブルの前/次ボタンを<と>に変更します、特定のテーブルのみをターゲットにする場合は、draw.dtイベントのセレクターを変更するだけです。

enter image description here

異なるデータテーブルタイプは異なるレンダリング方法を持っています、私はそれらのいくつかのために3つの異なるsetCustomPagingSigns関数を作成しました：

$(".dataTable").on("draw.dt", function (e) {                    
    setCustomPagingSigns.call($(this));
}).each(function () {
    setCustomPagingSigns.call($(this)); // initialize
});

// this should work with standard datatables styling - li.previous/li.next
function setCustomPagingSigns() {
    var wrapper = this.parent();
    wrapper.find("li.previous > a").text("<");
    wrapper.find("li.next > a").text(">");          
}

//  - a.previous/a.next
function setCustomPagingSigns() {
    var wrapper = this.parent();
    wrapper.find("a.previous").text("<");
    wrapper.find("a.next").text(">");           
}

// this one works with complex headers example, bootstrap style
function setCustomPagingSigns() {
    var wrap = this.closest(".dataTables_wrapper");
    var lastrow= wrap.find("div.row:nth-child(3)");
    lastrow.find("li.previous>a").text("<");
    lastrow.find("li.next>a").text(">");    
}
1
Legends