web-dev-qa-db-ja.com

DataTable：ページネーションを非表示にし、必要に応じてそれを表示する方法は？

DataTable jQueryプラグインを使用している2つのテーブルがあります。テーブルの右下にページネーションを隠す方法はあるのだろうか。

enter image description here

注意：

  • 必要な場合のみページネーションを表示します。
  • クエリ結果が10未満の場合はページ付けを非表示にします。
javascriptjquerydatatablesjquery-datatables
15
user4287698

drawCallback オプションを使用してDT draw イベントを処理し、使用可能なページに基づいてページネーションコントロールを表示/非表示にします。

$('#table_id').dataTable({
  drawCallback: function(settings) {
    var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
    pagination.toggle(this.api().page.info().pages > 1);
  }
})
47
BitOfUniverse
  $('#dataTable_ListeUser').DataTable( {

        //usual pager parameters//

        "drawCallback": function ( settings ) {

        /*show pager if only necessary
        console.log(this.fnSettings());*/
        if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
            $('#dataTable_ListeUser_paginate').css("display", "block");     
        } else {                
            $('#dataTable_ListeUser_paginate').css("display", "none");
        }

        }
       });
3
Matoeil

fnDrawCallback（）メソッドを使用して、-ページネーションをdataTableで非表示にすることができます。

var oTable = $('#datatable_sample').dataTable({
    "iDisplayLength": 10,    
    "fnDrawCallback": function(oSettings) {
        if ($('#datatable_sample tr').length < 10) {
            $('.dataTables_paginate').hide();
        }
    }
});​

リストに表示する行ごとに定義できるlength。

2
Sreejith Gopinath

$(this)は、TypeScriptを使用しているためか、機能しませんでした。そのため、別のアプローチを使用して、テーブルラッパーとDataTables APIのJQuery要素を取得しました。これはBitOfUniverseの答えに触発され、DataTables 1.10でテストされています。

TypeScript：

'drawCallback': (settings: any) => {
      // hide pager and info if the table has NO results
      const api = new $.fn.dataTable.Api(settings);
      const pageCount = api.page.info().pages;

      const wrapper = $('#' + settings.sTableId).closest('.dataTables_wrapper');
      const pagination = wrapper.find('.dataTables_paginate');
      const info = wrapper.find('.dataTables_info');

      pagination.toggle(pageCount > 0);
      info.toggle(pageCount > 0);
 }
2
Georg Patscheider

この問題を解決するには、「drawCallback」を使用します。

1. Webページで、開発者ツールを使用して「前へ」ボタンを調べます。「前へ」ボタンと「次へ」ボタンの両方をラップするdiv要素が見つかります。 DataTablesは、htmlテーブル要素のIDに基づいて、このdivに自動的にIDを割り当てました。

たとえば、IDが「Atable」のテーブルがあります。このテーブルでは、DataTablesは「Atable_paginate」というIDのdiv要素を自動的に作成し、前のボタンと次のボタンをラップしました。

2. drawCallbackの場合、1ページ未満かどうかをチェックする関数を記述します。存在する場合は、IDを使用して要素を非表示にします。

たとえば、1ページに20件のレコードがあると設定したとします。

pageLength: 20,

つまり、レコードが20未満の場合、「前へ」および「次へ」ボタンを表示する必要はありません。以下のように書きます

drawCallback: function(settings){
    if($(this).find('tbody tr').length <= 20){
        $('#Atable_paginate').hide();
    }
}

3.Atableの初期化は以下のようになります

var table = $('#Atable').DataTable({
    pageLength: 20,
    lengthChange: false,
    drawCallback: function(settings){   
        if($(this).find('tbody tr').length <= 20){
            $('#Atable_paginate').hide();
        }
    }
});

4. Webページに複数のテーブルがある場合は、この方法を各テーブルに適用します。

1
Xie Jun