A Perfect Storm! Very Large Table functionality within bootstrap, jquery, Tabletools and more!

crunchfactory

Hiyas!
I have some massive, unwieldy tables I'm dealing with, and with the different tech, it's tricky getting the table really solid. Here's my js so far:

[code]

/*
* TableTools Bootstrap compatibility
* Required TableTools 2.1+
*/
if ( $.fn.DataTable.TableTools ) {
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend( true, $.fn.DataTable.TableTools.classes, {
"container": "DTTT btn-group",
"buttons": {
"normal": "btn btn-default",
"disabled": "disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
},
"print": {
"info": "DTTT_print_info modal"
},
"select": {
"row": "active"
}
} );

// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
} );
}

$(document).ready(function() {
//$('#conductupdate').dataTable();
var oTable = $('#conductupdate').dataTable( {
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"sScrollX": "60%",
"sScrollXInner": "200%",
"bScrollCollapse": true,
"bDestroy" : true,
"iDisplayLength" : 10,
'Processing' : true,
'bJQueryUI' : false
} );
oTable.fnSort( [1,'asc'] );
} );

[/code]

My table has 24 columns, anywhere from 2 to 500 rows in the tbody and two rows of thead (I'm using td instead of th, things line up a little better and I can keep the table from blowing out the right side of the bootstrap [code] [/code]. I'm using tabletools to paginate, etc... and list 10 at a time and doing horizontal scrolling on the table itself, which I'm not a huge fan of... I'd post this all in a heartbeat in jFiddle, but I just can't.

Here's a small list of the minor miracles I need to perform:

first column in the td rows are checkboxes, and I don't want that column sortable (or arrows to show) but I can't seem to run "bSortable" on that thead > td.. ugh!

Is there something I can do to really shrink things when I go to smaller screen sizes? I'm chewing the padding and text size a little smaller, but it's just really unwieldy... Something amazing to happen once I get to:

[code]
/* Small devices (tablets, 768px and up) */
@media(max-width:767px){
[/code]

Could I keep the entire table in a div like this (only 10 or so rows viewable at once), but have a fixed header, have everything scroll around in the event the powers that be decide they like a fixed header, etc...

Thanks folks, thank you very much!

cf

egberte

Somewhat tangential to your specific issues but ColVis can give you and your users control over the number of columns. Might help.