6

50 固定の iDisplayLength オプションを持つ何百ものアイテムを含む dataTable があります。ロードされたノード内で特定の行がどのページにあるかを見つけることができる必要があります。

私が管理したのは位置を取得することだけですが、残念ながら、現在の並べ替えとフィルタリングでは、内部の行の位置が行インデックスに対応していません。

ここのjsFiddleの例として。位置または行 #tr4 (位置 3) を取得できますが、必要な iDisplayStart は 2 です。

<table id="example">
      <thead>
          <tr>
            <th>ID</th>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
          </tr>
        </thead>
        <tbody>
          <tr id="tr1" class="odd gradeX">
            <td>1</td>
            <td>Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center"> 4</td>
            <td class="center">X</td>
          </tr>
          <tr id="tr2" class="even gradeC">
            <td>2</td>
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="center">5</td>
            <td class="center">C</td>
          </tr>
          <tr id="tr3" class="odd gradeA">
            <td>3</td>
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="center">5.5</td>
            <td class="center">A</td>
          </tr>
          <tr id="tr4" class="even gradeA">
            <td>4</td>
            <td>Trident</td>
            <td>Internet Explorer 6</td>
            <td>Win 98+</td>
            <td class="center">6</td>
            <td class="center">A</td>
          </tr>
          <tr id="tr5" class="odd gradeA">
            <td>5</td>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td class="center">7</td>
            <td class="center">A</td>
          </tr>
    </tbody>
</table>

var oTable = $("#example").dataTable({
    "sDom": '<"clear">rtip<"clear">',
    "bPaginate": true,
    "iDisplayLength": 2,
});

var row = $(oTable.fnGetNodes()).filter("#tr4");
console.log(row[0]);

var position = oTable.fnGetPosition(row[0]);
console.log(position);

console.log(oTable.fnSettings()._iDisplayStart);;

// position is 3 but the page displayStart I need is 2.
4

7 に答える 7

5

私はそれのために小さなdataTableプラグインを書くことになりました：

// get the page of a given item in order to paginate to it's page on load
$.fn.dataTableExt.oApi.fnGetPageOfRow = function (oSettings, iRow) {
    // get the displayLength being used
    var displayLength = oSettings._iDisplayLength;

    // get the array of nodes, sorted (default) and using current filters in place for all pages (default)
    // see http://datatables.net/docs/DataTables/1.9.beta.1/DataTable.html#%24_details for more detals
    var taskListItems = this.$("tr", { "filter": "applied" });

    // if there's more than one page continue, else do nothing
    if (taskListItems.length <= displayLength) return;

    // get the index of the row inside that sorted/filtered array
    var index = taskListItems.index(iRow);

    // get the page by removing the decimals
    var page = Math.floor(index / displayLength);

    // paginate to that page 
    this.fnPageChange(page);
};

iRow を渡すと、そのアイテムのページにページ付けされます。

于 2013-05-30T18:58:51.970 に答える
2

1.10 では、次のように簡単に実行できます。

table.rows( { order: 'applied' } ).nodes().indexOf( ... );

trノードで作業していると仮定します。

編集- 申し訳ありませんが、データ セット内の位置を取得します。からの情報を使用して、page.info().lenそのインデックスを分割し、ページ番号を取得する必要があります。

于 2014-11-13T16:39:29.100 に答える
1

プログラムでデータテーブル内の行を見つけ、テーブルを関連する行のページにページ付けし、その行を展開する必要がありました。一部の人々がそれを処理するためにカスタム ライブラリを作成していることは知っていますが、そのような基本的な機能はすぐに使えると思います。いずれにせよ、これが私がしたことです。理想的ではありませんが、役立つかもしれません。

  • jquery を使用してテーブル オブジェクトを取得する
  • テーブルのノード (行) とノード数を取得します。テーブル オブジェクトには、現在のページに表示される行のみが読み込まれるため、これは重要かつ必須です。
  • テーブルのページサイズはユーザーが変更でき、ページサイズを取得する機能がないため、ローカルストレージに保存して取得できるようにしました。var pageSize = oTable.fnSettings()._iDisplayLength; のようなもので取得できることはわかっています。しかし、私はオブジェクトの内部実装を参照したくありません。
  • 探している列の列番号を見つける
  • この場合、一致する列 (最初) を持つ行の行 # を見つけます。
  • ページ番号を計算する
  • ページに移動し、タイムアウトを使用してページをロードします
  • jquery を使用して、関連する行でトリガーするアクション (展開など) をトリガーします。

コードサンプルは次のとおりです。

let oTable      = $('table#transactions').dataTable(),
                nodes       = oTable.fnGetNodes(),
                totalRows   = oTable.fnGetData().length,
                pageSize    = vmTable.pageLength,
                idColumn    = Object.keys(vmTable.columns).indexOf('column_name_to_be_matched'),
                matchedPage = 0;

            for (var i=0; i<totalRows; i++){
                if (searchValue) === parseInt(nodes[i].cells[idColumn].innerHTML)) {
                    matchedPage = Math.floor(i/pageSize);
                    break;
                }
            }
            if (matchedPage > 0)
                oTable.fnPageChange(matchedPage);

            $timeout(function() {
                $(`table#transactions ul[aria-labelledby="dd${searchValue}"] span.expand`).parent().trigger('click');
            }, 800);
于 2017-06-28T00:27:52.267 に答える