如何讓jQuery DataTables對隱藏值進行排序，但搜索顯示值？

我有一個簡單的DataTables網格，其中包含日期列。我在JSON數據集中爲日期提供了兩個值，一個用於顯示，另一個專門設計，以便DataTable可以對其進行排序。我的Web應用程序允許用戶選擇一堆不同的日期格式，因此它需要靈活。如何讓jQuery DataTables對隱藏值進行排序，但搜索顯示值？

這是我的JSON數據，DataTables通過sAjaxSource從Web服務器獲取。

{ 
    Reports : [ 
    { Date: { Sort = "20101131133000", Display : "11/31/2010 1:30 PM" } }, 
    { Date: { Sort = "20100912120000", Display : "1200 EST 2010-09-12" } }, 
    ] 
}

這是很容易告訴數據表基礎上，Date.SortValue屬性進行排序，並通過使用fnRender()使Display屬性對用戶可見。所以這使我獲得了一半的目標。

var dataTableConfig = { 
    sAjaxSource: "/getreports", 
    sAjaxDataProp: "Reports", 
    aoColumns: [ 
    { mDataProp: "User" }, 
    { mDataProp: "Date.Sort", 
     bSortable: true, 
     sName: "Date", 
     bUseRendered: false, 
     fnRender: function (oObj) { 
     return oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].sName].Display; 
     } 
    } 
    ] 
};

這裏是我的問題。我想允許用戶根據顯示的值輸入過濾器（使用DataTables提供的內置過濾器輸入），但它們不能。

例如。如果用戶輸入「EST」，則他們將得到零結果，因爲數據表根據mDataProp中指定的值進行過濾，而不基於從fnRender返回的值。

任何人都可以幫我弄清楚如何排序和篩選日期列？謝謝。

來源

2011-10-05 jessegavin

自從更新數據表後，此問題的正確答案已更改。我不確定在改變接受的答案和更新答案方面，SO政策是什麼，但其中一個或另一個可能會得心應手？ –

我很樂意改變接受的答案。我不再使用DataTable，你能告訴哪一個更好嗎？ – jessegavin

CW Spear的回答標有'13年11月5日在7：12'似乎是正確的，併爲我工作。 –

這是一篇舊帖子，但希望這可以幫助別人來到這裏。

在較新版本的DataTable中，不推薦使用bUseRendered和fnRender。

mRender是做這種事情的新方法，有一個稍微不同的方法。

你能解決您的問題沿着線的東西：

... 
{ mDataProp: "Date.Sort" 
    bSortable: true, 
    sName: "Date", 
    // this will return the Display value for everything 
    // except for when it's used for sorting, 
    // which then it will use the Sort value 
    mRender: function (data, type, full) { 
    if(type == 'sort') return data.Sort; 
    return data.Display 
    } 
} 
...

來源

2013-11-05 07:12:32 CWSpear

確認。這工作。 **請求的類型調用數據 - 這將是'過濾器'，'顯示'，'類型'或'排序'。**有沒有人甚至使用數據表？ – Jess

這是最完美的答案！謝謝！ – Konklone

現在接受的答案是錯誤的，因爲'iDataSort'已被棄用，使得這個答案正確。 –

嘗試一點點不同的方法：

把兩個表中的列（我會打電話給他們DateDisplay和DateSort），不使用渲染功能，只是隱藏DateSort列。然後在列DateDisplay的aoColumns數組中輸入{ "iDataSort": 2 }，其中2是DateSort列的索引。

在這種情況下，DateDisplay列將顯示在原始數據中，並且過濾器將由此列完成，但排序將通過DateSort列中的值完成。

有關數據表站點或http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspx「配置排序」部分中的iDataSort屬性的更多詳細信息。

來源

2011-10-09 20:18:59

@ CWSpear的答案更容易實現，我認爲。 – Jess

此答案適用於傳統數據表，現在已棄用 –

+1 JocaPC

我想提醒大家的是，JavaScript的使用零索引的數組添加到JocaPC的答案。

例子：

 
HiddenSortString (0) | Date (1)     | Some Text (2) 
................................................................... 
1349035566   | September 30, 2012 2:06 pm | blah blah 
1349118137   | October 01, 2012 1:02 pm | blah blah 
1349371297   | October 04, 2012 11:21 am | blah blah 
...................................................................

要使用隱藏的字符串，你可以使用以下排序日期字段。

$('.mytable').dataTable({ 
    "aoColumns": [{"bVisible": false},{"iDataSort": 0},null] 
});

來源

2012-10-10 16:25:57 Brian

+1，用於美觀的視覺表示！ – JakeJ

感謝JakeJ ... +1對CWSpear的清理範例。 – Brian

嗯...而不是去通過這一切繁瑣手續只需要添加一個隱藏span你的「排序」到前面：

<td><span style="display:none;">20101131133000</span>11/31/2010 1:30 PM</td>

注意：這並不意味着他們可以通過隱藏或顯示值搜索...這可能是你無法忍受的結果。

來源

2015-01-22 21:19:38

簡單而優雅！ – Andreas

我真的很喜歡這個問題的解決方案。 – rii

我相信現有的答案由於DataTables的更新而不推薦使用。 HTML5支持DataTables可用來輕鬆對列進行排序的屬性。具體來說就是data-sort屬性。（見https://datatables.net/examples/advanced_init/html5-data-attributes.html）

我可以很容易地像這樣排序表：

<table> 
    <thead> 
    <tr> 
     <td>Name</td> 
     <td>Age</td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>John Doe</td> 
     <td data-sort="37">2/1/78 (37 years old)</td> 
    </tr> 
    <tr> 
     <td>Jane Doe</td> 
     <td data-sort="35">12/1/80 (35 years old)</td> 
    </tr> 
    </tbody> 
</table>

不要緊的「年齡」列中包含數字，符號和字母，將數據表排序使用「數據 - 排序'屬性。

來源

2015-02-25 22:12:18

很好用，但版本爲1.10.4，如果第一行有一個空的數據排序值，我就會遇到問題：它不會使用其他行的屬性。所以確保你在html中不輸出'data-sort =「」''。 – youen

這應該被接受回答 – Tom

應該指出的是，如果您使用Ajax/json填充表，則此解決方案不起作用。 –

您必須按隱藏列（排序）對列進行排序。爲此，您必須包含一個包含排序數據的列，隱藏列並按隱藏列排列顯示列。

"aoColumnDefs:[ 
    {"sTitle": "Display", "iDataSort":1, "aTargets":[2]}, 
    {"bVisible": false, "aTargets":[2]} 
    ], 

aoColumns: [ 
    { mData: "User" }, 
    { mData: "Display"}, 
    { mData: "Sort"} 
    ]

來源

2016-08-29 08:19:02 user3114969

既然您已經有了可排序和可顯示格式的數據，這就是您需要的所有代碼。

它將使用Date.Sort進行分類，Date.Display用於視覺效果。這是記錄here。

columns: [{ 
    data: 'Date', 
    render: { 
     _: 'Display', 
     sort: 'Sort' 
    } 
}]

來源

2017-05-02 11:12:21

這應該是被接受的答案。 –

如何讓jQuery DataTables對隱藏值進行排序，但搜索顯示值？

回答

相關問題