如何让jQuery DataTables对隐藏值进行排序,但搜索显示的值？

Question

我有一个简单的DataTables网格,其中包含日期列.我在JSON数据集中提供了两个日期值,一个用于显示,另一个专门设计,以便DataTables可以对其进行排序.我的Web应用程序允许用户选择一堆不同的日期格式,因此需要灵活.

这是DataTables从Web服务器获取的JSON数据sAjaxSource.

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

很容易告诉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;
      }
    }
  ]
};

这是我的问题.我想允许用户根据显示的值输入过滤器(使用DataTables提供的内置过滤器输入),但他们不能.

例如.如果用户输入"EST",它们将得到零结果,因为数据表基于指定的值过滤而mDataProp不是基于返回的值fnRender.

任何人都可以帮我弄清楚如何排序和过滤日期列？谢谢.

Answer 1

我相信由于对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>

"年龄"列包含数字,符号和字母并不重要,DataTables将使用"data-sort"属性进行排序.

Answer 2

尝试一些不同的方法:

将两列放在表中(我将其称为DateDisplay和DateSort),不要使用渲染函数,只需隐藏DateSort列.然后在DateDisplay put列的aoColumns数组中{ "iDataSort": 2 },其中2是DateSort列的索引.

在这种情况下,DateDisplay列将显示在原始数据中,过滤器将由此列完成,但排序将由DateSort列中的值完成.

有关数据表站点或http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspx "配置排序"部分中的iDataSort属性的更多详细信息.

Answer 3

这是一个老帖子,但希望这会帮助其他人来到这里.

在较新版本的数据表中,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
  }
}
...

Answer 4

嗯...而不是经历所有这些严峻的事情,只需span在前面添加一个隐藏的"排序依据":

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

注意:这确实意味着他们可以通过隐藏或显示的值进行搜索......这可能是您无法忍受的结果.

Answer 5

+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]
});

Answer 6

使用data-sorttd 上的属性，例如

<td data-sort="12342345434">Thursday, May 9th 11</td>