DataTable colreorder
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/cr-1.5.0/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/cr-1.5.0/datatables.min.js"></script>
<table id="example" class="display" width="100%"></table>
JavaScript
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011", "$320,800", "Edinburgh", "42", "/data/eng/bec/fit/bags", "Sales", "500", "52", "asdsadasdsa@goo.com"]
];
var abc = function(ELE, scrollWhat) {
var $gal = $(ELE),
galW = $gal.outerWidth(true),
galSW = $gal[0].scrollWidth,
wDiff = (galSW / galW) - 1, // widths difference ratio
mPadd = 60, // Mousemove Padding
damp = 20, // Mousemove response softness
mX = 0, // Real mouse position
mX2 = 0, // Modified mouse position
posX = 0,
mmAA = galW - (mPadd * 2), // The mousemove available area
mmAAr = galW / mmAA; // get available mousemove fidderence ratio
$gal.click(function(e) {
mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
});
setInterval(function() {
posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
scrollWhat.scrollLeft(posX * wDiff);
}, 10);
};
$(document).ready(function() {
$('#example').DataTable({
data: dataSet,
colReorder: true,
'scrollY': '50vh',
'scrollX': true,
'scrollCollapse': true,
dom: 'Bfrtip',
buttons: [
'colvis',
{
text: 'Restore columns',
name: 'restoreColsButton',
action: (e, dt, node, config) => {
dt.columns().visible(true);
dt.colReorder.reset();
}
}
],
columns: [{
title: "Name"
}, {
title: "Position"
}, {
title: "Offc"
}, {
title: "Ext"
}]
});
//
var _wrapper = $('#example').closest('.dataTables_wrapper');
var _scrollHead = _wrapper.find('.dataTables_scrollHead');
var _scrollBody = _wrapper.find('.dataTables_scrollBody');
abc(_scrollHead, _scrollBody);
console.log(_scrollBody);
//
});