DataTables, JqueryUI, Length Drop Down, Search, Table Tools

jcrawford

Ok so I have been trying to make this work and I have gotten very close. I have gotten Table Tools to work with the Jquery UI but when I put Table Tools in place it seems the drop down for the length of the table (Show 10, 20, 50, 100, etc) disappears. Is there a way that I can have all 3 working together?

I have tired to have all of these working together? The closest I have gotten is to have the search box along with the Table Tools, I cannot seem to get the length drop down to show up at all. I have tried the following scenarios.

1.) JQueryUI for the Table, NOT for TableTools - With this setup I get all items showing and workable however the header for my table from JQueryUI (where the search bar goes) is no longer there, it's just the components on a white background.

2.) JQueryUI for the table AND TableTools - With this setup I get to see the TableTools and the search box BUT NOT the length drop down to select how many rows to show. The JQueryUI looks fine, working perfect.

So my question is there a way I could have the best of both worlds?

Thanks,
Joseph Crawford

jcrawford

I would also like to note that I cannot override the text on the buttons. The buttons show as the PNG images by default and that is it. There is no text saying "Copy", "Save", etc.

I have tried to override and it is not working. here is my table init code:

[code]
$(document).ready(function() {
$('#reports').dataTable( {
"bJQueryUI": true,
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/swf/ZeroClipboard.swf",
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
},
"aLengthMenu": [[10, 25, 100, -1], [10, 25, 100, "All"]],
"iDisplayLength": 100,
"iDisplayStart": 0
} );
} );
[/code]

I am unable to get the buttons to react to any of my settings. My install does not look like the default here: http://datatables.net/release-datatables/extras/TableTools/theme.html

Thanks,
Joseph Crawford

paulle

You can add the word "l" in <"H"Tfr>, namely <"H" lTfr>
[code]
$(document).ready( function () {
$('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"lTfr>t<"F"Tip>',
"oTableTools": {
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
}
} );
} );

[/code]

karanits

I have a problem , when i include the length in the sDom then the search filter comes one line below on the right. to to make all the three things appear in one line. I am using jQueryUI.

allan

You need to alter the CSS that you are using. Have a look at my demo tables and your own with Firebug.

Allan

karanits

@Allan you were right, the problem is i used your demo_jui.css file for testing but forgot to remove it. you have used widths as 40% in the filter's and length's css class. how ignorant of me!

jcrawford

I also had conflicting CSS which was making the search box go to the line below. Now that it is fixed I am wondering if there is a way to hide the drop down box where you select how many rows to show for each page. I would like to have a set limit for my tables :D

jcrawford

and figured it out: "bLengthChange": false,

jcrawford

While I have figured out how to hide the length drop down what I still cannot figure out is how to tell the table what length it should use. I would like to use 25 for my length before paging as I have implemented scrolling.

fbas

"iDisplayLength": 25

http://www.datatables.net/ref#iDisplayLength

bookmark that ref page. best page on the site.