DataTables行在serverSide处理完成后重新排序

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

在此，我打电话rowRedordering内fnInitComplete回调。但是这给出了与之前相同的结果。就像在拖放中一样，但它不会发送服务器通知（并且该行不会保留在放置的位置，它可以返回到之前的位置）。

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

Answer 1

在搜索整个互联网寻找解决方案后，我终于自己做了。 因此，对于数据表1.10.12我的工作方案，rowReorder的新版本，服务器端真正和重新排序，而不表重装

文档：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项目中实现并且完美地工作。