jQuery DataTables rowReorder 问题

Question

我正在使用 DataTables 和 rowReorder 插件来对抗静态表(非 AJAX) - 一切初始化都很好，但是当我拖动一行时，当它在表中移动时，当我放下它时，它会返回到其原始位置而不刷新(即它实际上从未移动位置 - 我知道我需要通过 AJAX 进行更新才能永久移动，但我需要它首先工作!)

我添加了这段代码来尝试告诉我发生了什么:

    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 添加到行等中，因此我假设这是由插件冲突引起的 - 有人以前见过这个并知道如何修复吗？

这是我的整个数据表代码:

    $.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': '&rarr;', 'previous': '&larr;' }
        }
    });                     
   // 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);
    });

Answer 1

在数据表初始化代码中，删除 order 属性。如果我们使用顺序，那么拖放将不起作用。

Example with order - 不工作

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}                
            ]

});

Example without order - 工作

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}                
            ]    
});