ColVis and Editor

asdren

Im trying to play around and testing the Editor. I prefer the twitter bootstrap version and I'm trying to add different extras that can be found here: http://datatables.net/extras/

I want to add ColVis to my twitter bootstrap Editor.

The example page has this javascript:

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/browsers.php",
"domTable": "#example",
"fields": [ {
"label": "Browser:",
"name": "browser"
}, {
"label": "Rendering engine:",
"name": "engine"
}, {
"label": "Platform:",
"name": "platform"
}, {
"label": "Version:",
"name": "version"
}, {
"label": "CSS grade:",
"name": "grade"
}
]
} );

$('#example').dataTable( {
"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sAjaxSource": "php/browsers.php",
"bServerSide": true,
"sServerMethod": 'POST',
"aoColumns": [
{ "mData": "browser" },
{ "mData": "engine" },
{ "mData": "platform" },
{ "mData": "version", "sClass": "center" },
{ "mData": "grade", "sClass": "center" }
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
} );


What I did was adding this peace of code:


$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'C<"clear">lfrtip'
} );
} );

To enable ColVis but I get this error: DataTables warning (table id ='example'): Cannot reinitialise DataTables.

How do i add ColVis to the Editor?

allan

You can't initialise DataTables twice as the error indicates. Currently, you are initialising it the first time with sDom, sAjaxSource etc, but then try to initialise it again with just sDom. What you need to do is add the ColVis initialisation to the sDom in your first initialisation and remove the second.

That is done simply by adding the `C` option to sDom .

Allan

asdren

Hi Allan, I'm a total newb, trying to learn. You see my code above, can you change my code above so it works with ColVis? Thanks in advance

allan

> "sDom": "C<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",

All I've done is add the `C` option at the start of sDom . You might want to put it somewhere else - its up to you!

Allan

asdren

I have already tried this but I dont see the "Show/Hide columns" button. And when i debug it i get:
ColVis Not installed
But ColVis is installed, when i visit .../DataTables-1.9.4/extras/ColVis/ i see that it works on that example page but not on my twitter bootstrap editor.

allan

Have you included the ColVis Javascript and CSS on your page? If the debugger says it is not installed on your page, I'm going to guess not.

Allan

asdren

Yes, that was the problem.

@import "support/bootstrap/css/bootstrap.css";
@import "support/bootstrap/dataTables/dataTables.bootstrap.css";
@import "../../ColVis/media/css/ColVis.css";

and

did it. Thanks