jQuery DataTables rowReorder issue

Question

I am using DataTables along with the rowReorder plugin against a static table (non AJAX) - everything initialises fine but when I drag a row, whilst it moves within the tabl

Answer 1

Try adding an ID or sequence to the table. In the basic initialization example, it says:

The first column in the table is a sequence number that provides the basis for the ordering.

In that example it has a hidden sequence column:

columnDefs: [
    { targets: 0, visible: false }
]

Answer 2

In datatable initialization code, remove order attribute. If we use order then drag and drop will not work.

Example with order - not working

table = $('#ConfigMenuTable').DataTable({
  data: testData,
  "rowReorder":  {
                selector: 'td:nth-child(1)'
            },            
  "order":[[ 1, "asc" ]],
  "columns": [
                {"visible": false},                         
                {"width": "20%", "className": 'reorder'},                       
                {"visible": false,"searchable": true, "width": "15%"},     
                {"orderable": false, "searchable": false},  
                {"orderable": false, "searchable": false},
                {"orderable": true, "searchable": false}                
            ]

});

Example without order - working

table = $('#ConfigMenuTable').DataTable({
  data: testData,
  "rowReorder":  {
                selector: 'td:nth-child(1)'
            }, 
  "columns": [
                {"visible": false},     
                {"width": "20%", "className": 'reorder'},   
                {"visible": false,"searchable": true, "width": "15%"},  
                {"orderable": false, "searchable": false},
                {"orderable": false, "searchable": false},
                {"orderable": true, "searchable": false}                
            ]    
});

Answer 3

this is code to destroy and reset datatable

if ($.fn.DataTable.isDataTable("#categoryListDataTable"))
{
    $("#categoryListDataTable").dataTable().fnDestroy();
}

var table = $('#categoryListDataTable').DataTable( {
    rowReorder: true,
} );


table.on( 'row-reorder', function ( e, diff, edit ) {
    var res = '';
    for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
        res += diff[i].newData+'=';
    }
    res = res.substring(0, res.length - 1);
    getVal(res);
} );

made this another function due to getting values and run ajax to save at server side

function getVal(res)
{
    var atmp = res.split('=');
    var newId = '';
    var newArr = [];
    for(var i=0,j=atmp.length;i<j;i++)
    {
        newId = $('#categoryListDataTable').find("tr:eq("+atmp[i]+") input[type='hidden']").val();
        if(newId != '')
            newArr[atmp[i]] = newId;
    }

    var urlStr = '<?php echo base_url('admin/managecategories/reorderCategories');?>';
    $.ajax({
        data:{new_:newArr},
        url:urlStr,
        cache:false,
        method:'POST',
        success:function(data){
            console.log(data);
        },
        error:function(error){
            console.log(error);
        }
    });
}

Answer 4

This is getting a bit aged, but I had to work through it and thought I'd share what I did. My requirements had this a table with sortable rows, but ordering by header click was not a requirement and made the UI a bit confusing.

The HTML is a fairly standard table.

HTML

<table class="table table-responsive-md table-striped" id="maskEditTable">
<thead>
    <tr>
        <th>Position</th>
        <th>Valid Characters</th>
        <th>Is&nbsp;Literal&nbsp;Character</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>0</td>
        <td><input type="text" class="form-control" value="123" /></td>
        <td>
            <label aria-label="Is Character Literal" for="needsAUniqueId"></label>
            <input type="checkbox" id="needsAUniqueId" />
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text" class="form-control" value="456" /></td>
        <td>
            <label aria-label="Is Character Literal" for="needsAUniqueId"></label>
            <input type="checkbox" id="needsAUniqueId" />
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td><input type="text" class="form-control" value="789" /></td>
        <td>
            <label aria-label="Is Character Literal" for="needsAUniqueId"></label>
            <input type="checkbox" id="needsAUniqueId" />
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td><input type="text" class="form-control" value="abc" /></td>
        <td>
            <label aria-label="Is Character Literal" for="needsAUniqueId"></label>
            <input type="checkbox" id="needsAUniqueId" />
        </td>
    </tr>
    <tr>
        <td>4</td>
        <td><input type="text" class="form-control" value="def" /></td>
        <td>
            <label aria-label="Is Character Literal" for="needsAUniqueId"></label>
            <input type="checkbox" id="needsAUniqueId" />
        </td>
    </tr>
</tbody>

The javascript is also fairly straight forward. The major difference is the addition of a draw event handler. This iterates the header fields and strips the class tag, and also removes the click handler. This code was called from a page onload hander.

JAVASCRIPT

function removeSorting() {
    $.each($('#maskEditTable').find('thead > tr > th'), function (i, header) {
        $(header).attr('class', null);
        $(header).off('click');
    });
}
function() init(){
    var tab = $('#maskEditTable')
        .DataTable({
        paging: false,
        info: false,
        searching: false,
        rowReorder: {
            selector: 'tr',
            update: true
        },
        order: [[0, "asc"]],
        columnDefs: [
            {
                targets: 0,
                visible: true
            }
        ]
        });
    tab.on('draw.dt', removeSorting);
    removeSorting();
}

The results are exactly what I was expecting and there is no visible effects on the redraw in any of my tests.

GL!