Question

我正在使用DataTables以及针对静态表（非AJAX）的rowReorder插件 - 所有内容都初始化正常但是当我拖动一行时，当它在表格内移动时，当我放下它时会回到原来的位置而不刷新（即它实际上从未移动过位置 - 我知道我需要通过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你可以看到它应该＆＃34;知道＆＃34;要删除的位置以及重新排序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

尝试在表格中添加ID或序列。在basic initialization example中，它说：

表中的第一列是一个序列号，它提供了排序的基础。

在that example中，它有一个隐藏的序列列：

columnDefs: [
    { targets: 0, visible: false }
]

Answer 2

在数据表初始化代码中，删除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}                
            ]    
});

Answer 3

这是销毁和重置数据表的代码

if ($.fn.DataTable.isDataTable("#categoryListDataTable"))
{
    $("#categoryListDataTable").dataTable().fnDestroy();
}

var table = $('#categoryListDataTable').DataTable( {
    rowReorder: true,
} );


table.on( 'row-reorder', function ( e, diff, edit ) {
    var res = '';
    for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
        res += diff[i].newData+'=';
    }
    res = res.substring(0, res.length - 1);
    getVal(res);
} );

由于获取值并运行ajax以在服务器端进行保存而使该功能成为另一个功能

function getVal(res)
{
    var atmp = res.split('=');
    var newId = '';
    var newArr = [];
    for(var i=0,j=atmp.length;i<j;i++)
    {
        newId = $('#categoryListDataTable').find("tr:eq("+atmp[i]+") input[type='hidden']").val();
        if(newId != '')
            newArr[atmp[i]] = newId;
    }

    var urlStr = '<?php echo base_url('admin/managecategories/reorderCategories');?>';
    $.ajax({
        data:{new_:newArr},
        url:urlStr,
        cache:false,
        method:'POST',
        success:function(data){
            console.log(data);
        },
        error:function(error){
            console.log(error);
        }
    });
}

Answer 4

这已经有点老了，但是我不得不仔细研究一下，以为我会分享我所做的。我的要求是该表具有可排序的行，但是按标题单击的顺序不是必需的，并且使UI有点混乱。

HTML是一个相当标准的表。

HTML

<table class="table table-responsive-md table-striped" id="maskEditTable">
<thead>
    <tr>
        <th>Position</th>
        <th>Valid Characters</th>
        <th>Is&nbsp;Literal&nbsp;Character</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>0</td>
        <td><input type="text" class="form-control" value="123" /></td>
        <td>
            <label aria-label="Is Character Literal" for="needsAUniqueId"></label>
            <input type="checkbox" id="needsAUniqueId" />
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text" class="form-control" value="456" /></td>
        <td>
            <label aria-label="Is Character Literal" for="needsAUniqueId"></label>
            <input type="checkbox" id="needsAUniqueId" />
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td><input type="text" class="form-control" value="789" /></td>
        <td>
            <label aria-label="Is Character Literal" for="needsAUniqueId"></label>
            <input type="checkbox" id="needsAUniqueId" />
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td><input type="text" class="form-control" value="abc" /></td>
        <td>
            <label aria-label="Is Character Literal" for="needsAUniqueId"></label>
            <input type="checkbox" id="needsAUniqueId" />
        </td>
    </tr>
    <tr>
        <td>4</td>
        <td><input type="text" class="form-control" value="def" /></td>
        <td>
            <label aria-label="Is Character Literal" for="needsAUniqueId"></label>
            <input type="checkbox" id="needsAUniqueId" />
        </td>
    </tr>
</tbody>

JavaScript也相当简单。主要区别在于增加了绘制事件处理程序。这将迭代标题字段并剥离class标签，并删除单击处理程序。这段代码是从页面加载处理程序调用的。

JAVASCRIPT

function removeSorting() {
    $.each($('#maskEditTable').find('thead > tr > th'), function (i, header) {
        $(header).attr('class', null);
        $(header).off('click');
    });
}
function() init(){
    var tab = $('#maskEditTable')
        .DataTable({
        paging: false,
        info: false,
        searching: false,
        rowReorder: {
            selector: 'tr',
            update: true
        },
        order: [[0, "asc"]],
        columnDefs: [
            {
                targets: 0,
                visible: true
            }
        ]
        });
    tab.on('draw.dt', removeSorting);
    removeSorting();
}

结果完全符合我的预期，并且在任何测试中对重绘都没有可见的影响。

GL！

jQuery DataTables rowReorder问题

4 个答案: