Best approach for handling actions in AJAX table without jQuery

tacman1123

I'd like to generate a few buttons on each row of an ajax-powered datatable. For example, a delete icon that dispatches an ajax delete event and immediately removes the row from the table. A quick-view button that pops up a modal window that shows the details, and an edit button that allows the user to edit some fields.

So my row render is basically along the lines of

            str = `<button class="action" data-action="delete">(delete icon)</button
           return str;

I want to add listeners for these buttons. Most importantly, I need the row.id so I know which row to delete.

        let dt = new DataTable(el, {...}); // where el is a DOM element

        dt.on('click', 'tr td button.transition',  ($event) => {
            console.log($event.currentTarget);
            var data = dt.row( $event.currentTarget.closest('tr') ).data();
            console.log(data, $event);
        });

Where should I be adding the listeners? And is there a way to do the above without jQuery? That is, when a button within a row is clicked on, what is the proper way to delete it and pass the id to another event (making an ajax call to delete it, and when that call finishes, I'll update a status somewhere on the page).

Thanks.

kthorngren

You might need to change button.transition to button.action.

That is, when a button within a row is clicked on, what is the proper way to delete it

Use row().remove().

pass the id to another event (making an ajax call to delete it, and when that call finishes

If you are using rowId you can use row().id(). You can then send the id in the XMLHttpRequest.. Then in the onreadystatechange function you cn use row().delete() to delete the row of the server successfully deleted the row.

Maybe I'm misunderstanding your questions. Might help to have a test case to seee what you are doing and trying to accomplish.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

tacman1123

Thanks. My example wasn't very clear, I'm trying to make an ajax call to delete the row, which is a method in my class.

Here's the psuedo-code that works, but it's so ugly I'm hoping there's a better way.

class myClass ..
    constructor() {
        this.that = this; // so delete() can be called later.
    }
    delete(id) { axios..., on success remove the row from the datatable }

    let dt = new DataTable(el...).
     dt.on('click', 'tr td button.delete',  ($event) => {
            let target = $event.currentTarget;
            var data = dt.row( target.closest('tr') ).data();
            this.that.delete(data.id);
    });
}

What I'd like to do is simply call this.delete from inside my click handler, but also have access to the underlying dt row, both to get the data and to remove the row from the datatable when the server reports that the row has been deleted from the database.

My confusion is one of scope -- if I add a listener to the DOM with vanilla javascript, I don't know how to get the datatable row and data, if I add a listener to the datatable I don't know how to access the rest of my class without a that = this pattern. I'd like to avoid $(this), as I find that even more confusing, and I'd like to avoid jQuery.

Also, it feels odd to have dt.on have a click handler that includes a reference to dt. Maybe that's okay?

Thanks.

kthorngren

Maybe this DOM events without jQuery example will help.

Kevin

allan

If you must use fat arrow syntax, then yes, the method you have used is correct. You could use this.delete(...) on line 11 though since this.that === this in that context.

Also, it feels odd to have dt.on have a click handler that includes a reference to dt.

I don't think I've seen it before either, and had to check that it would actually work. It does thanks to the magic of jQuery!

Allan