New ajax call causing multiple headers and footers to appear

troy_black

When I pass new data into the dataTable I get multiple headers and footers. the data appears correct, but the old header and footers remain. How can I clear them? I have tried oTable.fnClearTable(0/1) before the call with no success. Any thoughts?

[code]
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(json) {
var i = 1;
var values;
var data = parseJsonResult(json);

$('#reportList').dataTable({
"aaData": data,
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bInfo": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sTitle": "Share", "sClass": "center", "bSortable": true },
{ "sTitle": "ID", "bSortable": true },
{ "sTitle": "Display Name", "bSortable": true },
{ "sTitle": "Last Name", "bSortable": true },
{ "sTitle": "First Name", "bSortable": true }
],
"aaSorting": [[3, 'asc']]
});
},
json: {},
async: false
});
[/code]

allan

It sounds like you are using DataTables 1.5 (or earlier). Is that right? You can't re-initialise a DataTable like this and v1.6 has error checking for this. The thing to do in this case is initialise it once and then use fnAddData and fnClearTable to clear/add the new data.

Allan

troy_black

ok, so I have done as you suggested. Using version 1.6 now.

I have moved the setup of the datatable to the document.ready method.
[code]
var oTable;

$(document).ready(function() {
oTable = $('#reportList').dataTable({
"aaData": [],
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
//"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sTitle": "Share", "sClass": "center", "bSortable": true,
"fnRender": function(obj) {
var sReturn;
var userId = obj.aData[1];
var shareValue = obj.aData[0];
if (shareValue == true) {
sReturn = "";
}
else {
sReturn = "";
}
return sReturn;
}
},
{ "sTitle": "ID", "bSortable": true },
{ "sTitle": "Display Name", "bSortable": true },
{ "sTitle": "Last Name", "bSortable": true },
{ "sTitle": "First Name", "bSortable": true },
{ "sTitle": "Email", "bSortable": true }
],
"aaSorting": [[3, 'asc']]
});

//Nuke in case of ajax repopulate.
oTable.fnClearTable(0);
});
[/code]

now when I try to populate the table it doesn't appear to work using oTable.fnAddData(data). the data is the same data I used in the earlier example.

[code]
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(json) {
var data = parseJsonResult(json);
oTable.fnAddData(data);
},
json: {},
async: false
});
[/code]

When I look at oTable in the above code, it doesn't appear to be correct as DataTableSettings is just a prototype.

So I tried setting oTable to the original table and I receive the following error. "DataTables warning: Unable to re-initialise DataTable. Please use the API to make any configuration changes required."

[code]
oTable = $('#reportList').dataTable();
[/code]

I'm not sure where to go from here.

troy_black

Oh, using 1.6 now as well.

allan

You might need to use oTable.fnAddData(data.aaData); fnAddData is expecting a 2D array - not an object. Failing that, can you post a link to an example?

Allan

troy_black

OK so I'm doing it in my parse data method now:

[code]
$.each(users, function(i, user) {
if (user.LastName != '') {
var shared = false;
if (user.Shared == 1) {
shared = true;
}
var userItem = [shared.toString(), user.ID.toString(), user.DisplayName, user.LastName, user.FirstName, user.Email]
oTable.fnAddData(userItem);
}
});
[/code]

but this blows up because oTable has no oSettings so I add the line oTable = $('#reportList').dataTable(); above the loop and it populates fine, but I have lost all of the setting I set up in the initial document.ready. It just shows me the raw data with the default table format.

allan

I'm afraid I'm a little lost.

So you initialise your table in document.ready - and save it's reference to oTable (which is global). But then you say you are unable to add data to the table using fnAddData at a later time? Is that correct? That should world! You don't need to call $().dataTable() more than once.

Can you post a link please?

Allan

troy_black

Not sure what you are looking for in the way of a link, but here is the entire contents of the script block. This may be funky as we are using MVC with unity. I guess it might cause issues, but I wouldn't have thought so.

[code]
var oTable;

$(function() {
$("#tabs").tabs();
});

$(document).ready(function() {
$('#clearButton').hide();

oTable = $('#reportList').dataTable({
"aaData": data,
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
//"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sTitle": "Share", "sClass": "center", "bSortable": true,
"fnRender": function(obj) {
var sReturn;
var userId = obj.aData[1];
var shareValue = obj.aData[0];
if (shareValue == true) {
sReturn = "";
}
else {
sReturn = "";
}
return sReturn;
}
},
{ "sTitle": "ID", "bSortable": true },
{ "sTitle": "Display Name", "bSortable": true },
{ "sTitle": "Last Name", "bSortable": true },
{ "sTitle": "First Name", "bSortable": true },
{ "sTitle": "Email", "bSortable": true }
],
"aaSorting": [[3, 'asc']]
});
});

function parseJsonResult(users) {
var jsArray = new Array();

// With this commented out it will not render, because there are no oSettings
// With it in it renders, but I have lost all of the settings I put in the document.ready method
//oTable = $('#reportList').dataTable();

$.each(users, function(i, user) {
if (user.LastName != '') {
var shared = false;
if (user.Shared == 1) {
shared = true;
}
var userItem = [shared.toString(), user.ID.toString(), user.DisplayName, user.LastName, user.FirstName, user.Email]
oTable.fnAddData(userItem);
}
});
return jsArray;
}

function clearForm(groupDiv) {
var groupDropDownSelectString = '#' + groupDiv + ' #groupList';
var videoDropDownSelectString = '#' + groupDiv + ' #groupVideoList';
$('#clearButton').hide();
$('#getUsersButton').show();
$(groupDropDownSelectString).removeAttr("disabled");
$(videoDropDownSelectString).removeAttr("disabled");
oTable.fnClearTable();
}

function getUsers(groupDiv, groupId) {



var groupDropDownSelectString = '#' + groupDiv + ' #groupList';
var groupDropDownVal = $(groupDropDownSelectString).val();
$(groupDropDownSelectString).attr("disabled", "disabled");

var videoDropDownSelectString = '#' + groupDiv + ' #groupVideoList';
var videoDropDownVal = $(videoDropDownSelectString).val();
$(videoDropDownSelectString).attr("disabled", "disabled");

$('#getUsersButton').hide();
$('#clearButton').show();
oTable.fnClearTable();

url = "/Front/" + groupId + "/Admin/Video/GetUsersByGroup/" + groupDropDownVal + "/" + videoDropDownVal
$.ajaxSetup({ cache: false });

$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(json) {
cleanReportListTable();
var data = parseJsonResult(json);
},
json: {},
async: false
});

$('#userList').show("slow");
}
[/code]

allan

Just a link to an example showing the problem might help narrow it down. For example I don't see where getUsers() is being called from - and this function cannot be called before the table has been initialised - which as you state will cause a problem because the table object doesn't exist! As long as your table is initialised first, it looks like it should be okay.

Allan

dpaustin

My question is sort of the reverse of the title of this thread - how can I create multiple header rows through json initialization? Some of the header rows will have colspan th's - which the documentation says does not work in tbody but I have seen to work in thead..
Thanks!