How to sort on hidden value, but filter on displayed value?

How to sort on hidden value, but filter on displayed value?

jessegavinjessegavin Posts: 2Questions: 0Answers: 0
edited October 2011 in General
I have a simple DataTable 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.

[code]

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

[/code]

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.

[code]

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

[/code]

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.

Replies

  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    http://www.datatables.net/ref#iDataSort
  • GregPGregP Posts: 500Questions: 10Answers: 0
    iDataSort... could be so useful to me... I wish I had known about it a few weeks ago!
  • jessegavinjessegavin Posts: 2Questions: 0Answers: 0
    Thanks fbas. So something like this?

    [code]
    var dataTableConfig = {
    sAjaxSource: "/getreports",
    sAjaxDataProp: "Reports",
    aoColumns: [
    { mDataProp: "User" },
    { mDataProp: "Date.Display",
    bSortable: true,
    sName: "Date",
    iDataSort: 2
    },
    { mDataProp: "Date.Sort",
    bVisible: false
    }
    ]
    };
    [/code]
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    yup, should be exactly like that. did it work?
This discussion has been closed.