javascript - データテーブルにページが 1 つしかない場合、ページネーションを無効にします

Question

私はデータテーブルを実装しており、私の要件によれば、ページネーションの問題を除いてほとんどのことが解決されています。私の場合、ページネーションナビゲーションが表示されるたびに。ページが 1 つしかない場合、ページネーションナビゲーションを無効にしたいのですが、その方法を教えてください。私のコードは次のようなものです:

JS

<script>
  function fnFilterColumn(i) {

    $('#example').dataTable().fnFilter(
      $("#col" + (i + 1) + "_filter").val(),
      i
    );
  }
  $(document).ready(function() {


    $('#example').dataTable({
      "bProcessing": true,
      "sAjaxSource": "datatable-interestdb.php",
      "bJQueryUI": true,
      "sPaginationType": "full_numbers",
      "sDom": 'T<"clear">lfrtip',
      "oTableTools": {
        "aButtons": [

          {
            "sExtends": "csv",
            "sButtonText": "Save to CSV"
          }
        ]
      },
      "oLanguage": {
        "sSearch": "Search all columns:"
      }


    });


    $("#example").dataTable().columnFilter({
      aoColumns: [
        null,
        null,
        null,
        null
      ]
    });


    $("#col1_filter").keyup(function() {
      fnFilterColumn(0);
    });

  });
</script>

HTML

<table cellpadding="3" cellspacing="0" border="0" class="display userTable" aria-describedby="example_info">

  <tbody>
    <tr id="filter_col1">
      <td>Interest:</td>
      <td>
        <input type="text" name="col1_filter" id="col1_filter">
      </td>
    </tr>
  </tbody>
</table>


<table width="100%" border="0" align="center" cellpadding="2" cellspacing="1" class="form_table display" id="example">

  <thead>
    <tr>
      <th class="sorting_asc" width="25%">Interest</th>
      <th width="25%">Name</th>
      <th width="25%">Email</th>
      <th width="25%">Contact No</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td colspan="4" class="dataTables_empty">Loading data from server</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </tfoot>


</table>

score 87 · Accepted Answer

Nicolaの回答に基づいて、fnDrawCallback（）コールバックとoSettingsオブジェクトを使用して、描画後にテーブルのページネーションを非表示にすることができます。oSettingsを使用すると、テーブル設定（ページごとのレコード、テーブルに固有のセレクターなど）について何も知る必要がありません。

以下は、ページごとの表示長がレコードの合計よりも長いかどうかを確認し、大きい場合はページネーションを非表示にします。

$('#your_table_selector').dataTable({
    "fnDrawCallback": function(oSettings) {
        if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
            $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
        } else {
             $(oSettings.nTableWrapper).find('.dataTables_paginate').show();
        }
    }
});

ドキュメンテーション

score 44 · Accepted Answer

それらを動的に非表示にする必要があります。使用できると思いますfnDrawCallback()

$('#example').dataTable({
    "fnDrawCallback": function(oSettings) {
        if ($('#example tr').length < 11) {
            $('.dataTables_paginate').hide();
        }
    }
});

編集 -ここで見つかった別の方法は

"fnDrawCallback":function(){
      if ( $('#example_paginate span span.paginate_button').size()) {
      $('#example_paginate')[0].style.display = "block";
     } else {
     $('#example_paginate')[0].style.display = "none";
   }
}

score 32 · Accepted Answer

これは、V1.10 以降の JQuery Datatables で作業する場合の正しいアプローチです。プロセスは通常、以前のバージョンと同じですが、イベント名と API メソッドが若干異なります。

$(table_selector).dataTable({
    preDrawCallback: function (settings) {
        var api = new $.fn.dataTable.Api(settings);
        var pagination = $(this)
            .closest('.dataTables_wrapper')
            .find('.dataTables_paginate');
        pagination.toggle(api.page.info().pages > 1);
    }
});

ドキュメンテーション

score 32 · Accepted Answer

私の機能プラグインconditionalPagingを参照してください。

使用法：

$('#myTable').DataTable({
    conditionalPaging: true
});

or

$('#myTable').DataTable({
    conditionalPaging: {
        style: 'fade',
        speed: 500 // optional
    }
});

score 7 · Accepted Answer

このコードをデータテーブルの初期化リクエストに追加してください。

Jクエリ

単一のデータテーブルに適用:

"fnDrawCallback": function (oSettings) {
  var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate')
  if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
    pgr.hide();
  } else {
    pgr.show()
  }
}

すべてのデータテーブルに適用:

"fnDrawCallback": null

datatables.jsコードをサイト全体に適用するように編集します。

score 3 · Accepted Answer

@sinaのソリューションが好きです。よくできた。

しかし、私のものにはいくつかの必要な改善が伴います。@sina は、必要に応じelseてページネーションを再度表示する部分を忘れていました。allそして、次のようにオプションを定義する可能性を追加しましたlengthMenu:

jQuery('#your_table_selector').dataTable({
    "lengthMenu": [[10, 25, 50, 100, 250, 500, -1], [10, 25, 50, 100, 250, 500, "All"]],

    "fnDrawCallback": function(oSettings) {
        if (oSettings._iDisplayLength == -1
            || oSettings._iDisplayLength > oSettings.fnRecordsDisplay())
        {
            jQuery(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
        } else {
            jQuery(oSettings.nTableWrapper).find('.dataTables_paginate').show();
        }
    }
});

score 1 · Accepted Answer

すべてのエントリのデータテーブルで sPaginationType を Dynamic にしようとしましたが、そのための適切な解決策が見つかりませんが、私がしたことは

"fnDrawCallback": function(oSettings) {
    $('select[name="usertable_length"]').on('change', function(e) {
        var valueSelected  = this.value;
        if ( valueSelected < 10 ) {
            $('.dataTables_paginate').hide();
        } else {
            $('.dataTables_paginate').show();
        }
    });
},

score 1 · Accepted Answer

$('#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");
    }

    }
   });

score 1 · Accepted Answer

これが古い投稿であることは知っていますが、これを使用し、私のようにOCDを持っている人にとっては、変更が必要です.

if文を変更して、

if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay())

に

if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay())

この小さな変更により、10、25、50、100 を超えるレコード長のページネーションボタンが表示されますが、技術的には 10、25 などのレコードは 1 ページビューのままです。

score 0 · Accepted Answer

データが動的でない場合、つまり、サーバーが HTML テーブルを生成し、それが DataTables によって強化される場合、サーバー上でページングオプションをレンダリングできます (私はかみそりを使用しています)。

$("#results").dataTable({
  paging: @(Model.ResultCount > Model.PageSize ? "true" : "false"),
  // more ...
});

score 0 · Accepted Answer

DataTables は機能の有効化と無効化を実行時にサポートしていないため、これを直接行うことはできません。ただし、fnDrawCallback() 関数を使用してページが 1 つしかないかどうかを確認し、ページが 1 つしかない場合はページネーションコントロールを非表示にすることができます。

score 0 · Accepted Answer

これが私の解決策です。同じページに複数のテーブルがある場合にも機能します。たとえば、衝突を防ぎます（テーブルAにはページネーションが必要で、Bにはページネーションが必要ありません）。

私のコードの tableId は決して未定義ではありません。テーブルの ID を定義していない場合、dataTable は「DataTables_Table_0」のようなものを追加することでそれを行います。

    fnDrawCallback: function (oSettings) {
        if ($(this).DataTable().column(0).data().length <= oSettings._iDisplayLength) {
            var tableId = $(this).attr('id');
            $('#' + tableId + '_paginate').hide();
        }
    }

javascript - データテーブルにページが 1 つしかない場合、ページネーションを無効にします

20 に答える 20

ドキュメンテーション

Related

Reference