Как отсортировать таблицу данных JavaScript, используя альтернативное значение? - PullRequest
Новая
       33

Как отсортировать таблицу данных JavaScript, используя альтернативное значение?

0 голосов
/ 01 июня 2019

У меня есть столбец в моей DataTable, значение которого (int) изменилось (str) в зависимости от его значения.Его начальное значение равно 0 - 1, и в зависимости от его значения оно изменяется на отрицательное, положительное или нейтральное, чтобы придать контекст значению.

До этого моя таблица выглядела бы так 

Ratio     Item
---------------
0.2       Apple
0.5       Banana
0.8       Pear
0.4       Orange

Но после некоторого преобразования на стороне HTML с использованием Jinja / Flask моя таблица выглядит следующим образом: 

Ratio       Item
-----------------
Negative    Apple
Neutral     Banana
Positive    Pear
Negative    Orange

Но я все же хотел бы отсортировать исходное значение с плавающей точкой, которое все ещедоступно в HTML

Мой HTML-код: 

<td>
  {%if submission['ratio'] >= 0.75 %}
    <span>Positive</span>
  {% elif submission['ratio'] >= 0.5 %}
    <span>Neutral</span>
  {% else %}
    <span>Negative</span>
  {% endif %}
</td>

Есть ли что-то, что я могу вставить в диапазон, например, пользовательский тег для сортировки, документация по этому вопросу не слишком ясна.

т.е. 

<span data-sort="{{ submission['ratio'] }}">Positive</span>

1 Ответ

1 голос
/ 03 июня 2019

Вы не должны переводить свою сторону значений с плавающей запятой на сервер, вы можете сделать так, чтобы они выглядели как «Отрицательно-Нейтрально-Позитивные» для конечного пользователя, сохраняя исходные данные доступными для обработки (заказа).

Для того, чтобычтобы ваши поплавки выглядели как «Отрицательно-Нейтрально-Позитивно», вам может понадобиться опция createdCell.Чтобы этот столбец можно было сортировать по исходным значениям с плавающей запятой, вы можете присвоить пользовательские данные type тем, которые вы будете использовать позже: 

$('table').DataTable({
    ...
    columnDefs: [{
            targets: 0,
            type: 'negneutpos',
            createdCell: (td, data) => td.outerHTML = `<td data-sort="${data}">${data < 0.5 ? 'Negative' : data > 0.75 ? 'Positive' : 'Neutral'}</td>`
        }
    ]
});

Затем вы можете реализовать пользовательскиеметод сортировки для вашего конкретного типа 'negneutpos': 

Object.assign($.fn.DataTable.ext.oSort, {
  'negneutpos-desc' : (a, b) => b - a,
  'negneutpos-asc' : (a, b) => a - b,
});

Полная демонстрация, которую вы можете найти ниже: 

$('table').DataTable({
  dom: 't',
  columnDefs: [{
    targets: 0, 
    createdCell: (td, data) => td.outerHTML = `<td data-sort="${data}">${data < 0.5 ? 'Negative' : data > 0.75 ? 'Positive' : 'Neutral'}</td>`,
    type: 'negneutpos'  
  }]
});

Object.assign($.fn.DataTable.ext.oSort, {
  'negneutpos-desc' : (a, b) => b - a,
  'negneutpos-asc' : (a, b) => a - b,
});
<!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>
	<thead>
		<tr>
			<th>Ratio</th>
			<th>Item</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>0.2</td><td>Apple</td>
		</tr>
		<tr>
			<td>0.5</td><td>Banana</td>
		</tr>
		<tr>
			<td>0.8</td><td>Pear</td>
		</tr>
		<tr>
			<td>0.4</td><td>Orange</td>
		</tr>
	</tbody>
</table>
</body>
</html>

ps обратите внимание, что вам даже не нужен дополнительный атрибут (data-sort) в этомслучай

...