如何让jQuery DataTables对隐藏值排序，但是搜索显示的值？ [英] How can I get jQuery DataTables to sort on hidden value, but search on displayed value?

问题描述

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

这是我的JSON数据，DataTables从Web服务器通过 sAjaxSource 。

  {
报告：[
 {Date：{Sort =20101131133000，显示：11/31/2010 1:30 PM}}，
 {Date：{Sort =20100912120000，显示：1200 EST 2010-09- 12}}，
] 
} 
  

很容易告诉DataTables根据 Date.SortValue 属性进行排序，并使显示属性对用户可见使用 fnRender（）。所以这让我一半到我的目标。

  var dataTableConfig = {
 sAjaxSource：/ getreports，
 sAjaxDataProp：报告，
 aoColumns：[
 {mDataProp：User}，
 {mDataProp：Date.Sort，
 bSortable：true，
 sName：Date，
 bUseRendered：false，
 fnRender：function（oObj）{
 return oObj.aData [oObj.oSettings.aoColumns [oObj.iDataColumn] .sName]。显示; 
} 
} 
] 
}; 
  

这是我的问题。 我想允许用户根据显示的值输入过滤器（使用DataTables提供的内置过滤器输入），但不能。

例如。如果用户输入EST，它们将得到零结果，因为数据表根据 mDataProp 中指定的值进行过滤，而不是基于从 fnRender返回的值。

任何人都可以帮助我找出如何排序和过滤日期列？谢谢。

解决方案

这是一个旧帖子，但希望这将有助于别人来到这里。
$ b

在最新版本的DataTables中，不推荐使用 bUseRendered 和 fnRender / p>

mRender 是做这种事情的新方法，有一个稍微不同的做法。

你可以用以下方式解决你的问题：

  ... 
 {mDataProp：Date.Sort
 bSortable：true，
 sName ：Date，
 //这将返回所有
 //的显示值除了当它用于排序时，
 //那么它将使用Sort值
 mRender：function（data，type，full）{
 if（type =='sort'）return data.Sort; 
 return data.Display 
} 
} 
 ... 
  

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.

This is my JSON data that DataTables gets from from the web server via 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.SortValue property and to make the Display property visible to the user by using fnRender(). So this gets me halfway to my goal.

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.

For example. If a user entered "EST", they would get zero results because datatables filters based on the value specified in mDataProp not based on the value returned from fnRender.

Can anyone help me figure out how to sort AND filter a date column? Thanks.

解决方案

This is an old post, but hopefully this will help someone else that comes here.

In a more recent version of DataTables, bUseRendered and fnRender are deprecated.

mRender is the new way of doing this sort of thing and has a slightly different approach.

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

这篇关于如何让jQuery DataTables对隐藏值排序，但是搜索显示的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！