Как я могу заставить jQuery DataTables сортировать по скрытому значению, но искать по отображаемому значению?

Question

У меня есть простая таблица DataTables, которая содержит столбцы даты.Я предоставил два значения для даты в моем наборе данных JSON, одно для отображения, а другое специально разработано, чтобы DataTables могли его сортировать.Мое веб-приложение позволяет пользователям выбирать несколько различных форматов дат, поэтому оно должно быть гибким.

Это мои данные JSON, которые DataTables получает с веб-сервера через sAjaxSource.

* 1005.*

С помощью 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», он получит нулевой результат, потому что datatables фильтрует на основе значения, указанного в 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>

Не имеет значения, что в столбце «Возраст» содержатся цифры, символы и буквы, таблицы данных будут сортироваться с использованием атрибута «сортировка данных».

Answer 2

Попробуйте немного другой подход:

Поместите оба столбца в таблицу (я буду называть их DateDisplay и DateSort), не используйте функцию рендеринга и просто скройте столбец DateSort.Затем в массиве aoColumns для столбца DateDisplay поместите { "iDataSort": 2 }, где 2 - это индекс столбца DateSort.

В этом случае столбец DateDisplay будет показан в исходных данных, и фильтр будет выполнен этимстолбца, но сортировка будет выполняться по значениям в столбце DateSort.

Подробнее о свойстве iDataSort можно узнать на сайте datatables или в разделе http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspx «Настройка сортировки».

Answer 3

Это старый пост, но, надеюсь, это поможет кому-то еще, что придет сюда.

В более поздней версии DataTables 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

Я хотел бы добавить к ответу JocaPC, напомнив всем, что javascript использует массивы с нулевым индексом.

Пример:

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

Поскольку у вас уже есть данные в сортируемом и отображаемом формате, это все, что вам нужно.

Он будет использовать Date.Sort для сортировки и Date.Display для визуальных элементов. Это задокументировано здесь .

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

Answer 7

Для тех, кто использует источник данных ajax, вы можете использовать Ортогональные данные . Например, в вашем ответе ajax верните один из ваших столбцов как объект с отображаемым значением и значением сортировки (аналогично тому, что сделал OP):

{
   "data":[
      {
         "customer":"JOHN DOE",
         "rating":{
            "display": "★★★",
            "sort":"3"
         },
      },
      {
         "customer":"BILLY NOAH",
         "rating":{
            "display": "★★★★★",
            "sort":"5"
         },
      }
   ]
}

Теперь в опциях вашей таблицы вы можете использовать columns(), например:

"columns" : [
   {
      "data":"customer"
   },
   {
      "data":"rating",
      "render":{
         "_":"display",
         "sort":"sort"
      }
   }
]

Answer 8

Вы должны отсортировать столбец по скрытому столбцу (Sort).Для этого необходимо включить столбец, содержащий данные сортировки, скрыть столбец и отсортировать столбец отображения по скрытому столбцу.

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

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