datatable

forked from anonymous's block: datatable

<!DOCTYPE html>
<head>
  <meta charset="utf-8">

<table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>ZIP / Post code</th>
                <th>Country</th>
            </tr>
        </thead>
    </table>
  
  <script>
  var data = [];
    for ( var i=0 ; i<500 ; i++ ) {
        data.push( [ i, i, i, i, i ] );
    };
$(document).ready(function() {    
   var table =$('#example').DataTable( {
            data:           data,
            deferRender:    true,
            scrollY:        200,
            scrollCollapse: true,
            scroller:       true,
     				rowReorder: 		true
        } );

table.rows().nodes().to$()
      .attr("id", (i) => 'id' + i);
  
  function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

}
  
	var len = 1;
  var timer;
	d3.select('svg')
		.selectAll('rect')
		.data(data)
		.enter()
		.append('rect')
		.attr('height', 50)
		.attr('width',len)
  	.attr('id', (d,i)=> 'id' + i)
		.attr('x', (d,i) => (len+1)*i)
		.attr('y', 80)
		.on('mouseover', throttle(function () {
    	var i = +d3.select(this).attr('id').slice(2,10);
    	console.log(i);
      d3.select('#compteur').text(i);
    	//clearTimeout(timer);
      table.row(i).scrollTo();
    	$("tr[role='row']").removeClass("selectedRow");
      timer = setTimeout(() => {
        console.log('selection');
       	$(table.row(i).node()).addClass("selectedRow");
       //d3.select('tr#id' + i)
       //           .classed("selectedRow",true);
      		},
          0);
       },
        500));
    //}); 
  d3.select('svg')
  	.append('text')
  	.attr('x',400)
  	.attr('y', 20)
  	.attr('id','compteur')
  	.text('compteur');

table.on('pre-row-reorder', function ( e, diff, edit ) {
        console.log('reorder start');
        console.log(e, diff, edit);
      });

// Imbriqué
table.on('mousedown.rowReorder touchstart.rowReorder', 'tbody tr td:eq(0)', function(){
   var tr = $(this).closest('tr');    
   console.log('Started dragging row', tr);

$(document).on('mousemove.rowReorder touchmove.rowReorder', function(){
      console.log('Dragging row', tr);
   		});
		});

});

// Parallèle
  /*
var tr;  
table.on('mousedown.rowReorder touchstart.rowReorder', 'tbody tr td:eq(0)', function(){
   tr = $(this).closest('tr');    
   console.log('Started dragging row', tr);
});
$(document).on('mousemove.rowReorder touchmove.rowReorder', function(){
      console.log('Dragging row', tr);
   });
});
*/
/* 
https://stackoverflow.com/questions/32451856/event-when-drag-starts-and-ends-in-jquery-datatables-rowreorder

table.on( 'row-reorder', function ( e, diff, edit ) {
        console.log(e, diff, edit);
    });
*/

</script>
</body>

Updated missing url https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js to https://cdn.datatables.net/1.10.16/js/jquery.datatables.min.js

Updated missing url https://cdn.datatables.net/scroller/1.4.3/js/dataTables.scroller.min.js to https://cdn.datatables.net/scroller/1.4.3/js/datatables.scroller.min.js

Updated missing url https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.min.js to https://cdn.datatables.net/rowreorder/1.2.3/js/datatables.rowreorder.min.js

https://d3js.org/d3.v4.min.js

https://code.jquery.com/jquery-1.12.4.js

https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js

https://cdn.datatables.net/scroller/1.4.3/js/dataTables.scroller.min.js

https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.min.js