如何让 jQuery DataTables 对隐藏值进行排序，但对显示值进行搜索？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7668047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get jQuery DataTables to sort on hidden value, but search on displayed value?
提问by jessegavin
I have a simple DataTables grid which contains date columns. I have provided two values for the date in my JSON data set, one for display and one specifically designed so that DataTables can sort it. My web application allows users to choose a bunch of different date formats, so it needs to be flexible.
我有一个简单的 DataTables 网格，其中包含日期列。我在我的 JSON 数据集中为日期提供了两个值，一个用于显示，另一个用于专门设计以便 DataTables 可以对其进行排序。我的 web 应用程序允许用户选择一堆不同的日期格式，所以它需要灵活。
This is my JSON data that DataTables gets from from the web server via sAjaxSource.
这是我的 JSON 数据，DataTables 通过sAjaxSource.
{
Reports : [
{ Date: { Sort = "20101131133000", Display : "11/31/2010 1:30 PM" } },
{ Date: { Sort = "20100912120000", Display : "1200 EST 2010-09-12" } },
]
}
It is easy to tell DataTables to sort based on the Date.SortValueproperty and to make the Displayproperty visible to the user by using fnRender(). So this gets me halfway to my goal.
告诉 DataTables 根据Date.SortValue属性进行排序并Display通过使用使属性对用户可见很容易fnRender()。所以这让我达到了我的目标。
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;
}
}
]
};
Here's my problem.I want to allow the user to enter a filter (using the built-in filter input that DataTables provides) based on the displayed value, but they cannot.
这是我的问题。我想允许用户根据显示的值输入过滤器（使用 DataTables 提供的内置过滤器输入），但他们不能。
For example. If a user entered "EST", they would get zero results because datatables filters based on the value specified in mDataPropnot based on the value returned from fnRender.
例如。如果用户输入“EST”，他们将获得零结果，因为数据表基于 中指定的值进行过滤，mDataProp而不是基于从 返回的值fnRender。
Can anyone help me figure out how to sort AND filter a date column? Thanks.
谁能帮我弄清楚如何对日期列进行排序和过滤？谢谢。
采纳答案by CWSpear
This is an old post, but hopefully this will help someone else that comes here.
这是一个旧帖子，但希望这能帮助到这里的其他人。
In a more recent version of DataTables, bUseRenderedand fnRenderare deprecated.
在较新版本的数据表中，bUseRendered并fnRender已被弃用。
mRenderis the new way of doing this sort of thing and has a slightly different approach.
mRender是做这种事情的新方法，方法略有不同。
You can solve your issue with something along the lines of:
您可以通过以下方式解决您的问题：
...
{ 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
}
}
...
回答by Aaron C. de Bruyn
I believe the existing answers are deprecated due to updates to DataTables. HTML5 supports attributes that DataTables can use to easily sort columns. Specifically the data-sortattribute. (See https://datatables.net/examples/advanced_init/html5-data-attributes.html)
我相信由于数据表的更新，现有答案已被弃用。HTML5 支持 DataTables 可以用来轻松对列进行排序的属性。具体data-sort属性。（参见https://datatables.net/examples/advanced_init/html5-data-attributes.html）
I can easily sort tables like so:
我可以像这样轻松地对表格进行排序：
<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>
It doesn't matter that the 'Age' column contains numbers, symbols, and letters, DataTables will sort using the 'data-sort' attribute.
'Age' 列包含数字、符号和字母并不重要，DataTables 将使用 'data-sort' 属性进行排序。
回答by Jovan MSFT
Try a little bit different approach:
尝试一点不同的方法：
Put both columns in the table (I will call them DateDisplay and DateSort), do not use render function and just hide the DateSort column. Then in the aoColumns array for the column DateDisplay put { "iDataSort": 2 }, where 2 is an index of the DateSort column.
将两列放在表中（我将它们称为 DateDisplay 和 DateSort），不要使用渲染功能，只需隐藏 DateSort 列。然后在列 DateDisplay put 的 aoColumns 数组中{ "iDataSort": 2 }，其中 2 是 DateSort 列的索引。
In this case, DateDisplay column will be shown in original data, and filter will be done by this column, but sorting will be done by the values in the DateSort column.
在这种情况下，DateDisplay列将显示在原始数据中，过滤将以此列完成，但排序将通过DateSort列中的值完成。
There are more details about the iDataSort property on the datatables site or in the http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspxsection"Configure sorting".
在数据表站点或http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspx部分“配置排序”中有关于 iDataSort 属性的更多详细信息。
回答by Serj Sagan
Umm...instead of going through all of this rigmarole just add a hidden spanwith your "Sort By" to the front:
嗯......span与其经历所有这些繁琐的事情，只需在前面添加一个隐藏的“排序依据”：
<td><span style="display:none;">20101131133000</span>11/31/2010 1:30 PM</td>
Note: This does mean that they can search by either the hidden or shown value...this may be a consequence you can't live with.
注意：这确实意味着他们可以通过隐藏或显示的值进行搜索……这可能是您无法忍受的结果。
回答by Brian
+1 JocaPC
+1 JocaPC
I'd like to add to JocaPC's answer by reminding everyone that javascript utilizes zero-indexed arrays.
我想通过提醒大家javascript使用零索引数组来添加JocaPC的答案。
Example:
例子：
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 ...................................................................
To sort the date field using the hidden string you would use the following.
要使用隐藏字符串对日期字段进行排序，您将使用以下内容。
$('.mytable').dataTable({
"aoColumns": [{"bVisible": false},{"iDataSort": 0},null]
});
回答by Martin Wickman
Since you already have your data in sortable and displayable format, this is all code you need.
由于您已经拥有可排序和可显示格式的数据，这就是您需要的所有代码。
It will use Date.Sortfor sorting and Date.Displayfor visuals. This is documented here.
它将Date.Sort用于排序和Date.Display视觉效果。这在此处记录。
columns: [{
data: 'Date',
render: {
_: 'Display',
sort: 'Sort'
}
}]
回答by billynoah
For those using an ajax data source you can use Orthogonal data. For instance, in your ajax response return one of your columns as an object with a display value and a sort value (similar to what the OP did):
对于那些使用 ajax 数据源的人，您可以使用Orthogonal data。例如，在您的 ajax 响应中，将您的列之一作为具有显示值和排序值的对象返回（类似于 OP 所做的）：
{
"data":[
{
"customer":"JOHN DOE",
"rating":{
"display": "★★★",
"sort":"3"
},
},
{
"customer":"BILLY NOAH",
"rating":{
"display": "★★★★★",
"sort":"5"
},
}
]
}
Now in your table options you can use columns()like this:
现在在您的表格选项中，您可以columns()像这样使用：
"columns" : [
{
"data":"customer"
},
{
"data":"rating",
"render":{
"_":"display",
"sort":"sort"
}
}
]
回答by rémy
Use the data-sortattribute on the td, like
使用data-sorttd 上的属性，例如
<td data-sort="12342345434">Thursday, May 9th 11</td>
回答by user3114969
You have to sort column by a hidden column (Sort). To to this you have to include a column that contains the sort data, hide the column and sort the Display Column by the hidden column.
您必须按隐藏列对列进行排序（排序）。为此，您必须包含一个包含排序数据的列，隐藏该列并按隐藏列对显示列进行排序。
"aoColumnDefs:[
{"sTitle": "Display", "iDataSort":1, "aTargets":[2]},
{"bVisible": false, "aTargets":[2]}
],
aoColumns: [
{ mData: "User" },
{ mData: "Display"},
{ mData: "Sort"}
]
