File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/w/dt/dt-1.10.18/rr-1.2.4/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/w/dt/dt-1.10.18/rr-1.2.4/datatables.min.js"></script>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Seq.</th>
                <th>Phase</th>
                <th>Start (hour)</th>
                <th>duration (hours)</th>
                <th>End (hour)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Phase X</td>
                <td class="start">15</td>
                <td class="duration">1</td>
                 <td class="end">16</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Phase Y</td>
                <td class="start">16</td>
                <td class="duration">3</td>
                <td class="end">19</td>
            </tr>
          <tr>
                <td>3</td>
                <td>Phase Z</td>
                <td class="start">19</td>
                <td class="duration">1</td>
                <td class="end">20</td>
            </tr>
          <tr>
                <td>4</td>
                <td>Phase W</td>
                <td class="start">20</td>
                <td class="duration">4</td>
                 <td class="end">24</td>
            </tr>
        </tbody>
    </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
var tabellaFasi = "";
​
$(document).ready( function () {
  tabellaFasi = $('#example').DataTable({
    rowReorder: true
  });
  
tabellaFasi.on('row-reorder', function (e, diff, edit) {
    
        var indexInizialeSpostata = edit.triggerRow.data()[0];
        
        for (var i = 0, ien = diff.length; i < ien; i++) {
        
            var rowData = tabellaFasi.row(diff[i].node).data();
            
            var durataOreRow = parseInt(rowData[3]);
​
            if ( rowData[0] == indexInizialeSpostata ) {
              
                console.log($(tabellaFasi.row(diff[i].oldData-1).node()).find(".start").text());
            
                $(tabellaFasi.row(diff[i].oldData-1).node()).find(".start").text($(tabellaFasi.row(diff[i].newData-1).node()).find(".start").text());
            
                var end = parseInt($(tabellaFasi.row(diff[i].oldData-1).node()).find(".start").text()) + durataOreRow;
                
                $(tabellaFasi.row(diff[i].oldData-1).node()).find(".end").text(end);
            
            } else {
            
                $(tabellaFasi.row(diff[i].node).node()).find(".start").text($(tabellaFasi.row(diff[i-1].node).node()).find(".end").text());
                
                var end = parseInt($(tabellaFasi.row(diff[i-1].node).node()).find(".end").text()) + durataOreRow;
                
                $(tabellaFasi.row(diff[i].node).node()).find(".end").text(end);
            
            }
            
            
            
        }
​
        
    });
  
    tabellaFasi.on('row-reordered', function (e, diff, edit) {
        tabellaFasi.rows().invalidate('dom').draw(false);
        tabellaFasi.destroy();
      
        setTimeout(function(){
      
        tabellaFasi = $('#example').DataTable({
           rowReorder: true
         });
          
          }, 100);
    });
  
​
  
} );
​
1 warning
Line 32: 'end' is already defined.
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers