AlainRo/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: datatable

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

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.4.3/css/scroller.dataTables.min.css" />
  <link href="https://cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

 .selectedRow td {
  background-color: #4685cf !important;
  color: #fff;
}
  </style>
</head>

<body>
  <svg width="960" height="104"></svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/scroller/1.4.3/js/dataTables.scroller.min.js">  </script>
  <script src="https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.min.js"></script>

  <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 now = +new Date,
        args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
      }
    };

   }

	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>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.4.3/css/scroller.dataTables.min.css" />
	<link href="https://cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

	.selectedRow td {
	background-color: #4685cf !important;
	color: #fff;
	}
	</style>
	</head>

	<body>
	<svg width="960" height="104"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
	<script src="https://cdn.datatables.net/scroller/1.4.3/js/dataTables.scroller.min.js"> </script>
	<script src="https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.min.js"></script>

	<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 now = +new Date,
	args = arguments;
	if (last && now < last + threshhold) {
	// hold on to it
	clearTimeout(deferTimer);
	deferTimer = setTimeout(function () {
	last = now;
	fn.apply(context, args);
	}, threshhold);
	} else {
	last = now;
	fn.apply(context, args);
	}
	};

	}

	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>