Частичное решение: создайте 4 скрытых столбца - по одному для каждого адреса, города, штата и почтового индекса. Используйте внешние элементы управления (например, 4 кнопки) для сортировки по этим столбцам. Это частичное решение, поскольку оно нарушает подход «сортировка только по заголовкам». Теперь у вас есть микс. Не идеально. Но относительно просто.
Я думаю, что объединение этих внешних элементов управления в заголовок столбца, вероятно, было бы более неудобным. (В аналогичной ситуации я полагался только на поле глобального фильтра: «Искать, не сортировать».)
Ниже представлен аналогичный подход, но поведение щелчка указано в заголовке столбца.
Поведение: если щелкнуть заголовок первого столбца, выполняется итерация по четырем состояниям сортировки:
1) Имя как c
2) Имя des c
3) Фамилия c
4) Фамилия des c
Вот мои тестовые данные:
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>Tiger</td>
<td>Nixon</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>Garrett</td>
<td>Winters</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>Ashton</td>
<td>Cox</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>Cedric</td>
<td>Kelly</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>First</th>
<th>Last</th>
</tr>
</tfoot>
</table>
Вы можно видеть, что данные в заголовке Name также были разделены на 2 отдельных столбца в конце (First и Last).
Затем я использую следующее определение DataTables с соответствующим настраиваемым сортировщик. Сортировщик применяется только к заголовку Name. Все остальные заголовки работают по умолчанию:
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable( {
"order": [[ 6, 'asc' ], [ 7, 'asc' ]],
"columnDefs": [
{ "visible": false, "targets": [ 6, 7 ] }
]
} );
// Override the DataTables event:
$( 'thead tr th:nth-child(1)' ).off('click');
$( 'thead tr th:nth-child(1)' ).click(function() {
var order = table.order();
var col = order[0][0]; // zero-indexed
var ord = order[0][1]; // 'asc' or 'desc'
ord = (ord === 'asc' ? 'desc' : 'asc'); // toggle asc/desc
if (col < 6) {
col = 6;
ord = 'asc';
} else {
ord = (ord === 'asc' ? 'desc' : 'asc'); // toggle asc/desc
if (ord === 'asc') { // move sort to next column
col = (col === 7) ? 6 : col +1;
}
}
table.order( [ col, ord ] ).draw();
});
} );
</script>
Щелкните заголовок Name, чтобы увидеть поведение.
Это только частичное решение, потому что нет никаких указаний, говорящих вам каков порядок сортировки для столбца 1, но можно добавить поле отображения.
По крайней мере, это может дать вам дополнительные идеи.