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

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 和 reorder without table reloading

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

//在视图中

<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

//rows_model

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

Answer 2

试试下面的链接

http://www.codeproject.com/Articles/331986/Table-Row-Drag-and-Drop-in-ASP-NET-MVC-jQuery-Data

它对我有用。 我已经在 mvc 项目中实现并且它的工作完美。