jQuery的數據表的排序由集中的行內

我已經與<asp:Repeater>創建創建一個表，看起來像這樣的DataTable（注：頭/數據此處是任意）：jQuery的數據表的排序由集中的行內

<table> 
    <tr> 
     <th>Destination</th> 
     <th>Name</th> 
     <th>DOB</th> 
    </tr> 
    <tr> 
     <td> 
      <div>USA</div> 
      <div>Canada</div> 
     </td> 
     <td> 
      <div>Marc Anthony</div> 
      <div>Cleopatra</div> 
     </td> 
     <td> 
      <div>JUL-10-1990</div> 
      <div>DEC-22-1045</div> 
     </td> 
    </tr> 
    <!-- multiple data rows like the one above; always USA/Canada, but different names DOBs --> 
</table>

我需要什麼，能夠要做的是當點擊列（Name或DOB）進行排序時，通過第一個數據集（第一個數據集中的第一個<div>）或第二個數據集（第二個數據集中的<div>）對列進行交替排序。即第一次點擊訂單[USA]-[Marc Anthony]-[JUL-10-1990]設置，第二次點擊訂單[Canada]-[Cleopatra]-[DEC-22-1045]設置，但保持每個集合在<tr>結構中。

我也不需要使用一箇中繼器，我可以用一個JSON數據源一拉：

$(...).DataTable(
    data: [JSON object] 
);

我沒有通過閱讀DataTables手動/ API能夠找出如何做到這一點/無論與組或什麼。誰能幫忙？

我沒有結婚到目前的結構，我可以操縱它很多，但是我希望只要它維持每行中分組集合的'外觀'。

來源

2016-05-16 Daevin

我現在沒有時間去挖掘它，但是DataTables網站上的幾個鏈接可能對我以前並不知情：https：//www.datatables.net/plug-ins/sorting /，https：//www.datatables。網絡/示例/插件/ dom_sort – Adam

@亞當真棒，謝謝，我會研究這些併發佈一個答案（記入你：D），如果我找到一個 – Daevin

有2個這樣的話題。較大的一個是自定義排序，然後是較小的一個，以檢測是否按第一個或第二個div進行排序。

Datatables提供了一些自定義排序插件的文檔，但通過查看它們的examples很容易創建自己的排序插件。基本上我在這裏做的是創建一個名爲'div-toggle'的自定義排序插件。

對於解決方案，我想出來的，如果你在你的數據添加類的div，這樣這將是最簡單的：

<td> 
    <div class="firstDiv">USA</div> 
    <div class="secondDiv">Canada</div> 
</td>

做你想做什麼，你需要添加一個自定義排序插件，用於分析每行中的數據，然後決定是返回第一個還是第二個數據中包含的數據。此代碼生成一個插件安裝到數據表做到這一點：

$.fn.dataTable.ext.order['div-toggle'] = function (settings, col) { 
    return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) { 
     var cellData; 
     if (firstDiv) cellData = $($(td).html()).find('.firstDiv').text(); 
     else cellData = $($(td).html()).find('.secondDiv').text(); 
     return cellData; 
    }); 
}

我在這裏接近它的方式，「firstDiv」是一個布爾全局變量，它告訴插件是否排序時使用的第一或第二個div。你可以申請被點擊時觸發此值的事件監聽頭：

$('.dataTable').on('click', 'thead tr th:eq(0)', function() { 
    if (firstDiv) firstDiv = false; 
    else firstDiv = true; 
});

告訴數據表使用這個排序插件特定的欄，添加申報進入「列」在初始化屬性：

$(...).DataTable(
    { 
     "columns" : [ {"orderDataType": "div-toggle"} ] 
    } 
);

這將用於將此排序插件應用於僅有一列的dataTable，只是爲了讓您瞭解如何使用它。

請注意：有，你可以在我的示例代碼，並可能是一個更有效的方式做到的排序分析使用無疑是更好的選擇，但是這個代碼應該工作，並給你一個很好的基礎，開始從使它工作更好。

來源

2016-05-16 22:03:59 Adam

jQuery的數據表的排序由集中的行內

回答

相關問題