Noob asks daft Q

NFLineast

Hi,

I have been messing with datatables for a couple of days now. I must say I'm very impressed with what it can do. I have it set up on some tables that need pagination, filtering etc - and it works a charm.

My question is this: Is there a way to slap the datatables style on a generic html table that does not need any filtering, searching, pagination, or any other type of fancy manipulation. Simply a table with a few tr's, and td's. The reason I am asking, is that I have some tables set up on a page, and there seems to be a set height for a datatable, leaving a lot of empty space underneath each table. With a simple way to just have the nice style applied, and otherwise just render html as normal, that would solve my problem. Any hints are much appreciated, and thank you very much!

Cheers,
Joe

PS. I am using the jQuery UI style...

fbas

you can disable all the features and functions but still use datatables (don't use any sDom items except the table t and JQ UI elements, and set columns to bSortable false, set iDisplayLength to a large number). You will need to make sure you have a THEAD in your tables, like any other DataTable

[code]
$(document).ready(function() {
$('#example').dataTable( {
sDom: '<"H">t<"F">',
iDisplayLength: 9999,
aoColumnDefs: [ { aTargets: [0,1,2,3,4,5,6,7], bSortable: false, bSearchable: false } ]
});
});[/code]

NFLineast

Thanks very much. Will that sort out the height of the table, so that it adjusts to the content, like ordinary html tables? Appreciate the help very much.

fbas

I believe if you don't include any limits in CSS or sScrollY in DataTables, height will not be a factor

NFLineast

OK, tried your code. The table is somehow still parsed as being higher than it's actual content causing a large gap of white space below, before the next table on the page. Any hints are much appreciated.

Screen shot:

http://belmaati.com/pics/flightdetails.jpg

fbas

check the debugger, see what's inhabiting that space, or which css is set.

NFLineast

service_wrapper.dataTables_wrapper, somehow set to height = 302...

Looks like this:

http://belmaati.com/pics/flightdetails2.jpg

I am not sure where to look for those, and how their height is set..? Is there a way to "unset" it?

fbas

your image cuts off the part I wanted to see (on the right hand side, the computed CSS values panel shows where things were defined).

you might want to set sScrollY to something suitable (but this will force really tall tables to scroll. is that ok?) and bScrollCollapse and see if that helps. http://datatables.net/ref#bScrollCollapse

[code]
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": "200",
"bScrollCollapse": true
} );
} );[/code]

NFLineast

I'll try with that code example. Sorry about the clipped image. Here's another one of the inspector itself. I suppose it's the min-height property that is causing my troubles..

EDIT: Just tried your code example. This causes the table to scroll internally but does not get rid of the white space after the table..

http://belmaati.com/pics/flightdetails3.jpg

Once again, thanks for any help!

fbas

that's likely it. you can edit the demo_table_jui.css file

[code]
.dataTables_wrapper {
position: relative;
min-height: 150px;
_height: 150px;
clear: both;
}
[/code]

NFLineast

Right - is there a way to override the css property within the jquery launch code? I am using dataTables on other pages where those properties would likely be required...

fbas

[code]$('dataTables_wrapper').css('height', '150px').css('min-height', '150px');[/code]

NFLineast

Thank you so much. Really appreciate all the kind help.

All the best,
Joe

fbas

not a problem. if you want a quick walkthrough of jquery and javascript for DataTables users, check out my blog http://tote-magote.blogspot.com

I should add the .css() function to the blog entry, since it's a good common one.