JSFiddle - React, Tailwind, and code Playground

by del90

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.14/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.0/js/dataTables.rowReorder.min.js"></script>
Note : kindly try to reorder the row using rank column
<table id="datatableRank" class="table table-striped table-bordered">
   <thead>
      <tr>
        <th>Rank</th>
        <th>User Name</th>
        <th>Subscription Id</th>
        <th>Plan</th>
        <th>Price</th>
      </tr>
    </thead>
<tbody>
    <tr>
       <td class="row-order">1</td>
       <td>del</td>
       <td>111</td>
       <td>prime member</td>
       <td>10000</td>              
     </tr>
     <tr>
       <td class="row-order">2</td>
       <td>ramy</td>
       <td>112</td>
       <td>prime member</td>
       <td>10000</td>              
     </tr>
     <tr>
       <td class="row-order">3</td>
       <td>sam</td>
       <td>113</td>
       <td>prime member</td>
       <td>10000</td>              
     </tr>
     <tr>
       <td class="row-order">4</td>
       <td>ab</td>
       <td>114</td>
       <td>prime member</td>
       <td>10000</td>              
     </tr>
</tbody>    
</table>

JavaScript

var table = $('#datatableRank').DataTable( {
        rowReorder: true,
    });
table.on( 'row-reorder', function ( e, diff, edit ) {
        for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
            $(diff[i].node).addClass("reordered");
        }
} );

$fields_table=$('#datatableRank');
var obj={};
table.on( 'row-reorder', function ( e, diff, edit ) {
  setTimeout(function() {
    // Update the field order values
    $fields_table.find('tbody').find('tr').each(function(i,r){
		$(r).find('td:eq(0)').html(i+1);
    obj[$(r).find('td:eq(2)').html()]=i+1;
	});
 }, 10); // Give it time to load in the DOM
console.log(obj);
var myJSON =JSON.stringify(obj);
 alert(myJSON);
})