javascript - DataTables plug-in - Display scrollbar below tfoot tag? -
i use jquery datatables plug-in , "scrollx":true horizontal scrolling.
why scroll bar appears above tfoot tag? how make appear below footer?
var table = $('#example') .datatable( { "scrollx": true, "scrollcollapse": true, "dom": 'zlrtip', "colresize": { "tablewidthfixed": false, //"handlewidth": 10, "resizecallback": function(column) { } }, "searching": false, "paging": false, "info": false, "deferrender": true, "sscrollx": "190%" }); see jsfiddle example demonstrating problem.
you need add following code datatables initialization options:
"fninitcomplete": function(){ // disable tbody scoll bars $('.datatables_scrollbody').css({ 'overflow': 'hidden', 'border': '0' }); // enable tfoot scoll bars $('.datatables_scrollfoot').css('overflow', 'auto'); // sync tfoot scrolling tbody $('.datatables_scrollfoot').on('scroll', function () { $('.datatables_scrollbody').scrollleft($(this).scrollleft()); }); }, see updated jsfiddle demonstration.
Comments
Post a Comment