Delete specific row from DataTables
Delete specific row from DataTables
Ting
Posts: 8Questions: 1Answers: 0
Hi,
I'm a novice with DataTables. All I wanna do is delete selected single row. The problem is when I get data of a row by clicking on that 'tr' element, and delete selected row, however, the var row = oTable.fnGetData(this); always existing in my console log data even I selected another row. If I click the row three times then the popup window will display three times. How can I select the last row only?
I'm trying to do this (Partial Code):
oTable.on('click','tr',function() {
var row = oTable.fnGetData(this);
console.log(row);
$('#btnDelete').click( function () {
bootbox.confirm("Are you sure you want to delete this job?", function(result) {
if(result == true){
console.log(row.Submission, row.Title, row.Status, google_id);
$.ajax({
type: "POST",
cache:false,
url: "deleteSubmission.php",
data: {job_id: row.Submission, title: row.Title, status: row.Status, user_id: google_id},
success: function(html){
alert(html);
table.row('.selected').remove().draw(false);
location.reload();
}
});
}
});
});
});
Here is what I have so far. (Full Code)
I appreciate any help!
This discussion has been closed.
Answers
Can you remove the
location.reload()please? That shouldn't be required.Allan
Hello Allan,
I have removed the
location.reload()from my partial code and I got the same problem. Should I add prevent event there to avoid multiple clicks?I don't really thing that will make much difference to be honest.
Could you give me a link to a running page showing the code. I don't see what would be wrong with your code there.
Allan
Hello Allan,
Here is the revised, thanks
http://bioinfo.cs.ccu.edu.tw/Crab/question.php
As my js code. I want to click at row, display a confirmation, if click okay, it will call Ajax function to delete. Instead of select multiple rows. Not sure if I didn't explain clearly.
Thanks for the link, but I'm afraid I don't understand your last statement. When I select a row and then click the "delete selected row" button, and then confirm the delete, it doesn't select any other rows.
Looking at the code on the page the Ajax submit and
table.row().remove()have been commented out. Try just using that line immediately after thealert().Also it looks like you've disabled right click on the page, so debugging it isn't as easy as it could be :-).
Allan
Hi Allan,
Thanks for your comments. I already re-enable right click on the website.
Your understanding is correct, but the problem is that when I select a row (More precisely, double click on that row or even more), and click the "Delete selected row" button then the popup window will be displayed twice or even many times.
Oh I see! Thanks for the clarification.
That's happening because you are adding the click event to the button every time you click on a row!
Move the #btnDelete click handler outside of the
trevent handler!Allan
Hi Allan,
Thanks so much for your explanation.
In my opinion, the best user experience design should select a specific row first, then press the delete button.
Instead of reverse operation. What do you think of it?
Here is the second revised, thanks.
I agree. That is how it should work. And that is how it would work if you followed my suggestion above.
The code you had was adding another
clickevent to the delete button every time you clicked on a row! You only want one event handler on that button - to delete any selected rows.Trust me. Move the delete click handler outside of the row click handler!
Allan
Hi Allan,
Thank you again for your help.
I added delete button at the end of the table row. (Link)
However, when I switch directly to the second page and subsequently click the delete button. The row can't be removed with
row().remove()API. The only first page can work normally.Any suggestions would be appreciated.
Hi Allan,
I see my problem now! Bootbox causes above problems. (Link)
Thank you, I am sorry for wasting your time on such a simple problem.