CODEWITHSUNDEEP
jquerydatatables
raduken
raduken

Reputation: 2129

Jquery Datatables drag and drop without change row Id

I am using: jquery.dataTables.js from: https://datatables.net

I am using official RowReorder plugin and it is working perfectly right now.

What I want to do is: make the order number not change.

Right now if I move the columns the number change in the order column.

So what I would like to is this number be the same as before understand?

If I move row 3 to the top one the number still be 3 , right now is changing for 1.

So in the end I just want drag a drop without change the order numbers.

Is that possible?

html:

  <table id="example" class="display" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>order</th>
        <th>name</th>
         <th>country</th>
      </tr>
    </thead>
  </table>

jquery:

$(document).ready(function() {
  var dt = $('#example').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    rowReorder: {
       dataSrc: 'order',
    },
    columns: [
      {
         data: 'order'
      },{
         data: 'name'
      },{
         data: 'place'
    }]
  });
});

jsfiddle: http://jsfiddle.net/f7debwj2/15/

Upvotes: 1

Views: 1924

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58900

Not sure if this is the optimal solution but you could save a copy of the original index in a separate property, for example orderOrig, and then display orderOrig in a separate column.

var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
var table = $('#example').DataTable({
   ajax: {
      url: url,
      dataSrc: function(d){
         $.each(d.data, function(index, item){
            item.orderOrig = item.order;
         });
         return d.data;
      }
   },
   rowReorder: {
      dataSrc: 'order',
   },
   columns: [
     {
        data: 'order'
     },{
        data: 'orderOrig'
     },{
        data: 'name'
     },{
        data: 'place'
   }]
});

See updated example for code and demonstration.

You can also hide the column containing the sequence number, see updated example.

Upvotes: 1

Related Questions