How to Reorder row Data Table with Drag And Drop
Hello everyone i want to share how to reorder row data table through drag and drop and update data to server.
First you need embed this js & css
// js
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js
// css
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.dataTables.min.css
Next add paramrowReorder
to DataTable
dataSrc is mean field you wanna to order
selector is mean area when you drag and drop
var dataTable = $('#data-table').DataTable( { rowReorder: {
dataSrc: 'question_order',
selector: 'tr'
}});
Next you need add DT_RowId to your response data table, the goal is get row ID when you move it.
{
"data": [
{
"country": "Indonesia",
"DT_RowId": "row_7",
},
{
"country": "Singapore",
"DT_RowId": "row_8",
},
]
}
Next Add event can listen when user drag and drop
row-reorder event can be listened for and an action taken when it is triggered.
dataTable.on( 'row-reorder', function ( e, diff, edit ) {
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
// get id row
let idQ = diff[i].node.id;
let idNewQ = idQ.replace("row_", ""); // get position
let position = diff[i].newPosition+1; //call funnction to update data
updateOrder(idNewQ, position);
}
} );
and create function to update it
var url = "https://domain.com"
function updateOrder(idQuestion, order){
$.get(url + '/updateOrder/', { question_id: idQuestion, order: order } )
.done(function( data ) {
console.log(data);
});
}
Final Step create route to update data in server side this example using PHP Phalcon Framework
public function updateOrderAction(){
$idQuestion = $this->request->getQuery('question_id');
$order = $this->request->getQuery('order'); $question = Questions::findFirst($idQuestion);
$question->question_order = $order;
$question->updated_at = $this->now();
$data = $question->update(); $response = new Response();
$response->setJsonContent([
'code' => ($data == true) ? '200' : '500',
'status' => ($data == true) ? 'Success Update Data' : 'Failed Update Data'
]); return $response->send();}
Finally it’s over, i hope this tutorial can help anyone :)
If there are questions do not hesitate, comment below bye.