Scrolling breaking when I add arguments into the array

justinshea

Hello,
Since this is my first post I'd just like to mention what a great plug-in datatables is..so well documented.
I am having an issue with the scrolling parameters. When I add a DOM positioning parameter into the array all scrolling becomes disabled.

Here is the custom script I attempting to use:

[code]
$(document).ready( function() {
var oTable = $('#ad_table').dataTable( {
// "sDom": '<"hidden"i>',
"aoColumnDefs": [
{ "sType": "numeric", "aTargets": [2,4,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31] },
{ "aDataSort": [ 5, 6 ], "aTargets": [ 5 ] },
{ "aDataSort": [ 3, 6 ], "aTargets": [ 3 ] },
{ "aDataSort": [ 1, 6 ], "aTargets": [ 1 ] },
{ "bSearchable": false, "aTargets": [1,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31] },
{ "bVisible": false, "aTargets": [2,3,5] },
{ "sWidth": "40px", "aTargets": [0] },
{ "sWidth": "20px", "aTargets": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31] },
],
"bScrollCollapse": true,
"sScrollY": "200px",
"sScrollX": "100%",
"bPaginate": false,
});

oTable.fnSort([[6,'asc']]);
new FixedColumns(oTable);
});
[/code]

https://github.com/justinshea/TableDemo-v2

You will notice that the "sDOM" argument is commented out. When it is not commented out the information element is placed into a div with class of "hidden" as intended. But, if it is not commented out then the scrolling also becomes disabled. Can someone please help me troubleshoot? Is this a bug or have I not constructed the array properly?

Thanks,
Justin

allan

Hi Justin,

Thanks for your kind words about DataTables! Thanks also for providing a link to the repo you are working on with the test case - very useful indeed!

With sDom you must supply at least the `t` option - that's where the table does. So at a minimum you might have:

> sDom: '<"hidden"i>t'

Without the `t` there is a Javascript error occurring, which is why nothing works in that case. I'll update the documentation to make it more clear that the `t` is not optional (it also is the only option which cannot be duplicated!).

Regards,
Allan

justinshea

Thanks for the feedback Allan.
I was actually just trying to hide the "info" element and subsequently found the [quote]bInfo[/quote] option which is what I am using now.
I did notice that [quote]sDom: '<"hidden"i>t'[/quote] option
would append or prepend the full html like [quote]information html here[/quote]
Is it possible to place the sDOM element into a div that has already been created outside of the table?
For instance, my table will have a navigation area with sharing features, expansion option and I would like to place the search input in there as well....

allan

> Is it possible to place the sDOM element into a div that has already been created outside of the table?

Yes indeed. Once the table has been created, you can move the elements around using standard jQuery / DOM methods. For example:

[code]
$('#example').dataTable();

$('.dataTables_filter').appendTo( '#myControlBar' );
[/code]

The same applies to the other elements.

The alternative option is to remove the default controls DataTables added, and then add your own using the API. For example for filtering you would call fnFilter .

Regards,
Allan