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

Ответ 1

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

В более поздней версии DataTables bUseRendered и fnRender устарели.

mRender - это новый способ делать подобные вещи и имеет несколько иной подход.

Вы можете решить свою проблему с чем-то следующим образом:

...
{ mDataProp: "Date.Sort"
  bSortable: true, 
  sName: "Date", 
  // this will return the Display value for everything
  // except for when it 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
  }
}
...

Ответ 2

Я считаю, что существующие ответы устарели из-за обновлений 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.

Ответ 3

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

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

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

Более подробную информацию о свойстве iDataSort на сайте datatables или в разделе http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspx "Настройка сортировки".

Ответ 4

Умм... вместо того, чтобы проходить через всю эту ригмаролу, просто добавьте скрытый span с вашим "Сортировать по" спереди:

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

Примечание. Это означает, что они могут выполнять поиск по скрытому или отображаемому значению... это может быть следствием, с которым вы не можете жить.

Ответ 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]
});

Ответ 6

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

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

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

Ответ 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"
      }
   }
]

Ответ 8

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

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

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

Ответ 9

Используйте атрибут data-sort на тд, например

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