stop event execution on datatable pagination click

Question

I have an inline datatable, when I change the data in datatable and click on next page I need to show bootstrap modal. if click on yes the data should be saved and it should show next page in datatable. When I click on no it should stay on the same page Now, the problem is without clicking on yes/no buttons in datatable it is going to next page without waiting for user response. It should stay on the same page. I have tried the following to stop the event execution.

e.preventDefault()
e.stopPropogation()
e.stopImmediatePropogation()

The above events are not working. Your help is much appreciated.Thanks in advance.

Mamun Sardar · Accepted Answer · 2018-07-24 11:27:09Z

2

You should use preDraw event because data can be lost on pagination or on sort also. Also make sure that you are on latest datatable version 1.10.19. Doc: https://datatables.net/reference/event/preDraw

var table = $('#example').DataTable();
table.on( 'preDraw', function (e, settings) {
    if(!confirm('Leave?')) {
        return false;
    }
});

jsfiddle: http://jsfiddle.net/ebRXw/6258/

Check all the events available: https://datatables.net/reference/event/

You can also combine order and page event. Something like:

var table = $('#example').DataTable();
table.on( 'order.dt', myConfirm);
table.on( 'page.dt', myConfirm);

function myConfirm(e, settings) {
    if(!confirm('Leave?')) {
        return false;
    }
}

edited Jul 24, 2018 at 11:27

answered Jul 24, 2018 at 7:46

Mamun Sardar

2,7294 gold badges38 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

raj Over a year ago

the above code is able to stop the execution, but when we change data in grid I'm appending a class name to particular row. when we click on yes in popup I'm not able to get the edited rows because of preDraw event.

raj · Accepted Answer · 2018-08-02 12:38:36Z

0

I got the solution for this answer in datatables.net forum.

var table=$('#grid').datatable();
table.settings()[0].jqXHR.abort();

It will abort the ajax request.

answered Aug 2, 2018 at 12:38

raj

231 silver badge7 bronze badges

Collectives™ on Stack Overflow

stop event execution on datatable pagination click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related