Sorting after row reordering in DataTables (jQuery) does not work

Question

I have a table with jQuery DataTables and want to allow manual row reordering. Thus I am using a jQuery plugin that enables row reordering in DataTables.

Problem is that by enabling row reordering, I cannot sort my tables anymore. The programmer of the rowreordering-plugin has made clear that this is how the plugin works, see the discussion here: https://code.google.com/p/jquery-datatables-row-reordering/issues/detail?id=1

Now I want to enable sorting even after manual reordering and likewise reordering after sorting. It's not a problem if the sorting destroys the manual order and kind of "reverses" it.

I guess this is the most relevant part of the plugins source code:

    return this.each(function () {

        var oTable = $(this).dataTable();

        var aaSortingFixed = (oTable.fnSettings().aaSortingFixed == null ? new Array() : oTable.fnSettings().aaSortingFixed);
        aaSortingFixed.push([properties.iIndexColumn, "asc"]);

        oTable.fnSettings().aaSortingFixed = aaSortingFixed;


        for (var i = 0; i < oTable.fnSettings().aoColumns.length; i++) {
            oTable.fnSettings().aoColumns[i].bSortable = false;
            /*for(var j=0; j<aaSortingFixed.length; j++)
            {
            if( i == aaSortingFixed[j][0] )
            oTable.fnSettings().aoColumns[i].bSortable = false;
            }*/
        }
        oTable.fnDraw();

Here is the complete source code.

By setting aoColumns[i].bSortable to ´true´ in the for-loop, sorting is enabled in the table but without any effect if I click on the columns. I'm looking for an idea how to fix this issue. The last entry of the issue discussion says something promising, but it does not seem to work for me.

I am using DataTables 1.9.0 and jQuery 1.7.1 because the plugin does not work with Datatables 1.10 or jQuery 2.

Answer 1

Use dataTables 1.10.x and the new "native" RowReorder plugin. Include the following files to your project :

<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.min.js"></script>
<link href="https://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.min.css" type="text/css" rel="stylesheet">

$('#example').DataTable( {
    rowReorder: true
});

demo here -> http://jsfiddle.net/0f9Ljfjr/