jQuery DataTables - 獲取給定行的頁面

我有一個數據表與數百個項目與固定50 iDisplayLength選項。我需要能夠找到加載的節點內的特定行是哪一頁。jQuery DataTables - 獲取給定行的頁面

我管理的所有內容都是獲取位置，不幸的是內部行位置與當前排序和過濾的行索引不對應。

以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.

來源

2013-05-30 LanFeusT

我最後寫一個小的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，它會分頁到臨t項目的頁面。

來源

2013-05-30 18:58:51 LanFeusT

我想補充一點，你可以省略傳入的oSettings，直接從表格對象取而代之。使它更清潔一點，所以你不必每次都手動獲取設置。 –

好吧，我需要這個，但我怎麼用它？我的意思是，我怎麼能通過這一行？我怎樣才能調用這個功能？ – maiky

使用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

來源

2013-05-30 01:54:27

這只是要告訴我的頁面我目前觀察。我想要的是獲取給定行的頁面，以便在頁面加載時對它進行分頁。 – LanFeusT

在1.10，你可以簡單地做：

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

假設你是一個tr節點工作。

編輯 - 對不起，獲取數據集中的位置。您需要使用page.info().len中的信息來劃分該索引並獲取頁碼。

來源

2014-11-13 16:39:29

我寫了一個函數來將您移動到給定行的頁面。但是，它使用更新的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 
    } 
}

來源

2015-03-10 18:27:15 Samuel

鑑於變量table和tr：

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

請注意，您可能不需要應用當前的搜索，如果你不使用過濾。

來源

2017-01-13 07:27:47

我需要以編程方式查找數據表中的行，將表分頁到相關行的頁面，並展開該行。我知道有些人已經創建了自定義庫來處理它，但我期望這種基本的功能是現成的。無論如何，這就是我所做的。這並不理想，但可能有所幫助。

使用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-28 00:27:52

jQuery DataTables - 獲取給定行的頁面

回答

相關問題