New to Datatables, help

dmcconnell68

I have found several Datatables examples that I would like to combine into one table, but not having a lot of luck. One has column filtering, one has a column selector button and the last has copy/print/save buttons. I can't seem to get them all working on the same table. I believe it has something to do with "sDom:" I would also like to have another button that would hide/show the column filter input fields row.

Debug code: imolip

Here is the code that I have so far if anyone could offer some suggestions.

[code]

/* Add the events etc before DataTables hides a column */
$("#dt_basic thead input").keyup(function() {
oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), $("thead input").index(this)));
});

$("#dt_basic thead input").each(function(i) {
this.initVal = this.value;
});
$("#dt_basic thead input").focus(function() {
if (this.className == "search_init") {
this.className = "";
this.value = "";
}
});
$("#dt_basic thead input").blur(function(i) {
if (this.value == "") {
this.className = "search_init";
this.value = this.initVal;
}
});

var oTable = $('#dt_basic').dataTable({
"sPaginationType" : "bootstrap",
//"sDom" : "<'dt-top-row'Tlf>r<'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>", //copy-print-save
"sDom" : "R<'dt-top-row'Clf>r<'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>", //column selector
//"sDom" : "<'dt-top-row'><'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
//"sDom" : "t<'row dt-wrapper'<'col-sm-6'i><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'>>",
"bSortCellsTop" : true,
"oTableTools" : {
"aButtons" : ["copy", "print", {
"sExtends" : "collection",
"sButtonText" : 'Save ',
"aButtons" : ["csv", "xls", "pdf"]
}],
"sSwfPath" : "js/plugin/datatables/media/swf/copy_csv_xls_pdf.swf"
},
"fnInitComplete" : function(oSettings, json) {
$('.ColVis_Button').addClass('btn btn-default btn-sm').html('Columns ');
},
"fnInitComplete" : function(oSettings, json) {
$(this).closest('#dt_table_tools_wrapper').find('.DTTT.btn-group').addClass('table_tools_group').children('a.btn').each(function() {
$(this).addClass('btn-sm btn-default');
});
}
});
[/code]

allan

That looks like it should probably work I think - although I guess I'm missing something! Can you link to a test case please.

Allan

dmcconnell68

Hey Allan,

My site is behind a corp firewall, so I can't link to it from the outside. Let me try to explain a little better what's happening.

With the current sDom line that is uncommented, I get the filter field on the left and columns selector button and the rows per page selector on the right of the table header.

With the first SDom line uncommented, I lose the column selector and get the copy, print and save buttons in the same place.

I would also like the column filter row to be hidden when the table is first displayed, and a button at the top to allow it to be unhidden.

Thanks,
David

allan

Ah okay - so each character in sDom (that isn't in quotes) is a feature. So:

- `t` == the table
- `l` == length input
etc (see sDom docs for the built in options)

ColVis is available using the `C` option, ColReorder with `R` , TableTools with `T` . So if you want all three, just include all three options.

You've also got two `fnInitComplete` parameters. That's like saying `var i=1; i=2;` and expecting i to be both 1 and 2 :-)

Allan