jquery data table not working from second page

Question

I am using jquery Data table 1.9.4 and jquery 1.9.1 and i am trying to perform ajax call like this on click event.

$(".icon-trash").on('click',function () {
                // alert($(this).attr('id'));
                $.post('/WorkOrderRequest/DeleteWOR',
                        { id: $(this).attr('id') },

                        function (returndata) 
                        {

                            if (returndata.ok) 
                            {
                                window.alert(' deleted!');
                                $("#emp" + idemployee).hide('slow');
                            }
                            else {
                                window.alert(' error : ' + returndata.message);
                            }

                    });

            });

html part:

@foreach (var item in Model)
                    {

                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.ProjectCode)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.WO_Date)
                            </td>


                            <td>
                             <a  id='@(item.WO_ID)' class="icon-edit" />
                               |                               
                             <a  id='@(item.WO_ID)' class="icon-trash" />
                           </td>
                        </tr>
                    }

It is working fine on first page but from second page its not showing any result. Please help

what does second page mean? Using paging in table?

charlietfl
– charlietfl

2013-04-20 11:33:05 +00:00
Commented Apr 20, 2013 at 11:33 — charlietfl
– charlietfl, Commented Apr 20, 2013 at 11:33
yes i am using pagination in my datatable

Satendra Jindal
– Satendra Jindal

2013-04-20 11:34:24 +00:00
Commented Apr 20, 2013 at 11:34 — Satendra Jindal
– Satendra Jindal, Commented Apr 20, 2013 at 11:34

charlietfl · Accepted Answer · 2013-04-20 11:43:50Z

30

The way pagination works, rows not needed by current page are removed from the DOM. Therefore any event handlers you bind directly to those elements are lost when the html is removed.

You need to use delegation syntax of on() to bind the handler to an asset in page that is permanent. This could be the parent table or any other parent up the tree, including document

$('#TableID').on('click','.icon-trash',function () {...

API Reference: http://api.jquery.com/on/

answered Apr 20, 2013 at 11:43

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

Marcel Gruber Over a year ago

This is the best answer to this problem.

Pawan · Accepted Answer · 2017-03-16 09:21:21Z

17

If you just place your click event code above datatable code in js, it will working fine.

As example.

$(".icon-trash").on('click',function () {});

$("#TableID").datatable();

edited Mar 16, 2017 at 9:21

Pawan

1,7421 gold badge16 silver badges37 bronze badges

answered Oct 10, 2016 at 7:22

Mujtaba Ahmad

2052 silver badges10 bronze badges

2 Comments

Chris Gong Over a year ago

Good answer! The order does indeed matter, thanks a ton

McAuley Over a year ago

If the datatable ID is not bound (as in the accepted answer), then yeah, the order does matter. If you bind it, then it doesn't seem to matter where the logic goes. I've tested it both ways & they both work. Just seems safer to bind it.

Conor · Accepted Answer · 2018-05-14 07:07:43Z

1

I have the same issue and I solved it by moving the below code after I call in other code.

$('#yourTable').dataTable();

Hope it will help someone.

edited May 14, 2018 at 7:07

Conor

2,5631 gold badge16 silver badges22 bronze badges

answered Jun 13, 2017 at 6:08

harbrinder_singh

4625 silver badges7 bronze badges

Comments

Cliff Ombachi · Accepted Answer · 2018-08-21 20:11:16Z

0

This is an old question but I have faced the same problem and calling the datatable (via script below) after the js click event solves it.

$('#tableId').dataTable();

answered Aug 21, 2018 at 20:11

Cliff Ombachi

494 bronze badges

Comments

vrkansagara · Accepted Answer · 2019-03-02 06:45:32Z

0

I am using yajra datatable + laravel collection. I spent my time nearly about 2-3 hours to debug this and found solution as below.

remove quote string form pageLength parameters , It will save your time.

answered Mar 2, 2019 at 6:45

vrkansagara

6267 silver badges13 bronze badges

Comments

Borja · Accepted Answer · 2020-05-13 05:40:17Z

0

var table;

$(document).ready(function (){

    table = $('#DataTableId')
        .on('draw.dt', function () {
            yourFunction();
        })

        .DataTable();
});


var yourFunction = function (){

    $('#DataTableId select').off('change')
        .on('change', function () {

        // do whatever

    });

}

edited May 13, 2020 at 5:40

Borja

3,62125 gold badges51 silver badges51 bronze badges

answered May 13, 2020 at 5:20

zakaria joy

494 bronze badges

1 Comment

Borja Over a year ago

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn, and apply that knowledge to their own code. You are also likely to have positive feedback from users in the form of upvotes, when the code is explained.

Wicfasho · Accepted Answer · 2020-11-24 16:36:08Z

0

Use the draw callback.

Example:

$('#example').dataTable( {
    "drawCallback": function( settings ) {
        alert( 'DataTables has redrawn the table' );
    }
} );

https://datatables.net/reference/option/drawCallback

answered Nov 24, 2020 at 16:36

Wicfasho

3313 silver badges14 bronze badges

Collectives™ on Stack Overflow

jquery data table not working from second page

7 Answers 7

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related