fnClearTable() does not clear the table
fnClearTable() does not clear the table
Why is not it cleared when done() is called?
[code]
var oTable = $('#main_data_table').dataTable({
iDisplayLength: 25,
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
bSort: true,
sAjaxSource: getApiUrl("/users"),
aoColumns: aoColumns,
aoColumnDefs:[{
aTargets: [1],
bSortable: false,
mRender: function ( val, type, full ) {
return '' + val + '';
}
},
{
aTargets: [2],
mRender: getEditIcon
}, {
aTargets: [3],
mRender: getEditIcon
}, {
aTargets: [4],
sDefaultContent: 0, // if missing in JSON, defaults to 0
mRender: function ( val, type, full ) {
return '' + statuses[val] + '';
}
}, {
aTargets: [5],
mRender: function ( val, type, full ) {
return '' + val + '';
}
}],
fnDrawCallback: function( oSettings ) {
$('td .editable', oTable.fnGetNodes()).editable(function(value, settings) {
var self = this;
$.ajax({
type: "PATCH",
url: getApiUrl("/user/" + getUserid(this) + "/user_ref"),
contentType: 'application/json',
data: JSON.stringify({user:{user_ref:value}}),
}).fail(function(XHR, status, error) {
$(self).addClass('error');
$(self).text(JSON.parse(XHR.responseText).message);
});
return value;
},
{
width: "100px"
});
$('td .editable-select', oTable.fnGetNodes()).editable(function(value, settings) {
var self = this;
$.ajax({
type: "PATCH",
url: getApiUrl("/user/" + getUserid(this) + "/status"),
contentType: 'application/json',
data: JSON.stringify({user:{status_id:value}}),
}).fail(function(XHR, status, error) {
$(self).addClass('error');
$(self).text(JSON.parse(XHR.responseText).message);
});
return statuses[value];
},
{
data: statuses,
type: 'select'
});
}
});
$("#frm_create_user").submit(function() {
var formData = getFormData($("#frm_create_user"));
$.ajax({
type: "POST",
url: getApiUrl("/user"),
dataType: "json",
contentType: 'application/json',
data: JSON.stringify({user:{user_ref: formData.user_ref}}),
}).done(function(r) {
oTable.fnClearTable();
});
return false;
});
[/code]
[code]
var oTable = $('#main_data_table').dataTable({
iDisplayLength: 25,
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
bSort: true,
sAjaxSource: getApiUrl("/users"),
aoColumns: aoColumns,
aoColumnDefs:[{
aTargets: [1],
bSortable: false,
mRender: function ( val, type, full ) {
return '' + val + '';
}
},
{
aTargets: [2],
mRender: getEditIcon
}, {
aTargets: [3],
mRender: getEditIcon
}, {
aTargets: [4],
sDefaultContent: 0, // if missing in JSON, defaults to 0
mRender: function ( val, type, full ) {
return '' + statuses[val] + '';
}
}, {
aTargets: [5],
mRender: function ( val, type, full ) {
return '' + val + '';
}
}],
fnDrawCallback: function( oSettings ) {
$('td .editable', oTable.fnGetNodes()).editable(function(value, settings) {
var self = this;
$.ajax({
type: "PATCH",
url: getApiUrl("/user/" + getUserid(this) + "/user_ref"),
contentType: 'application/json',
data: JSON.stringify({user:{user_ref:value}}),
}).fail(function(XHR, status, error) {
$(self).addClass('error');
$(self).text(JSON.parse(XHR.responseText).message);
});
return value;
},
{
width: "100px"
});
$('td .editable-select', oTable.fnGetNodes()).editable(function(value, settings) {
var self = this;
$.ajax({
type: "PATCH",
url: getApiUrl("/user/" + getUserid(this) + "/status"),
contentType: 'application/json',
data: JSON.stringify({user:{status_id:value}}),
}).fail(function(XHR, status, error) {
$(self).addClass('error');
$(self).text(JSON.parse(XHR.responseText).message);
});
return statuses[value];
},
{
data: statuses,
type: 'select'
});
}
});
$("#frm_create_user").submit(function() {
var formData = getFormData($("#frm_create_user"));
$.ajax({
type: "POST",
url: getApiUrl("/user"),
dataType: "json",
contentType: 'application/json',
data: JSON.stringify({user:{user_ref: formData.user_ref}}),
}).done(function(r) {
oTable.fnClearTable();
});
return false;
});
[/code]
This discussion has been closed.
Replies
Since you have server-side processing enabled, and fnClearTable is basically a client-side function (it can't wipe your database!) fnClearTable is basically useless in this context. Use fnDraw to redraw the table whenever you make a change to the data.
Allan
> Please note that this is suitable for client-side processing only - if you are using server-side processing (i.e. "bServerSide": true), then to add data, you must add it to the data source, i.e. the server-side, through an Ajax call.
Allan
Hi Allan,
I understand that fnClearTable has no effect on tables with server-side processing. But wouldn't it be good for cases like that:
I do have a dialog with a datatable and server-side processing. The data in the table is filtered by a selection I do prior showing the dialog. E.g I want to see tasks from one project in the data table. My filter is the project ID. I reuse the dialog. So calling the dialog with project ID 1 lists all tasks in this project.
Now closing the dialog and calling it with another project ID still shows the project ID 1 tasks and loads the tasks for project ID 2 in the background. But as long as the new data isn't available, the user sees the old tasks from project ID 1.
So, if I could use the fnClearTable function only on client side correctly, I could call this function when opening the dialog, empty the table and then wait for the new tasks.
At the moment I empty the tbody when opening the dialog. But due to other priorities, I do not change the related data in the table (row count is still visible for the old tasks, there is no dummy row for the no-entries-table).
So it would be great using the fnClearTable function on client side even for server-side processing.
Thank you very much!
Dirk