table heads not showing

goodguycannon

I am having trouble getting the column heads to appear. I want to send that information as part of the JSON from the server.This displays the table, but not the headings:
[code]
oTable = $('#test').dataTable({
"bProcessing": true,
"sAjaxSource": "./request.php?cmd=docs",
"aoData": [{
"sName": "id"
}, {
"sName": "filename"
}, {
"sName": "owner"
}]
});

JSON:
{
"iTotalRecords": 4,
"iTotalDisplayRecords": 4,
"aaData": [
[
"1",
"weddings.doc",
"dave"
],
[
"2",
"divorces.doc",
"joe"
],
[
"3",
"soccer.xls",
"dave"
],
[
"4",
"flying kites.doc",
"cody"
]
],
"aoColumns": [
{
"sTitle": "id"
},
{
"sTitle": "filename"
},
{
"sTitle": "owner"
}
]
}
[/code]

allan

Hi,

When you are using sAjaxSource, it only processes the aaData array - your aoColumns array there will be ignored! The reason for this is that aoColumns (and all the other parameters, other than aaData) must be part of the initialisation object.

You could do something like this:

[code]
$(document).ready(function() {
$.getJSON( 'source.php', null, function( json ) {
$('#example').dataTable(json);
} );
});
[/code]
Regards,
Allan

goodguycannon

Thanks Allan.

The titles are there now. However, the browser crashes after a few seconds. I used to be able to select a row of the table and that seems to be not working now. Any help here?

Dave.
[code]
$.getJSON('request.php?cmd=docs', null, function(json){
oTable = $('#incoming_doclist').dataTable(json);
});
[/code]

allan

Hi Dave,

There is nothing there which indicated immediately what might be happening - certainly nothing to crash the browser. Any chance of a link? Or a few more details about what is going on - firebug errors etc?

Allan

goodguycannon

Allan,

It appears the following function does not fire when I use click on a row after changing to the getJSON method above:

[code]
$("#incoming_doclist tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
[/code]
Dave.

allan

Hi Dave,

Thanks for the update. However, I'm afraid without the rest of the code, I couldn't really say why your function isn't being executed. I presume you have something like this:

[code]
var oTable;

$(document).ready(function() {
$.getJSON( 'source.php', null, function( json ) {
oTable = $('#example').dataTable(json);

$("#incoming_doclist tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
} );
});
[/code]

Allan

allan

Ah hang on - sorry - just remembered that you are using sAjaxSource - which means that DataTables will load the data using an async XHR. In which case, you need to use fnInitComplete. Perhaps something like this:

[code]
var oTable;
$(document).ready(function() {
$.getJSON( 'source.php', null, function( json ) {
json.fnInitComplete = function ( oSettings ) {
$("#incoming_doclist tbody").click(function(event) {
$(oSettings.aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
};

oTable = $('#example').dataTable( json );
} );
});
[/code]

Allan

goodguycannon

Yes! now it is back to working. Thanks for helping my while I am learning this wonderful library. The browser does still crash when I switch to this call mathod, but I think that has to do with another library. I will let you know.

Dave.

goodguycannon

I am updating work I did a few months ago. I wanted to add a funtion that when somoene adds a record to my database, the table reloads. I thought by using
[code]oTable.fnReloadAjax();[/code] that would do it, but I get an error that it is not a function.

any idea how to reload the table with the above code?

Dave.

allan

Hi Dave,

Have you included the plug-in for that function and assigned oTable?

Plug-in: http://datatables.net/plug-ins/api#fnReloadAjax
Example of using plug-ins: http://datatables.net/examples/api/plugin_api.html

Regards,
Allan

goodguycannon

Hi again Allan.

I did include that routine, but it seems to clear the table. Please take a look:
[code]
/**
* @author David
*
*
*/
var oTable;
$(document).ready(function(){

$("#tabs-main").tabs();
$("#tabs-2").tabs();

$.getJSON('request.php?cmd=jobs_list', null, function(json){
json.fnInitComplete = function(oSettings){
$("#joblist tbody").click(function(event){
$(oSettings.aoData).each(function(){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
var anSelected = fnGetSelected(oTable);
var aPos = oTable.fnGetPosition(anSelected[0]);
var aData = oTable.fnGetData(aPos[0]);
// $("#incoming_docview").attr("src", "docs_in/" + aData[aPos][1] + "#toolbar=0&navpanes=0");
});
};

oTable = $('#joblist').dataTable(json);
});

var addjob_options = {
target: '#output2', // target element(s) to be updated with server response
//beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
dataType: 'script', // 'xml', 'script', or 'json' (expected server response type)
clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit

// $.ajax options can be used here too, for example:
//timeout: 3000
};

// bind to the form's submit event
$('#addJob').submit(function(){
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(addjob_options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});

/* Get the rows which are currently selected */
function fnGetSelected(oTableLocal){
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();

for (var i = 0; i < aTrs.length; i++) {
if ($(aTrs[i]).hasClass('row_selected')) {
aReturn.push(aTrs[i]);
}
}
return aReturn;
}

});

function reload_jobs(){
oTable.fnReloadAjax();
}

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource ) {
if ( typeof sNewSource != 'undefined' )
oSettings.sAjaxSource = sNewSource;

this.fnClearTable( this );
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;

$.getJSON( oSettings.sAjaxSource, null, function(json) {
/* Got the data - add it to the table */
for ( var i=0 ; i

allan

Hi Dave,

You need to include the plug-in before you initialise the table. So the code order (for DataTables) goes:

1. jquery.dataTables.js include
2. Add plug-in
3. Initialise table

Other than that, it should work fine when showResponse() is called. Have a look in Firebug to make sure the JSON call is getting through.

Regards,
Allan

goodguycannon

I moved the routine as follows but still the table gets emptied:

[code]
/**
* @author David
*
*
*/
var oTable;
$(document).ready(function(){

$("#tabs-main").tabs();
$("#tabs-2").tabs();

$.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings, sNewSource){
if (typeof sNewSource != 'undefined')
oSettings.sAjaxSource = sNewSource;

this.fnClearTable(this);
this.oApi._fnProcessingDisplay(oSettings, true);
var that = this;

$.getJSON(oSettings.sAjaxSource, null, function(json){
/* Got the data - add it to the table */
for (var i = 0; i < json.aaData.length; i++) {
that.oApi._fnAddData(oSettings, json.aaData[i]);
}

oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw(that);
that.oApi._fnProcessingDisplay(oSettings, false);
});
}

$.getJSON('request.php?cmd=jobs_list', null, function(json){
json.fnInitComplete = function(oSettings){
$("#joblist tbody").click(function(event){
$(oSettings.aoData).each(function(){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
var anSelected = fnGetSelected(oTable);
var aPos = oTable.fnGetPosition(anSelected[0]);
var aData = oTable.fnGetData(aPos[0]);
// $("#incoming_docview").attr("src", "docs_in/" + aData[aPos][1] + "#toolbar=0&navpanes=0");
$("#tabs-2").tabs("add", "/", "New X");
});
};
oTable = $('#joblist').dataTable(json);
});
...
[/code]

allan

Hi Dave,

That suggests to me then that the JSON isn't quite what DataTables is expecting. Have you validated the JSON using jsonlint.com ? If that passes, then perhaps you could post a sample here so we can see what is going on?

Regards,
Allan

goodguycannon

Hi Allan.

Sorry work called me out of town for last two weeks. I have so much code, so let me make my test environment available for you to check out. Can you give me an email to provide a private URL to?

Dave.

allan

Hi Dave,

You can send me a personal mail using the contact form at http://datatables.net/contact . That would be great, thanks.

Regards,
Allan