DataTables rowReordering after serverSide processiong completed

Question

I'm using a DataTables in my web page where it loads content from the server Server-side processing, and I want to add rowReordering jquery-datatables-row-reordering functionality to it. This is how I tried it before.

  $('.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"
        } );

This actually enables drag and drop of the data, but it does not send any server notification after doing that nor the the dropped row stays where it is dropped (It goes back to where it was before).

I tried doing the following as well.

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

In this, I'm calling rowRedordering inside fnInitComplete callback. But this gives the same result as the before one. As in it does the drag and drop, but it does not send a server notification (And also the row does not remain where it is dropped. It goes back to where it was before).

Reordering worked perfectly before I added serverside processed data to initialize the table. So, what am I doing wrong here?

Tswana

Answer 1

After searching the whole internet for a solution I finally did it by myself. So my working solution for DataTable 1.10.12, the new version of rowReorder, serverSide true and reorder without table reloading

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

//in 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

//rows_model

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

Stillwell

and what about CSRF attack? – Bahner

In your case, does the event 'row-reorder' fires for each reordered row? – Soteriology

@Soteriology I no longer work on that project, but as far as I remember, for the specified version: 1.10.12 triggered a row-reorder event on each user's action. – Stillwell

Thanks dude, it is still the case (the multiple fire was caused by my bad scripting) – Soteriology

Answer 2

Try below link

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

Its work for me. I have implemented in mvc project and its working perfectly.

Overexert