Table tools buttons not showing
Table tools buttons not showing
melph
Posts: 37Questions: 1Answers: 0
Hi
I cannot work out why table tools buttons don't show. Actually, neither does the extended editor buttons - if I include any form of "aButtons":, then this causes the table data not to display. I am at a loss where to start as my code looks fine. The buttons I am interested in are the copy \ Print \ CSV etc.
Any help would be greatly appreciated. (Apologies, but I have included all the code plus please don't worry if you see changes to edit section, the actually editing has been disabled at this time)
[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "(I have taken out the exact source)/php/browsers1.php",
"domTable": "#example",
"fields": [ {
EDITOR FIELDS HERE, deleted in this example
}
]
} );
// Edit record
$('#example').on('click', 'a.editor_edit', function (e) {
//editor.message( '
Some fields cannot be edited in order to maintain the integrity of the database' );
e.preventDefault();
editor.edit(
$(this).parents('tr')[0],
'Further infomation',
{ "label": "Close", "fn": function () { editor.close() } }
);
} );
// Delete a record
$('#example').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.message( "Are you sure you want to remove this row?" );
editor.remove(
$(this).parents('tr')[0],
'Delete row',
{
"label": "Update",
"fn": function () {
editor.submit()
}
}
);
} );
// When the editor is opened, bind a key listener to the window
editor.on('onOpen', function () {
$(window).bind('keyup', function (e) {
if ( e.keyCode === 13 ) {
// On return, submit the form
editor.close();
}
else if ( e.keyCode === 27 ) {
// On escape, close the form
editor.close();
}
} );
} );
// When the editor is closed, remove the bound key listener
editor.on('onClose', function () {
$(window).unbind('keyup');
} );
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"aaSorting": [[5,'desc']], // means the table starts by sorting DESC on the date column
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
if ( aData.birdid == "161" || aData.birdid == "133" || aData.birdid == "131" || aData.birdid == "146" || aData.birdid == "137" || aData.birdid == "273" || aData.birdid == "244" || aData.birdid == "256" || aData.birdid == "74" && aData.breeder == "y") // so this takes the bird ID and if results.breeder is y, sets teh following display and stops edit link
{
$('td:eq(1)', nRow).html( '' );
$('td:eq(2)', nRow).html( '' );
$('td:eq(4)', nRow).html( '' );
$('td:eq(6)', nRow).html( '' );
$('td:eq(7)', nRow).html( '' );
}
if ( aData.rare == "1" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(3)', nRow).html( '' );
}
if ( aData.rare == "2" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(3)', nRow).html( '' );
}
if ( aData.rare == "3" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(3)', nRow).html( '' );
}
return nRow;
},
//"lsDom": "Tfrtip"
"sAjaxSource": "php/browsers1.php",
"iDisplayLength": 25,
"oLanguage": {
"sProcessing": "DataTables is currently busy",
"sLengthMenu": 'Display '+
'10'+
'25'+
'50'+
'All'+
' records'
},
"aoColumns": [
{ "mDataProp": "quantity"},
{ "mDataProp": "species" },
{ "mDataProp": "Latin","sClass": "center" },
{ "mDataProp": "rare", "sClass": "center"},
{ "mDataProp": "location","sClass": "center" },
{ "mDataProp": "date" , "sClass": "center" },
{ "mDataProp": "birdid" , "sClass": "center", "bVisible": false },
{ "mDataProp": "breeder" , "sClass": "center", "bVisible": false },
{ "mDataProp": "user" , "sClass": "center" },
{
"mDataProp": null,
"sClass": "center",
"sDefaultContent": 'Notes'
}
],
"oTableTools": {
"aButtons": [
// { "sExtends": "editor_create", "editor": editor },
// { "sExtends": "editor_edit", "editor": editor },
// { "sExtends": "editor_remove", "editor": editor }
]
"sSwfPath": "/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multiple",
}
} );
} );
[/code]
I cannot work out why table tools buttons don't show. Actually, neither does the extended editor buttons - if I include any form of "aButtons":, then this causes the table data not to display. I am at a loss where to start as my code looks fine. The buttons I am interested in are the copy \ Print \ CSV etc.
Any help would be greatly appreciated. (Apologies, but I have included all the code plus please don't worry if you see changes to edit section, the actually editing has been disabled at this time)
[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "(I have taken out the exact source)/php/browsers1.php",
"domTable": "#example",
"fields": [ {
EDITOR FIELDS HERE, deleted in this example
}
]
} );
// Edit record
$('#example').on('click', 'a.editor_edit', function (e) {
//editor.message( '
Some fields cannot be edited in order to maintain the integrity of the database' );
e.preventDefault();
editor.edit(
$(this).parents('tr')[0],
'Further infomation',
{ "label": "Close", "fn": function () { editor.close() } }
);
} );
// Delete a record
$('#example').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.message( "Are you sure you want to remove this row?" );
editor.remove(
$(this).parents('tr')[0],
'Delete row',
{
"label": "Update",
"fn": function () {
editor.submit()
}
}
);
} );
// When the editor is opened, bind a key listener to the window
editor.on('onOpen', function () {
$(window).bind('keyup', function (e) {
if ( e.keyCode === 13 ) {
// On return, submit the form
editor.close();
}
else if ( e.keyCode === 27 ) {
// On escape, close the form
editor.close();
}
} );
} );
// When the editor is closed, remove the bound key listener
editor.on('onClose', function () {
$(window).unbind('keyup');
} );
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"aaSorting": [[5,'desc']], // means the table starts by sorting DESC on the date column
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
if ( aData.birdid == "161" || aData.birdid == "133" || aData.birdid == "131" || aData.birdid == "146" || aData.birdid == "137" || aData.birdid == "273" || aData.birdid == "244" || aData.birdid == "256" || aData.birdid == "74" && aData.breeder == "y") // so this takes the bird ID and if results.breeder is y, sets teh following display and stops edit link
{
$('td:eq(1)', nRow).html( '' );
$('td:eq(2)', nRow).html( '' );
$('td:eq(4)', nRow).html( '' );
$('td:eq(6)', nRow).html( '' );
$('td:eq(7)', nRow).html( '' );
}
if ( aData.rare == "1" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(3)', nRow).html( '' );
}
if ( aData.rare == "2" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(3)', nRow).html( '' );
}
if ( aData.rare == "3" ) // so this is looking at row 3 'rare" which returns a value of 1,2, or 3
{
$('td:eq(3)', nRow).html( '' );
}
return nRow;
},
//"lsDom": "Tfrtip"
"sAjaxSource": "php/browsers1.php",
"iDisplayLength": 25,
"oLanguage": {
"sProcessing": "DataTables is currently busy",
"sLengthMenu": 'Display '+
'10'+
'25'+
'50'+
'All'+
' records'
},
"aoColumns": [
{ "mDataProp": "quantity"},
{ "mDataProp": "species" },
{ "mDataProp": "Latin","sClass": "center" },
{ "mDataProp": "rare", "sClass": "center"},
{ "mDataProp": "location","sClass": "center" },
{ "mDataProp": "date" , "sClass": "center" },
{ "mDataProp": "birdid" , "sClass": "center", "bVisible": false },
{ "mDataProp": "breeder" , "sClass": "center", "bVisible": false },
{ "mDataProp": "user" , "sClass": "center" },
{
"mDataProp": null,
"sClass": "center",
"sDefaultContent": 'Notes'
}
],
"oTableTools": {
"aButtons": [
// { "sExtends": "editor_create", "editor": editor },
// { "sExtends": "editor_edit", "editor": editor },
// { "sExtends": "editor_remove", "editor": editor }
]
"sSwfPath": "/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multiple",
}
} );
} );
[/code]
This discussion has been closed.
Replies