jquery - 服务器端处理完成后数据表行重新排序

Question

我在网页中使用 DataTables，它从服务器加载内容 Server-side processing ，我想添加 rowReordering jquery-datatables-row-reordering它的功能。我之前就是这样尝试的。

  $('.data_table').dataTable( {
                "sPaginationType": "bootstrap",
                "oLanguage": {
                     "sLengthMenu": "Display <select>'+'<option value=\"10\">10</option>'+'<option value=\"20\">20</option>'+'<option value=\"30\">30</option>'+'<option value=\"40\">40</option>'+'<option value=\"50\">50</option>'+'<option value=\"-1\">All</option>'+'</select> records"
                },
                "processing": true,
                "serverSide": true,
                "ajax": dataUrl
            } ).rowReordering({
                sURL:sortUrl, // Let the server page know if order is changed
                sRequestType: "GET",
                fnAlert: function(message) { 
                    modalError("Server Error",message,null); // Error message if an server error occured during the process
                }
            });

$.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );

这实际上允许拖放数据，但在执行此操作后不会发送任何服务器通知，拖放的行也不会保留在拖放位置(它会返回到之前的位置)。

我也尝试执行以下操作。

$table = $('.data_table').dataTable( {
            "sPaginationType": "bootstrap",
            "oLanguage": {
                 "sLengthMenu": "Display <select>'+'<option value=\"10\">10</option>'+'<option value=\"20\">20</option>'+'<option value=\"30\">30</option>'+'<option value=\"40\">40</option>'+'<option value=\"50\">50</option>'+'<option value=\"-1\">All</option>'+'</select> records"
            },
            "processing": true,
            "serverSide": true,
            "ajax": dataUrl,
            "fnInitComplete": function(oSettings, json) {
                $table.rowReordering({
                    sURL:sortUrl, // Let the server page know if order is changed
                    sRequestType: "GET",
                    fnAlert: function(message) { 
                        modalError("Server Error",message,null); // Error message if an server error occurred during the process
                    }
                });
            }
        } );
        $.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );

在此，我在 fnInitComplete 回调中调用 rowRedordering。但这给出了与前一个相同的结果。正如它进行拖放操作一样，但它不会发送服务器通知(而且该行也不会保留在放置位置。它会返回到之前的位置)。

在我添加服务器端处理的数据来初始化表之前，重新排序工作完美。那么，我在这里做错了什么？

Answer 1

在整个互联网上寻找解决方案后，我终于自己完成了。所以我的 DataTable 1.10.12 工作解决方案，新版本的 rowReorder，serverSide true 和无需重新加载表即可重新排序

文档:https://datatables.net/extensions/rowreorder/examples/initialisation/defaults.html

// View 中

<table id="my_table" class="table dTable">
<thead>
    <th>Position</th>
    <th>Name</th>
</thead>
<tbody></tbody>
</table>

<script type="text/javascript">
var my_sortable = $('#my_table').DataTable({
"processing": true,
"serverSide": true,
"rowReorder": {
    "update": false,
},
....
"ajaxSource": "Ajax_where_you_fetch_data_from_database.php"

});

my_sortable.on('row-reorder', function ( e, diff, edit ) {
    var ids = new Array();
    for (var i = 1; i < e.target.rows.length; i++) {
        var b =e.target.rows[i].cells[0].innerHTML.split('data-rowid="');
        var b2 = b[1].split('"></div>')
        ids.push(b2[0]);
    }
    my_sortable.ajax.url("Ajax_where_you_save_new_order.php?sort="+ encodeURIComponent(ids)).load();
});
</script>

//Ajax_where_you_fetch_data_from_database.php

$data = [];
$i = 1;
    foreach ($rows as $key => &$row) {
        $data[$key]['select_this'] = '<span class="drag_me">' . $i++ . '</span><div data-rowid="' . $row['id'] . '"></div>';
        ....
    }
return $data;

//Ajax_where_you_save_new_order.php

if (empty($order = explode(',', $_GET['sort']))) {
    die('malformed order');
}
$new_order = [];
foreach ($order as $position => &$row_id) {
    $new_order[intval($row_id)] = $position;
}

// save new order in database
$rows_model->sortRows($new_order);

return Ajax_where_you_fetch_data_from_database.php content

//行模型

/**
 * @param array $order
 */
public function sortRows(array $order)
{
    foreach ($order as $row_id => $priority) {
        $this->update(['priority' => $priority],
            ['id = ?' => $row_id]
        );
    }
}