CHECKBOX IN PAGINATED DATATABLES

Hello I have problem checkbox in paginated, so I am trying choice and check data in datatables and parse value in input hidden, but in second page choice and check not working. And below this my code for solved problem checkbox in second pagination.

let your_date = your_date;

$(".div_for_dataTables").empty();
$(".id_login").val("");

$.ajax({

    method: "POST",
    url: url_nya+'folder_controller/Contoller/getData',
    data: {date_to_controller : your_date},
    success: function(res) {

        let data_nya  = $.parseJSON(res);
        alert('Data exists', 'success');
         // START TABLE
            let html_code = `<table class="table table-bordered _dataTables">`;
                html_code += `
                            <thead>
                                <tr>
                                <td>No. </td>
                                <td>Name</td>
                                <td>Option</td>
                                </tr>
                            </thead>
                            <tbody>
                            `;

            for (let i = 0; i < data_nya.length; i++) {
                // Add dataTables in here
                html_code += `
                    <tr >
                        <td>`+parseInt(1+i)+`</td>
                        <td>`+data_nya[i].name_+`</td>
                                                        <td>
                            <div class="form-check">
                            <input class="form-check-input choice_check" type="checkbox" id_login="`+data_nya[i].id_login+`" name_xxx="`+data_nya[i].name_+`" value="">
                            </div>
                        </td>
                    </tr>
                    `;

            } // END FOR
            html_code += `</tbody>`
            html_code += `</table>`;

            $(".div_for_dataTables").append(html_code);

            let tables_ = $('._dataTables').DataTable({
                                     "iDisplayLength": 5,
                                     "lengthMenu": [[5, 10, -1], [5, 10, "All"]]
                                });
            let rows = tables_.rows({ 'search': 'applied' }).nodes();

         // END TABLE

            let array_push = [];
            let array_push_id = [];
            
            $('.choice_check', rows).change(function() {

                let name   = $(this).attr('name_xxx');
                let id_login = $(this).attr('id_login');

                if($(this).is(":checked")) {
                    
                    array_push.push(" [ "+name+" ] ");
                    array_push_id.push(id_login);

                }else{

                    let index_name = array_push.indexOf(" [ "+name+" ] ");
                    let index_id_login = array_push_id.indexOf(id_login);

                    if (index > -1) {

                        array_push.splice(index_name, 1);
                        array_push_id.splice(index_id_login, 1);
                    }
                }

                $(".name_div").text(array_push);
                $("[name='id_login']").val(array_push_id);

            });
    } // END SUCCESS
                
}); // END AJAX 

And in your case, added this below code :

let tables_ = $('._dataTables').DataTable({
                 "iDisplayLength": 5,
                 "lengthMenu": [[5, 10, -1], [5, 10, "All"]]
            });

let rows = tables_.rows({ 'search': 'applied' }).nodes();

And added code rows this code on your function click checkbox :

  $('.choice_check', rows).change(function() {

Enjoy it. ^_^

TAG TAGS :

checkbox in paginated datatable || How to catch values of checkboxes that are paginated with DataTables plugin || checkbox || how to use checkbox in second pagination || DataTables langsungkoding.blogspot.com | langsungkoding |

REFERENCE :

- https://stackoverflow.com/questions/38765777/how-to-catch-values-of-checkboxes-that-are-paginated-with-datatables-plugin
- https://stackoverflow.com/questions/51030368/get-checkbox-value-datatables-pagination

Read More