ColVis and Editor

ColVis and Editor

asdrenasdren Posts: 20Questions: 0Answers: 0
edited April 2013 in Editor
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?

Replies

  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    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
  • asdrenasdren Posts: 20Questions: 0Answers: 0
    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
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    > "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
  • asdrenasdren Posts: 20Questions: 0Answers: 0
    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.
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    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
  • asdrenasdren Posts: 20Questions: 0Answers: 0
    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
This discussion has been closed.