aButtons conflicts with sscroll and sajaxsource

michelkogan

here is my code:

[code]editor = new $.fn.dataTable.Editor({
"ajaxUrl":"includes/content/json_data.php",
"domTable":".datatable",
"fields":[
{
"label":"Browser:",
"name":"browser"
},
{
"label":"Rendering engine:",
"name":"engine"
},
{
"label":"Platform:",
"name":"platform"
},
{
"label":"Version:",
"name":"version"
},
{
"label":"CSS grade:",
"name":"grade"
}
]
});
var e = $("#customersDataTable .datatable").dataTable({
bJQueryUI:!0,
bSortClasses:!1,
aaSorting:[
[0, "asc"]
],
bAutoWidth:!0,
bInfo:!0,
bScrollCollapse:false,
sPaginationType:"full_numbers",
bDestroy:true,
sScrollX: "101%",
fnInitComplete:
function(){

$("#customersDataTable .dataTables_length > label > select").uniform();
$("#customersDataTable .dataTables_filter input[type=text]").addClass("text");
$(".datatable").css("visibility","visible")}
,
"sDom": "Tfrti",
sAjaxSource:"includes/content/json_data.php",

aoColumns:[
{ "mDataProp":"browser" },
{ "mDataProp":"engine" },
{ "mDataProp":"platform" },
{ "mDataProp":"version", "sClass":"center" },
{ "mDataProp":"grade", "sClass":"center" }
],
oTableTools:{
"sRowSelect":"multi",
"aButtons":[
{ "sExtends":"editor_create", "editor":editor },
{ "sExtends":"editor_edit", "editor":editor },
{ "sExtends":"editor_remove", "editor":editor }
]
}

});
$(window).resize(function () {
e.fnAdjustColumnSizing();
})
[/code]

the problem is when i choose a row and click on edit button, an error pops out:

[quote]DataTables warning (table id = 'DataTables_Table_0'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy[/quote]

I wanna know whats the problem ? When I remove sScrollX everything works perfect ! But I want to use it in my responsive design.

allan

There must be something else that isn't included in the code above which results in the error, as that code, if run only once looks fine.

One thing to remember is that when DataTables uses scrolling, it will split the table into two elements, so if you call $('table').dataTable({...}) twice it will fail. The fnTables API method is one of the best ways of dealing with this, but I think we'd need a link to your page to actually see what is needed.

Allan

michelkogan

I just copy and paste entire html file. Note that the php/json_data.php file is the same as the example browsers.php file (in Editor-1.2.1-Trial package examples php folder).

[code]














var editor;

function MyCustomersDataTables() {
if ($(".datatable").length > 0 && $.fn.dataTable) {
var tables = $.fn.dataTable.fnTables(true);
editor = new $.fn.dataTable.Editor({
"ajaxUrl":"php/json_data.php",
"domTable":".datatable",
"fields":[
{
"label":"Browser:",
"name":"browser"
},
{
"label":"Rendering engine:",
"name":"engine"
},
{
"label":"Platform:",
"name":"platform"
},
{
"label":"Version:",
"name":"version"
},
{
"label":"CSS grade:",
"name":"grade"
}
]
});
var e = $("#customersDataTable .datatable").dataTable({
bJQueryUI:!0,
bSortClasses:!1,
aaSorting:[
[0, "asc"]
],
bAutoWidth:!0,
bInfo:!0,
sScrollX:"101%",
bScrollCollapse:false,
sPaginationType:"full_numbers",
bDestroy:true,
fnInitComplete:
function(){

$("#customersDataTable .dataTables_length > label > select").uniform();
$("#customersDataTable .dataTables_filter input[type=text]").addClass("text");
$(".datatable").css("visibility","visible")}
,
"sDom": "Tfrti",
sAjaxSource:"php/json_data.php",

aoColumns:[
{ "mDataProp":"browser" },
{ "mDataProp":"engine" },
{ "mDataProp":"platform" },
{ "mDataProp":"version", "sClass":"center" },
{ "mDataProp":"grade", "sClass":"center" }
],
oTableTools:{
"sRowSelect":"multi",
"aButtons":[
{ "sExtends":"editor_create", "editor":editor },
{ "sExtends":"editor_edit", "editor":editor },
{ "sExtends":"editor_remove", "editor":editor }
]
}

});

$(window).resize(function () {
e.fnAdjustColumnSizing();

})
}
}







Test 1
Test 2
Test 3
Test 4
Test 5






jQuery(function($) {
MyCustomersDataTables()
});



[/code]

the error appears when you select one row and click on edit button

michelkogan

My problem solved by removing table's class name and adding id instead of class.

... instead of