Я использую DataTables вместе с плагином rowReorder против статической таблицы (не AJAX) - все инициализируется нормально, но когда я перетаскиваю строку, пока она перемещается внутри таблицы, когда я бросаю ее, она возвращается к ее оригинальное местоположение без обновления (т. е. он никогда не перемещается по местоположению - мне известно, что мне нужно будет обновить через AJAX, чтобы перенести ход, но мне нужно, чтобы он работал первым!)jQuery DataTables rowReorder issue
Я добавил этот код, чтобы попытаться рассказать мне, что было происхожу:
table.on('row-reorder', function (e, diff, edit) {
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
for (var i=0, ien=diff.length ; i<ien ; i++) {
var rowData = table.row(diff[i].node).data();
result += rowData[1]+' updated to be in position '+
diff[i].newData+' (was '+diff[i].oldData+')<br>';
}
$('#event-result').html('Event result:<br>'+result);
});
и когда я использую это, в событийном результате я получаю что-то вроде:
Event result:
Reorder started on row: 3
4 updated to be in position (was)
5 updated to be in position (was)
3 updated to be in position (was)
Плагин может видеть, что я пытаюсь переместить строку 3, но не похоже, чтобы быть в состоянии определить, где я пытаюсь бросить его, следовательно, новые и старые позиции являются пустыми, тогда как на https://datatables.net/extensions/rowreorder/examples/initialisation/events.html вы можете увидеть что он должен «знать» местоположение, которое нужно сбросить, и где нужно заказать 2 соседних столбца.
Во всех примерах, которые я видел, нет добавленных id строк и т. Д., Поэтому я предполагаю, что это связано с конфликтом плагина - кто-нибудь видел это раньше и знает, как исправить?
Вот весь мой DataTables код:
$.extend($.fn.dataTable.defaults, {
autoWidth: false,
dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
language: {
search: '<span></span> _INPUT_',
lengthMenu: '<span></span> _MENU_',
paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' }
}
});
// Column selectors
var table = $('.datatable-button-html5-columns').DataTable({
//dom: 'lBfrtip',
initComplete: function() {
this.api().columns('.select-filter').every(function() {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^'+val+'$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="'+d+'">'+d+'</option>')
});
});
},
colReorder: true,
orderCellsTop: true,
stateSave: true,
pageLength: 10,
order:[[ 1, "asc" ]],
language: {
url: "/assets/js/plugins/tables/datatables/lang/en.php"
},
select: true,
rowReorder: {
selector: 'tr',
update: true
},
buttons: {
dom: {
button: {
className: 'btn btn-default'
}
},
buttons: [
{
extend: 'colvis',
titleAttr: 'Columns'
},
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
{
text: '<span id="resetTable">Reset</span>'
}
]
},
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [
{
className: 'control',
orderable: true,
targets: 0
}
]
});
// Setup event
table.on('row-reorder', function (e, diff, edit) {
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
for (var i=0, ien=diff.length ; i<ien ; i++) {
var rowData = table.row(diff[i].node).data();
result += rowData[1]+' updated to be in position '+
diff[i].newData+' (was '+diff[i].oldData+')<br>';
}
$('#event-result').html('Event result:<br>'+result);
});