I'd like to be able to put a drop down and some checkboxes in the area above the table, between the "show n entries" and "search" controls. What's the easiest way to do this?
Interesting question. There are a couple of ways to do this:
1. Using sDom ( http://datatables.net/examples/basic_init/dom.html ) to insert a DIV with a specific class and then using Javascript to add / move your elements into that DIV.
2. Using CSS positioning so that it 'looks' like the element is where you want it to be, but isn't really (DOM-wise anyway).
3. Using a plug-in to add your HTML elements (like TableTools does), which integrates with sDom.
var cb = document.createElement( "input" );
cb.type = "checkbox";
cb.id = "id";
cb.value = "test";
cb.checked = true;
var text = document.createTextNode( " Ag " );
var myStuffDivs = getElementsByClassName("mystuff");
myStuffDivs[0].appendChild( cb );
myStuffDivs[0].appendChild( text );
} );
[/code]
to your dom.html example, right underneath the line
[code]
[/code]
and the checkbox and text are inserted, but the controls are now miss aligned, with "show entries" and the new checkbox on one line, and then "search " on the next line -- all in the right columns, btw. If I comment out everything but
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sDom": 'l<"mystuff">ftip'
} );
[/code]
it works fine (no checkbox, of course, but the default controls are all on the same line)
I'm thinking this is do to my newbie ignorance (of javascript, html, or datatables -- take your pick!), but I'm not sure how to fix.
PS, the file getElementsByClassName-1.0.1.js was downloaded here and is doing the job, afaict.
PPS, I can send a picture of what I'm getting if the description's not clear
It sounds like you have have a layout issue with CSS. What I would suggest is to poke around with Firebug until you get the layout to match what you want. My demo CSS wasn't designed to have another element in the middle of the length and search fields, so you might just need to alter them a little.
Also with getElementsByClassName() - is there any benefit to including this extra Javascript over jQuery (given that you have to include jQuery for DataTables anyway)? Would $(".mystuff")[0], not be just as good and save on code overhead?
Replies
Interesting question. There are a couple of ways to do this:
1. Using sDom ( http://datatables.net/examples/basic_init/dom.html ) to insert a DIV with a specific class and then using Javascript to add / move your elements into that DIV.
2. Using CSS positioning so that it 'looks' like the element is where you want it to be, but isn't really (DOM-wise anyway).
3. Using a plug-in to add your HTML elements (like TableTools does), which integrates with sDom.
Hope this helps,
Allan
I'm attempting method 1., and I'm close, but there's a glitch I can't figure out. I've added this code
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sDom": 'l<"mystuff">ftip'
} );
var cb = document.createElement( "input" );
cb.type = "checkbox";
cb.id = "id";
cb.value = "test";
cb.checked = true;
var text = document.createTextNode( " Ag " );
var myStuffDivs = getElementsByClassName("mystuff");
myStuffDivs[0].appendChild( cb );
myStuffDivs[0].appendChild( text );
} );
[/code]
to your dom.html example, right underneath the line
[code]
[/code]
and the checkbox and text are inserted, but the controls are now miss aligned, with "show entries" and the new checkbox on one line, and then "search " on the next line -- all in the right columns, btw. If I comment out everything but
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sDom": 'l<"mystuff">ftip'
} );
[/code]
it works fine (no checkbox, of course, but the default controls are all on the same line)
I'm thinking this is do to my newbie ignorance (of javascript, html, or datatables -- take your pick!), but I'm not sure how to fix.
PS, the file getElementsByClassName-1.0.1.js was downloaded here and is doing the job, afaict.
PPS, I can send a picture of what I'm getting if the description's not clear
It sounds like you have have a layout issue with CSS. What I would suggest is to poke around with Firebug until you get the layout to match what you want. My demo CSS wasn't designed to have another element in the middle of the length and search fields, so you might just need to alter them a little.
Also with getElementsByClassName() - is there any benefit to including this extra Javascript over jQuery (given that you have to include jQuery for DataTables anyway)? Would $(".mystuff")[0], not be just as good and save on code overhead?
Regards,
Allan
I should have added CSS and jQuery to my newbie ignorance list!
Thanks for pointing me in the right direction.
DJ