Server-side Processing adding data

Fabricio_ndas

Hello,
I have two tables with profiles data and plus IMG or minus IMG in each line, the first table have profiles that the current person has, and the second table have profiles that he doesn't has.
So when i click on the - IMG it was supposed to remove current line from the first table and add it in the second table, and when I click in the + IMG it should remove current line from the second table and add it in the first table.
I've made it before but i was not using server-side processing, when I click the page save button it will get the tables data and save it in the DataBase, so the modified data are "temporary", in other words, they can be canceled, it's why I don't want to access the DB before clicking save button...

I was using fnAddData and fnDeleteRow to do that, but it doesn't work with server-side processing, is there another way to do that?
Maybe some way to use server processing to load the tables in the first time then deactivate it and use array method...

First table
[code]

//-----------------------
//grid1

oTable = $('#grid').dataTable({
"oLanguage": { "sUrl": "media/language/pt-br2.txt" },
"bJQueryUI": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "server_processing_perfis_selecionados.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
<?
print 'aoData.push( { "name": "conjunto", "value": $("#conjunto").val() } );';
?>
$.ajax({
"dataType": 'json',
"typ$e": "GET",
<?
print '"url": "server_processing_perfis_selecionados.php", ';
?>
"data": aoData,
"success": fnCallback,
});
},

"bAutoWidth": false,
"bLengthChange": true,
"sDom": '<"top"f<"clear">ip<"clear">> <"bottom"t>', /* "fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
},*/
"aoColumns": [
{ "sTitle": "PERFIL", "sWidth": "60%", "bSortable": true, "bVisible": true },
{ "sTitle": "IDLOGIN" , "sWidth": "20%", "bSortable": true, "bVisible": true },
{"sTitle": "REMOVER" , "sWidth": "20%","sClass": "center", "bSortable": false, "bVisible": true,
"sName" : "REMOVER" , "bUseRendered": false, "fnRender": function (oObj) {
return '';
}
}
],
"aaSorting": [[ 0, 'asc' ]]
});

// delete it from the first table and add it in the second table;
$('#grid tbody td img').live('click', function () {
var row = this.parentNode.parentNode;
oTable2.fnAddData(oTable.fnGetData(row));
oTable.fnDeleteRow(row);
});

[/code]


Second table
[code]

//grid 2
oTable2 = $('#grid2').dataTable({
"oLanguage": { "sUrl": "media/language/pt-br2.txt" },
"bJQueryUI": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "server_processing_perfis_todos.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
<?
print 'aoData.push( { "name": "conjuntoperfil", "value": $("#conjuntoperfil").val() } );';
?>
//aoData.push( { "name": "min", "value": $('#min').val() } );
//aoData.push( { "name": "max", "value": $('#max').val() } );
$.ajax({
"dataType": 'json',
"typ$e": "GET",
<?
print '"url": "server_processing_perfis_todos.php", ';
?>
"data": aoData,
"success": fnCallback
});
},

"bAutoWidth": false,
"bLengthChange": true,
"sDom": '<"top"f<"clear">ip<"clear">> <"bottom"t>', /* "fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
},*/
"aoColumns": [
{ "sTitle": "PERFIL", "sWidth": "80%", "bSortable": true, "bVisible": true },
{ "sTitle": "IDLOGIN" , "sWidth": "20%", "bSortable": true, "bVisible": true },
{"sTitle": "REMOVER" , "sWidth": "20%","sClass": "center", "bSortable": false, "bVisible": true,
"sName" : "REMOVER" , "bUseRendered": false, "fnRender": function (oObj) {
return '';
}
}
],
"aaSorting": [[ 0, 'asc' ]]
});

// delete it from the second table and add it in the first table;
$('#grid2 tbody td img').live('click', function () {
var row = this.parentNode.parentNode;
oTable.fnAddData(oTable2.fnGetData(row));
oTable2.fnDeleteRow(row);
});
[/code]

Thanks and regards,
Fabricio

allan

Hi Fabricio,

Given that you are using server-side processing, if you want to change the contents of the tables, you basically need to change the data on the server (remember that with server-side processing, DataTables is simply a display and event handler, it does not contain any data - that is all handled by the server).

So what I think you will need to do is send an Ajax request to the server to tell it that you want to move a row from one table to the other, flag it as such in the database, and then call fnDraw to redraw both tables with the new information.

Allan

Fabricio_ndas

Hello Allan,
Thanks for response.
I've solved my problem using an ajax call with a simplified server processing which load all data that I need and give me back an array, then I add the data from array in my table
[code]
$.ajax({
type: "POST",
url: "load_perfil.php",
dataType: 'json',
data: "acao="+$("#acao").val()+"&idlogin="+$("#conjunto").val()+"&idperfil="+$("#conjuntoperfil").val(),
async: false,
cache: false,
timeout: 5000,
error: function (xhr, ajaxOptions, thrownError){
alert('erro: ' + xhr.status + " - " + xhr.responseText);
alert("grid1");
},
success: function(msg) {
if(msg.docTotal != 0){
for(var i=0; i

allan

> I'm looking for a way to remove it permanently when using fnDeleteRow.

Don't use fnDeleteRow with server-side processing. As I mentioned before:

> if you want to change the contents of the tables, you basically need to change the data on the server

DataTables knows nothing about your server, so it can't delete the row for you. You need to do the delete and the tell the table to update (fnDraw).

Allan