Delete specific row from DataTables

Ting

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!

allan

Can you remove the location.reload() please? That shouldn't be required.

Allan

Ting

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?

allan

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

Ting

Hello Allan,

Here is the revised, thanks
http://bioinfo.cs.ccu.edu.tw/Crab/question.php

Ting

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.

allan

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 the alert().

Also it looks like you've disabled right click on the page, so debugging it isn't as easy as it could be :-).

Allan

Ting

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.

allan

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!

oTable.on('click','tr',function() {
    ...
    $('#btnDelete').click( function () {           
       ...

Move the #btnDelete click handler outside of the tr event handler!

Allan

Ting

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.

allan

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 click event 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

Ting

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.

Ting

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.