jQuery DataTables: Row reordering

Comments

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);
         },
       table.rowReordering();
       });
   }
   

   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?

   Reply

   1. Yes, one columns should contain row indexes in sequential order: 1, 2, 3, etc. Row reordering plug-in relies on that data to correctly re-order rows.

      Reply

      1. Hi Michael, I have also followed your post. And, I encountered the same result while I drag a row item, the item returns back to the original place. I have set one of the columns as the row index in sequential order, but still the item returned back to the original location.

         This is my script

         $(document).ready(function () {
                 var oTable = $("#tblFile").DataTable({
                     "iDisplayLength": 10,
                     "bServerSide": true,
                     "sAjaxSource": "@Url.Content("PlayListFilesAjaxHandler")",
                     "bProcessing": false,
                     "bStateSave": true,
                     "ordering": true,
                     //"rowReorder": true,
                     "createdRow": function(row, data, dataIndex){
                         $(row).attr('id', 'row-' + dataIndex);
                     },
                     "aoColumns": [
                         {
                             "sName": "id",
                             "bSearchable": false,
                             "bSortable": false,
                             "sWidth": '10%'
                         },
                         {
                             "sName": "FileName",
                             "bSearchable": false,
                             "bSortable": false,
                             "sWidth": '25%'
                         },
                         {
                             "sName": "FilePath",
                             "bSearchable": false,
                             "bSortable": false,
                             "sWidth": '50%'
                         },
                         {
                             "sName": "Action",
                             "bSearchable": false,
                             "bSortable": false,
                             "sWidth": '15%',
                             "render": function (data, type, full, meta) {
                                 return '<a href="FileDelete/' + full[3] + '" rel="nofollow">Delete</a>';
                             }
                         }
                     ]
                 });
         
                 oTable.rowReordering();
             });
         

         Reply

         1. I even used the exact version of .js and .css libraries mentioned in your post.

            What could have been missing in my DataTable initialization?

            Reply

            1. Did anyone managed to find a solution for this ? I have the same problem, with an indexed column still doesn’t work 🙁

               Reply

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

           debugger;
           var flag = 0;
           var pdf;
   
           $(document).ready(
               function GetData() {
                   $.ajax({
                       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);
                           //alert(pdf);
                           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 });
                           console.log(checkedRows);
                       });
   
                       $('#myTableData').on('uncheck.bs.table', function (e, row) {
                           $.each(checkedRows, function (index, value) {
                               if (value.id === row.id) {
                                   checkedRows.splice(index, 1);
                               }
   
                           });
                           console.log(checkedRows);
                       });
   
   
                       $("#add_cart").click(function () {
                           $("#output").empty();
                           $.each(checkedRows, function (index, value) {
                               $('#output').append($('').text(value.id + " | " + value.name + " | " + value.forks));
                           });
                       });
                       $('#myTableData').append(trHTML);
                   }
                   })
                   
               })
   

   Reply

3. change “ordering”: false, to “ordering”: true

   Reply

4. Hi,

   Do u have any angular version?

   Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.