В реальном времени: false не работает в jQuery DataTables colReorder
Я использую jQuery DataTables с расширением colReorder, но установка Realtime: false, похоже, не работает. Я ожидаю, что изменение порядка столбцов вступит в силу только после того, как я удалю столбец, но оно обновляется в реальном времени, когда я перетаскиваю столбец.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>DataTables Example</title>
<script src = "https://code.jquery.com/jquery-3.7.1.min.js" integrity = "sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo = " crossorigin = "anonymous"></script>
<link href = "https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" rel = "stylesheet">
<link href = "https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.css" rel = "stylesheet">
<link href = "https://cdn.datatables.net/colreorder/2.0.3/css/colReorder.dataTables.css" rel = "stylesheet">
<script src = "https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<script src = "https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
<script src = "https://cdn.datatables.net/colreorder/2.0.3/js/dataTables.colReorder.js"></script>
</head>
<body>
<table id = "myTable" class = "display nowrap" style = "width:100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php for($i=0; $i<=50; $i++) { ?>
<tr>
<td>Jon</td>
<td>18</td>
<td>1234567890</td>
<td>USA</td>
</tr>
<?php } ?>
</tbody>
</table>
<script>
$(document).ready(function() {
let table = new DataTable('#myTable', {
responsive: true,
colReorder: {
realtime: false
}
});
});
</script>
</body>
</html>
Проблемы:
Установка реального времени: false в параметрах colReorder не работает. Порядок столбцов меняется в реальном времени, когда я их перетаскиваю.
Ожидаемое поведение:
Изменение порядка столбцов должно вступить в силу только после удаления столбца.
Вопросы:
Существует ли известная проблема с параметром реального времени в текущих версиях DataTables и colReorder?
Существуют ли какие-либо обходные пути или дополнительные настройки, необходимые для достижения желаемого поведения?
Дополнительная информация:
Версия DataTables: 2.0.8
версия colReorder: 2.0.3
Версия адаптивного расширения: 3.0.2.
Версия jQuery: 3.7.1
Любая помощь или предложения будут очень признательны.
Ответы 1
Согласно документации ColReorder 2.0.0
Удаленный
Опция
colReorder.realtimeбольше не актуальна и удалена.
Также на основе всех доступных опций coReordercolReorder options
Вы можете напрямую использовать colReorder: false, или colReorder: {enable: false} для достижения своей цели.
Рабочий фрагмент:
$(document).ready(function() {
let table = new DataTable('#myTable', {
responsive: true,
colReorder: {
enable: false
}
});
});<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>DataTables Example</title>
<script src = "https://code.jquery.com/jquery-3.7.1.min.js" integrity = "sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo = " crossorigin = "anonymous"></script>
<link href = "https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" rel = "stylesheet">
<link href = "https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.css" rel = "stylesheet">
<link href = "https://cdn.datatables.net/colreorder/2.0.3/css/colReorder.dataTables.css" rel = "stylesheet">
<script src = "https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<script src = "https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
<script src = "https://cdn.datatables.net/colreorder/2.0.3/js/dataTables.colReorder.js"></script>
</head>
<body>
<table id = "myTable" class = "display nowrap" style = "width:100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jon-1</td>
<td>18-1</td>
<td>1234567890-1</td>
<td>USA-1</td>
</tr>
<tr>
<td>Jon-2</td>
<td>18-2</td>
<td>1234567890-2</td>
<td>USA-2</td>
</tr>
<tr>
<td>Jon-3</td>
<td>18-3</td>
<td>1234567890-3</td>
<td>USA-3</td>
</tr>
<tr>
<td>Jon-4</td>
<td>18-4</td>
<td>1234567890-4</td>
<td>USA-4</td>
</tr>
<tr>
<td>Jon-5</td>
<td>18-5</td>
<td>1234567890-5</td>
<td>USA-5</td>
</tr>
<tr>
<td>Jon-6</td>
<td>18-6</td>
<td>1234567890-6</td>
<td>USA-6</td>
</tr>
<tr>
<td>Jon-7</td>
<td>18-7</td>
<td>1234567890-7</td>
<td>USA-7</td>
</tr>
<tr>
<td>Jon-8</td>
<td>18-8</td>
<td>1234567890-8</td>
<td>USA-8</td>
</tr>
<tr>
<td>Jon-9</td>
<td>18-9</td>
<td>1234567890-9</td>
<td>USA-9</td>
</tr>
<tr>
<td>Jon-10</td>
<td>18-10</td>
<td>1234567890-10</td>
<td>USA-10</td>
</tr>
</tbody>
</table>
</body>
</html>Если записей большое количество (например, 5000), то ColReorder работает нестабильно.
@Akhilkhodelwal Я еще не сталкивался с этой проблемой. (почти от 4 до 12 тысяч записей) по 25 записей на странице. Это может произойти с вашей стороны из-за логики создания данных на стороне сервера или какой-либо другой проблемы.
Попробуйте это с большим количеством столбцов. Если имеется большое количество записей (например, 5000) и столбцов (например, 20), то ColReorder работает некорректно.
Это была опция DataTable 1.x, она была удалена в DataTables 2.x — см. git: github.com/DataTables/ColReorder/tree/…