jquery - jQuery DataTables - 获取给定行的页面

Question

我有一个包含数百个项目的数据表，其中有一个固定的 50 iDisplayLength 选项。我需要能够在加载的节点中找到特定行所在的页面。

我所做的只是获取位置，不幸的是，内部行位置与当前排序和过滤的行索引不对应。

作为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.

score 5 · Accepted Answer

我最终为它编写了一个小的 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，它将分页到该项目的页面。

score 3 · Accepted Answer

我编写了一个函数来将您移动到具有给定行的页面。但是，它使用更新的 API。if 里面的部分就是你想要的。

function moveToPageWithSelectedItem() {
    var numberOfRows = itemsTable.data().length;
    var rowsOnOnePage = itemsTable.page.len();
    if (rowsOnOnePage < numberOfRows) {
        var selectedNode = itemsTable.row(".selectedItem").node();
        var nodePosition = itemsTable.rows({order: 'current'}).nodes().indexOf(selectedNode);
        var pageNumber = Math.floor(nodePosition / rowsOnOnePage);
        itemsTable.page(pageNumber).draw(false); //move to page with the element
    }
}

score 2 · Accepted Answer

在 1.10 中，您可以简单地执行以下操作：

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

假设您正在使用一个tr节点。

编辑- 抱歉，在数据集中获得了位置。您需要使用来自的信息page.info().len然后划分该索引并获取页码。

score 1 · Accepted Answer

使用 fnPagingInfo

  $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
  {
    return {
      "iStart":         oSettings._iDisplayStart,
      "iEnd":           oSettings.fnDisplayEnd(),
      "iLength":        oSettings._iDisplayLength,
      "iTotal":         oSettings.fnRecordsTotal(),
      "iFilteredTotal": oSettings.fnRecordsDisplay(),
      "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
      "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
    };
  };


  $(document).ready(function() {
  $('#example').dataTable( {
  "fnDrawCallback": function () {
  alert( 'Now on page'+ this.fnPagingInfo().iPage );
  }
  } );
  } );

http://datatables.net/plug-ins/api

score 1 · Accepted Answer

我有类似要求的解决方案。在我的场景中 request=row. 并且数据表不处理服务器端（ajax）。,和是 C# Razor 的语法，因此您可以将其替换为您的编程语言@if。该表包含 id 属性为 requestId (rowId) 的列。加载页面时隐藏表格，并在 javascript 完成后显示。@model<text>

看法

<table id="ResultTable" style="display: none">
...
<tr id="@item.Id">

JS

    // When other page redirect to this page with request id parameter, we want to highlight the request
    // (switch to proper datatable page, highlight row representing request and display details).
    @if (Model.RequestId != null)
    {
          <text>
                // Get index of future datatable row.
                // After table is transformed to datatable, probably there is no way to get an index.
                var selectedRequestRowIndex = $('#' + @Model.RequestId).index();
          </text>
    }

    // Transform table to datatable.
    var table = $('#ResultTable').DataTable({
          "paging": true,
          "ordering": true,
          "info": false
    });

    @if (Model.RequestId != null)
    {
          <text>
                // Get index of page, where request is located.
                var selectedRequestPageIndex = Math.floor(selectedRequestRowIndex / table.page.info().length);
                // Switch to page where request is located.
                table.page(selectedRequestPageIndex).draw('page');
                // Click on row, which represent request.
                $('#' + @Model.RequestId).trigger('click');
          </text>
    }

    // Display datatable to user.
    $('#ResultTable').show();

score 1 · Accepted Answer

我需要以编程方式在数据表中找到一行，将表分页到相关行的页面，然后展开该行。我知道有些人已经创建了自定义库来处理它，但我希望这些基本功能开箱即用。无论如何，这就是我所做的。这并不理想，但可能会有所帮助。

使用jquery获取表对象
获取表的节点（行）和节点数；这很重要并且是必需的，因为 table 对象只加载了您在当前页面上看到的那些行。
由于用户可以更改表的页面大小并且没有检索页面大小的功能，因此我将其保存在本地存储中以便我可以检索它。我知道我可以用 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);

score 0 · Accepted Answer

给定变量table和tr：

Math.floor(
    table.rows({
        page: 'all',
        order: 'current',
        search: 'applied'
    }).nodes().indexOf( tr ) / table.page.info().length
)

请注意，如果您不使用过滤，您可能不需要应用当前搜索。

jquery - jQuery DataTables - 获取给定行的页面

7 回答 7

Related

Reference