Ajax with dataTables and another plugin.
Ajax with dataTables and another plugin.
xtremer360
Posts: 84Questions: 2Answers: 0
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/
http://jsfiddle.net/xtremer360/9hreh/
This discussion has been closed.
Replies
I'm actually using the datatables-editable plugin for datatables, which makes the process much easier to implement.
Allan
[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]
I'm not sure I understand what the problem is.
you also have some code on the server side to delete from the database, right?
but how do I know what row number to put for the row number
(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]
[code]
var oTable;
$(document).ready(function() {
oTable = $('#contentPagesPageList').dataTable( {
"sDom": 'rti<"pagination"p>',
"iDisplayLength": 10,
"sPaginationType": "full_numbers"
} );
// ....
[/code]
http://pastebin.com/j3S5Ap5c
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]
your push code works,
[code]
console.log(dataString);
> contentPageArray=1,2&deleteContentPagesArray=True
[/code]
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]