jQuery DataTables: Row reordering

September 10, 2015
With jQuery DataTables 1.10.8 release there is now official RowReorder extension, see this example for demonstration. It is recommended to use RowReorder extension instead of the add-on mentioned in this article.


Reading comments on the project page I found modified source code of the plug-in by legrand….@gmail.com that fixes compatibility issues with DataTables 1.10.

Using that source code as a start I forked the add-on on github and added support for DataTables 1.10.


# Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
   var table = $('#example').DataTable({
      'ajax': {
         'url': '/lab/articles/jquery-datatables-row-reordering/ids-arrays.txt' 
      'createdRow': function(row, data, dataIndex){
         $(row).attr('id', 'row-' + dataIndex);

In addition to the above code, the following Javascript library files are loaded for use in this example:


The following CSS library files are loaded for use in this example to provide the styling of the table:


Edit on jsFiddle


Table structure

  • Table must be properly formatted according to the DataTables requirements e.g. it must have THEAD, TBODY and optionally TFOOT sections
  • Each TR element must have id attribute.
  • One column in the table should be indexing column.


  • Rows can be ordered only by indexing column. This plugin will force ascending sorting by indexing column.
  • Sorting by columns will be disabled. If you shuffle rows in some order other than indexing column order there will be no way to determine to what position row is dropped.


Allan Jardine, creator of DataTables, is working on a new RowReorder plug-in for upcoming release of DataTables 1.10.8. Once DataTables 1.10.8 and RowReorder plug-in are out, I will write an article about it and will recommend using it instead of the plug-in mentioned in this article.

Related posts


  1. Thanks for this plugin port.
    I followed your fiddle and this tutorial but while I can drag rows of the table, the items return back to their original place as soon as mouse is released.

    Here’s my table initialization:

    var table;
    function draw_ordered_items_table(data) {
        table = $('#ordered_items_table').DataTable({
            "data": data,
            "paging": false,
            "lengthChange": false,
            "searching": false,
            "ordering": false,
            "info": false,
            "createdRow": function(row, data, dataIndex){
             $(row).attr('id', 'row-' + dataIndex);

    Any reason why this could be ?

    I am using the same CDN as you have used in the jsFiddle for DataTables and jQuery UI. I just didn’t understand what you mean when you say that “One column in the table should be indexing column.”

    I see your table has a numbering column as the first column where as mine doesn’t have. So does that matter?

  2. HTML dynamic table using JavaScript. How can I find the each row data , when we click on check box?

            var flag = 0;
            var pdf;
                function GetData() {
                        type: "POST",
                        data: "{}",
                        url: "http://localhost:54402/OrderServices.asmx/getProducts1",
                        contentType: "application/json",
                        dataType: "json",
                        async: false,
                      //  success: functionToCallWhenSucceed
                        success: function (data) {
                            pdf = (data.d);
                            var productt = pdf;
                        var trHTML = '';
                        $.each(productt, function (index, item) {
                            trHTML += '' + item.ItemName + '' + item.Brand + '' + item.Size + '' + item.Colour + '' + item.ResalerPrice + '';
                        $('.checkbox1').on('change', function () {
                            var bool = $('.checkbox1:checked').length === $('.checkbox1').length;
                            $('#checkAll').prop('checked', bool);
                        $('#checkAll').on('change', function () {
                            $('.checkbox1').prop('checked', this.checked);
                        var checkedRows = [];
                        $('#myTableData').on('check.bs.table', function (index, row) {
                            checkedRows.push({ id: row.id, name: row.name, forks: row.forks });
                        $('#myTableData').on('uncheck.bs.table', function (e, row) {
                            $.each(checkedRows, function (index, value) {
                                if (value.id === row.id) {
                                    checkedRows.splice(index, 1);
                        $("#add_cart").click(function () {
                            $.each(checkedRows, function (index, value) {
                                $('#output').append($('').text(value.id + " | " + value.name + " | " + value.forks));

Leave a Reply

Your email address will not be published.