Modal is working on only first 10 rows of the datatable

sedategoofi

Hi.

First of all i appreciate and admire the work by the team for this support and providing the useable datatable.
Thmbs up!

I am using datatable api, All the functions I want to use are working properly except one issue.

While connecting my link in a row of the datatable to modal class, only first rows are responding for the modal and displaying it properly, rest of the rows from 11 to end whatever the number is not showing modal.

My code for the function of scrolling and search is as follows.

$(document).ready(function() {
var table = $('#example').DataTable({

    scrollX: true,

    "scrollY": "350px",
    "scrollCollapse": true,
    "paging": true,




    initComplete: function() {
        $('div.dataTables_scrollHeadInner thead tr#filterboxrow th').each(function() {
            $(this).html('<input id="input' + $(this).index() +
                    '" type="text" class="form-control" placeholder="filter by ' + $(
                        this).text() + '" />')
                .css('padding-left', '4px');
            $(this).on('keyup change', function() {
                var val;

                if ($(this).index() === 0) {
                    val = $('.DTFC_Cloned #input' + $(this).index()).val();
                } else {
                    val = $('#input' + $(this).index()).val();
                }

                table.column($(this).index()).search(val).draw();
            });
        });
    }
});

});

Function for modal I am using following:

$(document).ready(function() {
$('.updatestaffmodalbtn').on('click', function() {

        $('#updatestaffmodal').modal('show');

        $tr = $(this).closest('tr');
        var data = $tr.children("td").map(function() {

            return $(this).text();
        }).get();

        console.log(data);

        $('#iimsid').val(data[1]);
        $('#IMS1clientname').val(data[2]);
        $('#IMS4staffname').val(data[3]);
    });
});

Once again thank you for the forum to solve our issues and help us.
Regards

allan

$('.updatestaffmodalbtn').on('click', function() {

This is the issue. It is only finding the modals on the first page. You need to use a delated event handler as described here.

Allan