Ajax with dataTables and another plugin.

xtremer360

Okay I have a few things to ask about. I've included the jsfiddle version of my working page. I have implemented dataTables as well as a jconfirmaction plugin that was written. Say for example a user clicks on the delete icon for one of the contentpages which would bring up the confirm question and when the user clicks Yes what I would like it to do is go ahead and do an ajax somehow WITH dataTables so that it deletes it out of the database but also when it comes back then it removes it from the dataTable and refilters so that it'll update the table so that instead it'd be one less row which could mean restructuring the pagination.


http://jsfiddle.net/xtremer360/9hreh/

dmolavi

Look at the code I use at http://www.modeltraintracker.com/sandbox/items.php (log in with supplied credentials).

I'm actually using the datatables-editable plugin for datatables, which makes the process much easier to implement.

allan

With the deleting from the database you would need to use $.ajax (or whatever Ajax call you want) to action the delete from the server - but on the client-side you can remove the row quite simply with fnDeleteRow ( http://datatables.net/ref#fnDeleteRow ).

Allan

xtremer360

I already have something set up. Here's the code I'm using. But how can I get it to update the number of rows in the data its showing and what not.

[code]
$('.ask').jConfirmAction( {
question : "Are you sure you want to delete the selected row?",
yesAnswer : "Yes",
cancelAnswer : "No",
onYes: function(evt) {
contentpages(evt.target);
}
} );

function contentpages(whatsThis) {
var contentPageID = $(whatsThis).parents('td').find('img').attr('id');
var dataString = 'contentPageID=' + contentPageID + '&deleteContentPage=True';
$.ajax({
type: "POST",
url: "processes/contentpages.php",
data: dataString,
success: function(data) {
if (data.errorsExist) {
} else {
$(whatsThis).parents("tr").eq(0).hide();
}
}
});
}
[/code]

fbas

you could just call fnDraw (or install the plug-in function fnStandingRedraw) if you don't mind another ajax draw on the database.

xtremer360

I tried using the oTable.fnDeleteRow( ); but that didn't work.

xtremer360

I tried fnDraw and that won't work either.

fbas

In the sandbox, fnDeleteRow(0); is working and updating the Display counts.

I'm not sure I understand what the problem is.

xtremer360

Sandbox?

fbas

jsfiddle

xtremer360

So your saying I need to do oTable.fnDeleteRow(0);?

fbas

oTable.fnDeleteRow(row_number); that's just for the client side, to remove it from the table view

you also have some code on the server side to delete from the database, right?

xtremer360

yes
but how do I know what row number to put for the row number

fbas

oTable.fnGetPosition of the row (TR) gets an integer that tells you which row number it is.
(you can also run fnGetPosition on a cell - you get an array of row, column, and column_hidden see http://www.datatables.net/ref )

[code]
function contentpages(whatsThis,oTable) {
var contentPageID = $(whatsThis).parents('td').find('img').attr('id');
var dataString = 'contentPageID=' + contentPageID + '&deleteContentPage=True';

var iRow = oTable.fnGetPosition( $(whatsThis).parents('tr').first()); // get the row index

$.ajax({
type: "POST",
url: "processes/contentpages.php",
data: dataString,
success: function(data) {
if (data.errorsExist) {
} else {
oTable.fnDeleteRow(iRow); // remove the row from the table
}
}
});
}
[/code]

fbas

oh, you can call fnDeleteRow on the TR node as well, don't need the position index

xtremer360

After copying that copy you just gave and uploading I now get a oTable is undefined.

fbas

make oTable global by declaring it outside the initialization function:

[code]
var oTable;

$(document).ready(function() {

oTable = $('#contentPagesPageList').dataTable( {
"sDom": 'rti<"pagination"p>',
"iDisplayLength": 10,
"sPaginationType": "full_numbers"
} );

// ....

[/code]

xtremer360

Here's the current code.

http://pastebin.com/j3S5Ap5c

xtremer360

I put it outside and I still got the same error.

fbas

you were passing a null value into your function as oTable

change to
[code]
function contentpages(whatsThis) {
[/code]

and I think you'll need to change the jquery TR getter
[code]
var iRow = oTable.fnGetPosition( $(whatsThis).parents('tr').get(0));
[/code]

xtremer360

Very nice!!! Works however the odd thing is what if for my array for the contentPagesArray function.

fbas

What are you asking?

your push code works,

[code]
console.log(dataString);
> contentPageArray=1,2&deleteContentPagesArray=True
[/code]

xtremer360

As of right now it deletes the items in teh array however doesn't remove the rows

fbas

oh, I see what you mean.

do much the same thing, but instead of iRow being a single number, keep an array of indexes
[code]
function contentpagesArray(whatsThis) {
var myNewArray = new Array();
var aRow = new Array();

$('input:checkbox[name="contentPages"]:checked').each(function(i) {
myNewArray.push($(this).val());
aRow.push(oTable.fnGetPosition( $(this).parents('tr').get(0)));
});
var dataString = 'contentPageArray=' + myNewArray + '&deleteContentPagesArray=True';

$.ajax({
type: "POST",
url: "processes/contentpages.php",
data: dataString,
success: function(data) {
if (data.errorsExist) {
} else {
$(whatsThis).parents("tr").eq(0).hide();
for (i in aRow) // loop over the array of row indexes
oTable.fnDeleteRow(aRow[i]);
}
}
});

}
[/code]

xtremer360

Hmm odd. It works but then it doesn't. Say I remove the top 3 it deletes all 3 in the db but it still keeps the one of the rows.

xtremer360

Why could that be?