table heads not showing
table heads not showing
goodguycannon
Posts: 12Questions: 0Answers: 0
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]
[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]
This discussion has been closed.
Replies
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
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]
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
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.
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
[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
Dave.
[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.
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
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
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
[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]
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
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.
You can send me a personal mail using the contact form at http://datatables.net/contact . That would be great, thanks.
Regards,
Allan