Datatables Horizontal Scroll with colreorder
HTML
<link rel="stylesheet" href="https://nightly.datatables.net/css/jquery.dataTables.min.css">
<script src="https://nightly.datatables.net/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://nightly.datatables.net/buttons/css/buttons.dataTables.min.css">
<script src="https://nightly.datatables.net/buttons/js/dataTables.buttons.min.js"></script>
<script src="https://nightly.datatables.net/buttons/js/buttons.colVis.min.js"></script>
<script src="https://nightly.datatables.net/buttons/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="https://nightly.datatables.net/colreorder/css/colReorder.dataTables.min.css">
<script src="https://nightly.datatables.net/colreorder/js/dataTables.colReorder.min.js"></script>
<link rel="stylesheet" href="https://nightly.datatables.net/scroller/css/scroller.dataTables.min.css">
<script src="https://nightly.datatables.net/scroller/js/dataTables.scroller.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered"
id="example">
JavaScript
$(document).ready(function () {
var aaData = [
/* Reduced data set */
["Trident", "Internet Explorer 4.0", "Win 95+", 4, "X","Y","Y","Y","Y"],
["Trident", "Internet Explorer 5.0", "Win 95+", 5, "C","Y","Y","Y","Y"],
["Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A","Y","Y","Y","Y"],
["Trident", "Internet Explorer 6.0", "Win 98+", 6, "A","Y","Y","Y","Y"],
["Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A","Y","Y","Y","Y"],
["Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A","Y","Y","Y","Y"],
["Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A","Y","Y","Y","Y"],
["Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A","Y","Y","Y","Y"],
["Webkit", "Safari 1.2", "OSX.3", 125.5, "A","Y","Y","Y","Y"],
["Webkit", "Safari 1.3", "OSX.3", 312.8, "A","Y","Y","Y","Y"],
["Webkit", "Safari 2.0", "OSX.4+", 419.3, "A","Y","Y","Y","Y"],
["Webkit", "Safari 3.0", "OSX.4+", 522.1, "A","Y","Y","Y","Y"]
]
var aoColumns = [{
"sTitle": "Engine"
}, {
"sTitle": "Browser"
}, {
"sTitle": "Platform"
}, {
"sTitle": "Version",
"sClass": "center"
}, {
"sTitle": "Grade",
"sClass": "center"
},{
"sTitle": "Version",
"sClass": "center"
},{
"sTitle": "Version",
"sClass": "center"
},{
"sTitle": "Version",
"sClass": "center"
},{
"sTitle": "Version",
"sClass": "center"
},];
var self = this;
self.table = $("#example").DataTable({
"data": aaData,
"aoColumns": aoColumns,
"colReorder": "true",
"sDom": '<"wrapper"fliptB>',
"buttons": [
{
extend: "csvHtml5",
exportOptions: {
columns: ':visible',
orthogonal: 'export'
}
},
{
...