DataTables not rendering properly after 10 rows

johnpalaganas

The DataTable is rendering fine if it's 10 entries/rows or less. Anything more would cause the rendering/presentation to break.

Such as - Column header not aligning properly to the entries/rows - Hidden columns are showing - Sorting is enabled on all columns

Here's the debug version if it helps. http://debug.datatables.net/akuxos

I cannot post the actual website since it's being developed internally.

Screenshot: http://i.imgur.com/BpW8pYU.png

JS to Initialize Datatables
[code]
//*** Variable Initialization ***/
var formID = {
dashboard: '#dashboard',
};
var table = {
joblist: 'joblist',
datalist: 'datalist',
employerlist: 'employerlist'
};
var contextName = {
employer: '/xxx',
};
var oTableJob = $(formID.dashboard + '\\:' + table.joblist).dataTable();

//*** Insert table of job details ***//
function fnFormatDetails ( oTableJob, nTr )
{
var aData = oTableJob.fnGetData( nTr );
var sOut =
''+
'' +
'Status:'+
'Address:'+aData[7]+''+
'Open Job Advertisement'+
''+
'';
return sOut;
};

//*** Begin jQuery ***/
$(document).ready(function(){

// *** Insert details column to the DataTable ***//
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
var nCloneTdf = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "align-center";
nCloneTdf.innerHTML = '';

//* Job list *//
$(formID.dashboard + '\\:' + table.joblist + ' ' + 'thead tr').each( function () {
this.insertBefore( nCloneTh.cloneNode( true ), this.childNodes[0] );
});
$(formID.dashboard + '\\:' + table.joblist + ' ' + 'tfoot tr').each( function () {
this.insertBefore( nCloneTdf.cloneNode( true ), this.childNodes[0] );
});
$(formID.dashboard + '\\:' + table.joblist + ' ' + 'tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
});
// *** DATE PICKER CONFIGURATION ***//
$.datepicker.regional[""].dateFormat = 'mm/dd/yy';
$.datepicker.setDefaults($.datepicker.regional['']);

//*** INITIALIZE DATATABLE PLUGIN ***//
//* Job List *//
$(oTableJob).dataTable( {
"aoColumnDefs": [
{ "sType": "string", "aTargets": [ 2 ] },
{ "sType": "numeric", "aTargets": [ 3 ] },
{ "sType": "string", "aTargets": [ 4 ] },
{ "sType": "numeric", "aTargets": [ 5 ] },
{ "sType": "html", "aTargets": [ 6 ] },
{ "sType": "html", "aTargets": [ 7 ] },
{ "sType": "string", "aTargets": [ 8 ] },
{ "sType": "date", "aTargets": [ 9 ] },
{ "sType": "date", "aTargets": [ 10 ] },
// Make these invisible but searchable
{ "bVisible": false, "aTargets": [ 7 ] },
// Disable sorting on first two column
{ "bSortable": false, "aTargets": [ 0 ] },
{ "bSortable": false, "aTargets": [ 1 ] },
{ "sWidth": "10%", "aTargets": [ -1 ] }
],
/* "aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
],*/
//"bFilter": false,
//"bInfo": false,
//"bSearch": false,
"sScrollY": "100%",
//"sScrollXInner": "100%",
//"sScrollX": "98%",
"bScrollCollapse": true,
"bPaginate": true,
"bJQueryUI": false,
//"bAutoWidth": true,
"aaSorting": [[9, 'desc' ]],
"bDestroy": true,
"bStateSave": true,
"aoColumns": getColumns


})
//*** DATATABLE CUSTOM FILTER ***//
.columnFilter({ sPlaceHolder: "head:after",
aoColumns: [
null,
null,
{ sSelector: ".joblist-status", type: "select" },
null,
{ sSelector: ".joblist-title", type: "select" },
null,
{ sSelector: ".joblist-location", type: "select" },
null,
{ sSelector: ".joblist-employer", type: "select" },
null, //{ sSelector: ".joblist-start", type: "date-range" },
null,
{ "sWidth": "10%" }
],
"bUseColVis": true
});

//*** CUSTOM SEARCH INPUT FILTER ***//
//* Job list *//
$('.jpdb-search-filter').keyup(function(){
//alert('You started typing!');
oTableJob.fnFilter($(this).val());
});

//* Date filter *//
$('.joblist-start').change(function(){
alert('Table changed!');
oTableJob.fnAdjustColumnSizing();
oTableJob.fnDraw();
});


//*** RESET FILTERS ***//
//* Job list *//
function fnResetAllFiltersJob() {

var oSettings = oTableJob.fnSettings();
for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
oSettings.aoPreSearchCols[ iCol ].sSearch = '';
$('.module-dashboard-viewlist select').prop('selectedIndex',0);
$(formID.dashboard + '\\:' + 'joblist-control-searchfilter input, .jpdb-search-filter, input.date_range_filter').val('');
oTableJob.fnFilter('');
///alert('Reset Filters!');
}
oTableJob.fnDraw();
};

//*** EVENT LISTENER ***//
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
//* Job list *//
$(formID.dashboard + '\\:' + table.joblist + ' ' + 'tr td img.openit').click(function () {
//alert('Expanded view');
var nTr = $(this).parents('tr')[0];
if ( oTableJob.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = contextName.employer + "/resources/images/details_open.png";
$('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
oTableJob.fnClose( nTr );
//oTableJob.fnDraw();
});
}
else
{
/* Open this row */
this.src = contextName.employer + "/resources/images/details_close.png";
var nDetailsRow = oTableJob.fnOpen( nTr, fnFormatDetails(oTableJob, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
//oTableJob.fnDraw();
}
});

//*** SELECT ALL JOB ITEMS IN TABLE ***//
$(formID.dashboard + '\\:' + table.joblist + '\\:' + 'command-selectAll').click(function(e){
var table= $(e.target).closest('.dataTables_wrapper');
$('td input:checkbox',table).prop('checked',this.checked);
});

});
[/code]

Thank you!

allan

Do you get any script errors or anything when you try to alter the paging? I don't immediately see anything in the large chunk of code above that would cause an issue.

Allan

johnpalaganas

Thank you for the reply Allan.

At first I got the "DataTables warning: Requested unknown parameter '10' from the data source for row '10'.

Then I put the "aoColumns": getColumns which removed the error but the table data is still presented in a broken way.

allan

Your aoColumnDefs says there should be at least 11 columns in each row. Are there? Remember colspan / rowspan isn't supported in the tbody.

Allan

johnpalaganas

Yes, there's 11 rows. First row being the button to show/hide the hidden row details which is dynamically inserted. Do I need to describe an "sType" for that?

Thank you Allan!

johnpalaganas

Just to clarify again. Column for "Address" and "Employer" should have data. For some reason data for "Address" is merged within the "Location" column and "Employer" data is missing.

Here's a better view of the 11th row/entry. It doesn't have the dynamically inserted graphic to show/hide the hidden details.

http://i.imgur.com/zd8a2yv.png

allan

Looks like you haven't added a "+" button on the first column for that row. How are you adding the "+" button? My guess is that you've change the "show x entires" to 25 records after the table has initialised and it shows this problem? If so, then you are probably adding the "+" column after you initialise the table? Does that sound correct? Why add it after you initialise the table? How are you loading the data?

Allan