jQuery DataTables rowReorder问题 [英] jQuery DataTables rowReorder issue
问题描述
我在静态表（非AJAX）上使用DataTables和rowReorder插件-一切初始化都很好，但是当我拖动一行时，当它在表中移动时，当我放下一行时，它会返回到其原始位置而无需刷新（即它实际上从未移动过位置-知道我将需要通过AJAX进行更新以使移动永久生效，但是我需要先执行该操作！）
I am using DataTables along with the rowReorder plugin against a static table (non AJAX) - everything initialises fine but when I drag a row, whilst it moves within the table, when I drop it goes back to its original location without refreshing (i.e. it never actually moves location - am aware I will need to update via AJAX to get the move permanent but I need this to work first!)
我添加了此代码尝试告诉我发生了什么事：
I added this code to try and tell me what was happening:
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);
});
当我使用它时，在事件结果中，我得到类似的东西：
and when I use this, in event-result, I get something like:
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个相邻列的位置。
The plugin can see that I am trying to move row 3 but it doesn't seem to be able to determine where I am trying to drop it hence the new and old position are blank whereas on https://datatables.net/extensions/rowreorder/examples/initialisation/events.html you can see that it should "know" the location to drop and where to re order the 2 adjoining columns to.
在所有示例中，我都看到没有在行中添加id，因此我认为这是由插件冲突引起的-任何人以前都看过这个并且知道如何解决？
In all the examples I have seen there are no id's added to the rows etc so I assuming this is being caused by a plugin clashing - anyone seen this before and know how to fix?
这是我的整个数据表代码：
Here is my whole Datatables code:
$.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);
});
推荐答案
在数据表初始化代码中，删除订单属性。如果我们使用订单，那么拖放将不起作用。
In datatable initialization code, remove order attribute. If we use order then drag and drop will not work.
订单示例-不起作用
table = $('#ConfigMenuTable').DataTable({
data: testData,
"rowReorder": {
selector: 'td:nth-child(1)'
},
"order":[[ 1, "asc" ]],
"columns": [
{"visible": false},
{"width": "20%", "className": 'reorder'},
{"visible": false,"searchable": true, "width": "15%"},
{"orderable": false, "searchable": false},
{"orderable": false, "searchable": false},
{"orderable": true, "searchable": false}
]
});
没有订单的示例-工作
table = $('#ConfigMenuTable').DataTable({
data: testData,
"rowReorder": {
selector: 'td:nth-child(1)'
},
"columns": [
{"visible": false},
{"width": "20%", "className": 'reorder'},
{"visible": false,"searchable": true, "width": "15%"},
{"orderable": false, "searchable": false},
{"orderable": false, "searchable": false},
{"orderable": true, "searchable": false}
]
});
这篇关于jQuery DataTables rowReorder问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
