jQuery DataTables-获取给定行的页面

问题描述

我有一个dataTable，其中包含数百个带有固定的50 iDisplayLength选项的项目.我需要能够找到已加载节点中特定行的页面.

I have a dataTable with hundreds of items with a fixed 50 iDisplayLength option. I need to be able to find what page a specific row is within the loaded nodes.

我所要做的就是获取位置，不幸的是，内部行位置与当前的排序和过滤条件下的行索引不对应.

All I've managed is to get the position, unfortunately that internal row position does not correspond to the row index with the current sorting and filtering.

作为 jsFiddle 上的示例.我可以检索位置或行#tr4(位置3)，但我需要的iDisplayStart是2.

As an example here on jsFiddle. I can retrieve the position or row #tr4 (position 3) but the iDisplayStart I need is 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.

推荐答案

我最终为它写了一个小的dataTable插件:

I ended up writing a small dataTable plugins for it:

// 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，它将分页到该项目的页面.

Pass in the iRow and it'll paginate to that item's page.

这篇关于jQuery DataTables-获取给定行的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！