Пользовательская сортировка DataTables столбец по дате часть значения - PullRequest
1 голос
/ 10 мая 2019

Я использую jQuery DataTables в своем коде.
Один из моих столбцов имеет значения, например:

AB 05-05-2019
CD 01-05-2019
EF 09-05-2019

Когда я щелкаю заголовок этого столбца, я хочу, чтобы он получилсортируется только по дате, а не по префиксу («AB», «CD», «EF»).Результат должен выглядеть примерно так:

CD 01-05-2019
AB 05-05-2019
EF 09-05-2019 

Я пытался вставить скрытый столбец только с датой, а когда я сортировал столбец с префиксом, я сортировал скрытый столбец с помощью JavaScript.
Но есть ли какой-то правильный способ использования конфигурации по умолчанию для jQuery DataTables?

1 Ответ

1 голос
/ 10 мая 2019

Предполагая, что ваши значения - это даты в формате «DD-MM-YYYY» с префиксом из двух символов и пробела, вы можете создать свой собственный небольшой плагин сортировки с пользовательской функцией сортировки, например:

(first, second) => {
    const firstDate = new Date(first.substr(3).split('-').reverse().join('-'));
    const secondDate = new Date(second.substr(3).split('-').reverse().join('-'));
    return firstDate - secondDate;
};

Итак, ваш полный пример может выглядеть примерно так:

//source data
const srcData = [{
		id: 1,
		value: 'AB 05-05-2019'
	}, {
		id: 2,
		value: 'CD 01-05-2019'
	}, {
		id: 3,
		value: 'EF 09-05-2019'
	}
];

//datatable initialization
const dataTable = $('#mytable').DataTable({
		dom: 't',
		data: srcData,
		columns: ['id', 'value'].map(header => ({
				title: header,
				data: header
			})),
		columnDefs: [{
				type: 'prefixedDate',
				targets: 1
			}
		]
	});
//extract Date part of the string
const extractDate = str => new Date(str.substr(3).split('-').reverse().join('-'));

//custom sorting
Object.assign($.fn.DataTable.ext.oSort, {
  'prefixedDate-asc': (a, b) => extractDate(a) - extractDate(b),
  'prefixedDate-desc': (a, b) => extractDate(b) - extractDate(a),
});
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...