CODEWITHSUNDEEP
javascriptjquerydatatable
Arun Srivastava
Arun Srivastava

Reputation: 35

jquery datatable not reset after deleting last record from a page

I am working with jQuery datatable with state save: true having pagination with 10 records per page. I have 31 records, so on 4th page there is only 1 record.

If I am deleting this record it shows no record found on page, ideally it should move to previous page or first page.

Please help me fixing this.

below is the code

dataTable = $('.tab-pane.active').find('#' + table).DataTable({
                "lengthMenu": [[10, 25, 50, 100, 250, 500, '-1'], [10, 25, 50, 100, 250, 500, 'All']],
                "processing": true,
                "serverSide": true,
                "responsive": true,
                "scrollX": true,
                "autoWidth": false,
                "stateSave": true,
                "stateSaveParams": function (settings, data) {
                    data.search.search = "";
                },
                "aoColumnDefs": [
                    {'bSortable': false, 'aTargets': [-2, -1]}
                ],
                "initComplete": function ( ) {
                    $('.overlay').fadeOut();
                },
                "ajax": {
                    url: MY_URL,
                    type: "POST", // method  , by default get
                    data: postObj
                }
            }).on('preXhr.dt', function (e, settings, data) {
                if (settings.jqXHR)
                    settings.jqXHR.abort();
            });

And action to delete is 

academic_master.deleteMaster = function (currentClick)
        {
            var id = currentClick.attr('data-id');
            var delete_id = currentClick.attr('delete-id');
            var action = currentClick.attr('action');

            var data = 'id=' + id + '&delete_id=' + delete_id + '&action=' + action;
            $.ajax({
                type: 'POST',
                url: DELETE_URL,
                data: data,
                datatype: 'json',
                async: false,
                success: function (response) {
                    if (response != '-1' && response != '-20')
                    {
                        dataTable.ajax.reload(null, false);
}
});
}

I used to call this above function to delete record, and on success it reloads the table but on same page either if there is no record on that page.

Upvotes: 0

Views: 2537

Answers (2)

Ravi Chandran
Ravi Chandran

Reputation: 21

//create data table object

var dataTable = $('#tableView').DataTable();

//add class "selected" to the row selected

dataTable.$('tr.selected').addClass('selected');

//I have a button in one of the td of the row. onclicking the button, I assign the class "selected" to the row

$(ths).parents('tr').addClass('selected');

//to delete or remove the row, call the below code

dataTable.row('.selected').remove().draw( false );

Upvotes: 0

Harsha Jayamanna
Harsha Jayamanna

Reputation: 2258

As per the documentation, pagination doesn't reset in your approach.

// user paging is not reset on reload
dataTable.ajax.reload( null, false );

if you use below the line, your pagination would reset. But it would not move to the previous page.

dataTable.ajax.reload();

Suggestion: You would be able to improve the functionality/usability if you follow this approach https://datatables.net/examples/api/select_single_row.html

Upvotes: 1

Related Questions