title: how to implement Jquery datatable along with sortable()
body: <p>I am trying to implement data-table to create some schedule and the rows in the table are draggable. I used sortable to implement this functionality
  this is my html Code.</p>
  <pre><code>&lt;link href=&quot;~/NewFolder1/jquery.dataTables.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
   &lt;link href=&quot;~/NewFolder1/dataTables.tableTools.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;link href=&quot;~/mycss/Sortable.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;link href=&quot;~/Content/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; /&gt;
  
  &lt;script src=&quot;~/NewFolder1/jquery-1.10.2.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;~/NewFolder1/jquery-ui.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;~/JScripts/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
     &lt;script src=&quot;~/NewFolder1/dataTables.tableTools.js&quot;&gt;&lt;/script&gt;  
  &lt;script src=&quot;~/JScripts/Sortable.js&quot;&gt;&lt;/script&gt;
  &lt;div id=&quot;Dataelements&quot;&gt;
      &lt;div id=&quot;Left-Content&quot; style=&quot;width:50%;float:left;&quot;&gt;
          
          &lt;/div&gt;
  
      &lt;div id=&quot;Right-Content&quot; style=&quot;width:49.5%;float:left;&quot; &gt;
          &lt;table id=&quot;example&quot; class=&quot;display&quot;&gt;
              &lt;caption&gt;Create Your Template&lt;/caption&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;td&gt;ID&lt;/td&gt;
                      &lt;td&gt;Name&lt;/td&gt;
                      &lt;td&gt;Duration&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody id=&quot;sortable&quot; &gt;          
                  
              &lt;/tbody&gt;
              &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;hr /&gt;
  &lt;input type=&quot;submit&quot; value=&quot;submit&quot; id=&quot;button1&quot;style=&quot;text-align:center;margin-top:50px;float:left;&quot; /&gt;
  </code></pre>
  <p>Now some of code in my JS file are</p>
  <pre><code> $(&quot;#sortable&quot;).sortable();
      $('table#example').dataTable({
          &quot;aaSorting&quot;: [],
          
      });
      var table = $('table#example').dataTable().api();
  
      $(&quot;#button1&quot;).click(function () {
   
          var rows = $(&quot;#example&quot;).dataTable().fnGetNodes();
          var cells = [];
           for (var i = 0; i &lt; rows.length; i++) {
               cells.push($(rows[i]).find(&quot;td:eq(0)&quot;).html());
          }
          alert(cells);
      });
  </code></pre>
  <p>Now after i click the button i am retrieving the 1st column of my table
  Suppose at the start table=</p>
  <blockquote>
  <p>1      HTML      2</p>
  <p>2      PHP       5</p>
  <p>3      JS        4</p>
  </blockquote>
  <p>And after dragging and changing order</p>
  <blockquote>
  <p>2      PHP       5</p>
  <p>3      JS        4</p>
  <p>1      HTML      2</p>
  </blockquote>
  <p>but when i click on submit button i am getting output as 1,2,3 not as 2,3,1
  Is there any way to save the state of rows after i drag and change the order.
  The code was working fine with normal tables but not with Data Table</p>