js array method - empty aaData causes table headers not to display
js array method - empty aaData causes table headers not to display
I am using a Codeigniter plug-in (datatables-ci, on github https://github.com/jayalfredprufrock/datatable_ci ) to generate a js-array method datatable. Everything works fine, as long as aaData has data in it. However, if the array is empty, the table rendered has no column headers, which is not what I would expect. sEmptyTable is rendered correctly, but I find the look odd without any table headers, especially if I have already seen the same table with headers and data earlier.
example code:
[code]
var oTable =$('#eventsTable').dataTable({
"sDom":"rtp",
"bPaginate":true,
"sPaginationType":"ellipses",
"bFilter":true,
"bSort":false,
"aaSorting": [[2,"asc"]],
"iDisplayLength":12,
*SNIP*
"bRetrieve":true,
"fnInitComplete":function(dt){
$(dt.nTableWrapper).find('.datatables_filter input').attr('placeholder','filter Eventstable');
var rows = $(dt.nTable).dataTable().fnGetNodes();
$.each(rows,function(i){
var row = $(this);
row.children().first().children('textarea').each(function(){
row.data($(this).attr('name'),$(this).val());
$(this).remove();
});
});
},
"_aRowFormData":[],
"fnDrawCallback":"",
"aoColumns":[[
{"sName":"Event",
"sTitle":"Event",
"bSearchable":true,
"bSortable":true,
"bUseRendered":true,
"bVisible":true,
"sClass":null,
"sWidth":null,
"_aColData":[],
"_afCallbacks":[],
"_aEditableOptions":{"event":"click.editable"},
"_aEditableRowData":["id"],
"_aEditableColData":[]},
{"sName":"Location",
"sTitle":"Location",
"bSearchable":true,
"bSortable":true,
"bUseRendered":true,
"bVisible":true,
"sClass":null,
"sWidth":null,
"_aColData":[],
"_afCallbacks":[],
"_aEditableOptions":{"event":"click.editable"},
"_aEditableRowData":["id"],
"_aEditableColData":[]},
*SNIP*
]],
"oLanguage":{
"oPaginate":{
"sFirst":"First",
"sLast":"Last",
"sNext":">>",
"sPrevious":"<<"
},
"sEmptyTable":"No Records to show for this view",
"sInfo":"Showing _START_ to _END_ of _TOTAL_ Eventstable",
"sInfoEmpty":"No Eventstable to display",
"sInfoFiltered":"(filtered from _MAX_ total Eventstable)",
"sInfoPostFix":"",
"sLengthMenu":"Show _MENU_ Eventstable",
"sLoadingRecords":"Loading...",
"sProcessing":"Processing...",
"sSearch":"",
"sZeroRecords":"No Eventstable to display",
"sUrl":""
},
"aaData":[]
});
oTable.data('singular_name','Eventstable');
$(window).bind('resize', function(){oTable.fnAdjustColumnSizing();});
[/code]
example code:
[code]
var oTable =$('#eventsTable').dataTable({
"sDom":"rtp",
"bPaginate":true,
"sPaginationType":"ellipses",
"bFilter":true,
"bSort":false,
"aaSorting": [[2,"asc"]],
"iDisplayLength":12,
*SNIP*
"bRetrieve":true,
"fnInitComplete":function(dt){
$(dt.nTableWrapper).find('.datatables_filter input').attr('placeholder','filter Eventstable');
var rows = $(dt.nTable).dataTable().fnGetNodes();
$.each(rows,function(i){
var row = $(this);
row.children().first().children('textarea').each(function(){
row.data($(this).attr('name'),$(this).val());
$(this).remove();
});
});
},
"_aRowFormData":[],
"fnDrawCallback":"",
"aoColumns":[[
{"sName":"Event",
"sTitle":"Event",
"bSearchable":true,
"bSortable":true,
"bUseRendered":true,
"bVisible":true,
"sClass":null,
"sWidth":null,
"_aColData":[],
"_afCallbacks":[],
"_aEditableOptions":{"event":"click.editable"},
"_aEditableRowData":["id"],
"_aEditableColData":[]},
{"sName":"Location",
"sTitle":"Location",
"bSearchable":true,
"bSortable":true,
"bUseRendered":true,
"bVisible":true,
"sClass":null,
"sWidth":null,
"_aColData":[],
"_afCallbacks":[],
"_aEditableOptions":{"event":"click.editable"},
"_aEditableRowData":["id"],
"_aEditableColData":[]},
*SNIP*
]],
"oLanguage":{
"oPaginate":{
"sFirst":"First",
"sLast":"Last",
"sNext":">>",
"sPrevious":"<<"
},
"sEmptyTable":"No Records to show for this view",
"sInfo":"Showing _START_ to _END_ of _TOTAL_ Eventstable",
"sInfoEmpty":"No Eventstable to display",
"sInfoFiltered":"(filtered from _MAX_ total Eventstable)",
"sInfoPostFix":"",
"sLengthMenu":"Show _MENU_ Eventstable",
"sLoadingRecords":"Loading...",
"sProcessing":"Processing...",
"sSearch":"",
"sZeroRecords":"No Eventstable to display",
"sUrl":""
},
"aaData":[]
});
oTable.data('singular_name','Eventstable');
$(window).bind('resize', function(){oTable.fnAdjustColumnSizing();});
[/code]
This discussion has been closed.
Replies
[code]
<!DOCTYPE html>
@import "/media/css/demo_page.css";
@import "/media/css/demo_table.css";
var oTable =$('#eventsTable').dataTable({
"sDom":"rtp",
"bPaginate":true,
"bFilter":true,
"bSort":false,
"aaSorting": [[2,"asc"]],
"iDisplayLength":12,
"bRetrieve":true,
"fnInitComplete":function(dt){
$(dt.nTableWrapper).find('.datatables_filter input').attr('placeholder','filter Eventstable');
var rows = $(dt.nTable).dataTable().fnGetNodes();
$.each(rows,function(i){
var row = $(this);
row.children().first().children('textarea').each(function(){
row.data($(this).attr('name'),$(this).val());
$(this).remove();
});
});
},
"_aRowFormData":[],
"fnDrawCallback":"",
"aoColumns":[[
{"sName":"Event",
"sTitle":"Event",
"bSearchable":true,
"bSortable":true,
"bUseRendered":true,
"bVisible":true,
"sClass":null,
"sWidth":null,
"_aColData":[],
"_afCallbacks":[],
"_aEditableOptions":{"event":"click.editable"},
"_aEditableRowData":["id"],
"_aEditableColData":[]},
{"sName":"Location",
"sTitle":"Location",
"bSearchable":true,
"bSortable":true,
"bUseRendered":true,
"bVisible":true,
"sClass":null,
"sWidth":null,
"_aColData":[],
"_afCallbacks":[],
"_aEditableOptions":{"event":"click.editable"},
"_aEditableRowData":["id"],
"_aEditableColData":[]}
]],
"oLanguage":{
"oPaginate":{
"sFirst":"First",
"sLast":"Last",
"sNext":">>",
"sPrevious":"<<"
},
"sEmptyTable":"No Records to show for this view",
"sInfo":"Showing _START_ to _END_ of _TOTAL_ Eventstable",
"sInfoEmpty":"No Eventstable to display",
"sInfoFiltered":"(filtered from _MAX_ total Eventstable)",
"sInfoPostFix":"",
"sLengthMenu":"Show _MENU_ Eventstable",
"sLoadingRecords":"Loading...",
"sProcessing":"Processing...",
"sSearch":"",
"sZeroRecords":"No Eventstable to display",
"sUrl":""
},
"aaData":[]
});
oTable.data('singular_name','Eventstable');
$(window).bind('resize', function(){oTable.fnAdjustColumnSizing();});
[/code]