jQuery DataTables - lấy trang của một hàng nhất định

Question

Tôi có một DataTable với hàng trăm mục có tùy chọn 50 iDisplayLength cố định. Tôi cần để có thể tìm thấy những gì trang một hàng cụ thể là trong các nút được nạp.

Tất cả những gì tôi đã quản lý là nhận vị trí, rất tiếc là vị trí hàng nội bộ không tương ứng với chỉ mục hàng với sắp xếp và lọc hiện tại.

Ví dụ ở đây trên jsFiddle. Tôi có thể lấy lại vị trí hoặc hàng # TR4 (vị trí 3) nhưng iDisplayStart tôi cần là 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. 

Answer 1

tôi đã kết thúc viết một plugin DataTable nhỏ cho nó:

// 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); 
}; 

Vượt qua iRow và nó sẽ phân trang thành tha trang mục của t.

Answer 2

Sử dụng 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

Answer 3

Trong 1.10 bạn chỉ có thể làm:

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

Giả sử bạn đang làm việc với một nút tr.

chỉnh sửa - xin lỗi vì nhận vị trí trong tập dữ liệu. Bạn sẽ cần phải sử dụng thông tin từ page.info().len để sau đó chia chỉ mục đó và nhận số trang.

Answer 4

Tôi đã viết một chức năng để chuyển bạn đến trang có hàng nhất định. Tuy nhiên, nó sử dụng API mới hơn. Phần bên trong nếu là những gì bạn muốn.

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 
    } 
} 

Answer 5

biến Với table và tr:

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

Lưu ý rằng bạn có thể không cần phải áp dụng các tìm kiếm hiện tại nếu bạn không sử dụng lọc.

Answer 6

Tôi cần tìm kiếm một cách có lập trình hàng trong datatable, phân trang bảng thành trang của hàng có liên quan và mở rộng hàng đó. Tôi biết một số người đã tạo ra các thư viện tùy chỉnh để xử lý nó nhưng tôi mong đợi chức năng cơ bản như vậy ra khỏi hộp. Trong mọi trường hợp, đây là những gì tôi đã làm. Nó không phải là lý tưởng nhưng có thể giúp đỡ.

• Sử dụng jquery để có được những đối tượng bảng
• Lấy nút của bảng (hàng) và số nút; điều quan trọng và cần thiết vì đối tượng bảng chỉ có các hàng được tải mà bạn thấy trên trang hiện tại.
• Vì người dùng có thể thay đổi các trang của bảng và không có chức năng truy xuất các trang, tôi đã lưu nó trong bộ nhớ cục bộ để tôi có thể truy xuất nó. Tôi biết tôi có thể nhận được nó với một cái gì đó như var pageSize = oTable.fnSettings() ._ iDisplayLength; Nhưng tôi thích không để tham chiếu việc triển khai nội bộ của một đối tượng.
• Tìm số cột của cột bạn đang tìm kiếm
• Tìm hàng # cho hàng có cột phù hợp (đầu tiên) trong trường hợp này.
• Tính trang #
• Đến thời gian chờ trang và sử dụng để tải trang
• Sử dụng jquery để kích hoạt bất cứ hành động mà bạn muốn kích hoạt trên hàng liên quan (ví dụ mở rộng).

Đây là mẫu mã:

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);