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.

davidkonrad · Accepted Answer · 2015-09-21 15:46:32Z

5

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/

answered Sep 21, 2015 at 15:46

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

undefined Over a year ago

Oh my... I didn't know that! Thank you so much!

davidkonrad Over a year ago

@Gyrocode.com, thanks. I actually still had the tab open from last week - cannot still get the dragstart / mousemove events to work, not even in alerts.

Deepak saini Over a year ago

Data reorder is not working jsfiddle.net/0f9Ljfjr, Can you tell me what is the reason behind this

davidkonrad Over a year ago

@Deepaksaini - ??? It works here; you drag rows by clicking on the seq. column.

Deepak saini Over a year ago

yeah got it, Actually i did this with some other column

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related