How to show checked data in different pages of datatable on a modal

elenora

Hi. I’m using jquery datatable in serverside mode in my asp.net core 3.1 program.I’m using gyrocode checkboxes in the first column. Now what I want to do is to show all the checked rows’ data on a modal after clicking a specific button. For doing so, I have tried like the following. But the problem is if I check rows in different page, only the last checked data will be shown on the modal but if I checked multiple rows in just one page, it shows the checked rows data on the modal correctly. I appreciate if anyone helps me how to solve the issue.

<script>
    keepSelectedRows = [];
    var operationNumber = '';
    var oTable;
    var selectedIds =[];

    var theRowObject='';
    var rowSelectedId='';


    jQuery(document).ready(function ($) {


           oTable= $('#myDummyTable').DataTable({

                "serverSide": true, // for process server side
               
                "orderMulti": false,

               'columnDefs': [
                   {
                       'targets': 0,
                       "searching": false,
                       'checkboxes': {
                           'selectRow': true
                         }
                    },
                        {
                            'targets': 1,
                            "searching": false,
                            "visible": false
                        }
               ],
                rowId: "id",

                'select': {
                    'style': 'multi',
                    'selector': 'td:first-child'
                },

                "pagingType": "full_numbers",
               
            "ajax": {
                "url": "ApiApplicants/GetApiApplicantsData",
                "type": "POST",
                "datatype": "json",
            },

               "columns": [

                { "data": "id1" },
                { "data": "id", "name": "id", "autoWidth": true },
                { "data": "apiRequestNo", "name": "apiRequestNo", "autoWidth": true },
                
            ]
    });

        //-----------------------------------------------------------------------------------------

    jQuery(document).ready(function ($) {


  //#unconfirmation,

        $('#grantAccess).click(function () {

          
            $("#modalbody").empty();

                var OTable = $("#myDummyTable").dataTable();

                $("input[type=checkbox]:checked", OTable.fnGetNodes()).each(function () {


                    var row = $(this).closest('tr');

                   var tr = $(this).closest('tr').parents('tr');

                   var newRow = oTable.row(row);

                    keepSelectedRows.push(newRow);
               

                    selectedIds.push($(this).closest("tr").find("td:eq(1)").text());

                    var Id = $(this).closest("tr").find("td:eq(1)").text();
                   var ApiRequestNO = $(this).closest("tr").find("td:eq(2)").text();
                

                    var markup = "<tr><td>"+ Id + "</td><td>" + ApiRequestNO + "</td></tr>";

                   $("#classTable").append(markup);

                });

              


                $("input[name='hiddeninput']").val(selectedIds);

                if (selectedIds.length <= 1) {
                    alert("You haven't chosen any record");
                }
                else {
                    $('#showDataModal').modal('show');

                }

            });

            });

 
@*************************************@
<div class="my-5 col-sm-12 p-4">
    @*compact webgrid-table-hidden*@
    <table id="myDummyTable" class="table m-table mytable table-striped table-bordered mb-4" style="width: auto;">
        <thead>
            <tr id="headerrow">
                <th>
                    <input type='checkbox'>
                </th>
                <th hidden>
                    ID
                </th>
                <th>
                    number
                </th>
        
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<div class="row">
    <div class="col-12 d-flex justify-content-center" style="padding: 23px;">
       
        <input class="btn" id="grantAccess" type="button" value="access" data-whatever="grantAccess" style="" />
    </div>
</div>



@*******************************************************************************************@
<div class="modal fade" id="showDataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content" style="overflow:auto;">
          
            <form method="post">

                <div class="modal-body pt-0">
                    <div id="result" class="">

                        <table id="classTable" class="table table-bordered" border="1">
                            <thead>
                                <tr id="headerrow">
                                    <th>
                                        id
                                    </th>
                                    <th>
                                        number
                                    </th>
                                    
                                </tr>
                            </thead>
                            <tbody id="modalbody">
                            </tbody>

                        </table>
                    </div>

                </div>

                </div>
            </form>
        </div>
    </div>
</div>

colin

You're using serverSide, so only the data on the current page is available - everything is back on the server. That means that when you want to see data on a different page to verify the checkboxes, you can't. There's no workaround for that with serverSide,

Colin

elenora

Thanks. But gyrocode in the following link made a plugin to support checkbox usage in serverside mode
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/
and using this link, now my code keeps the checked checkboxes in different page. But I don't know how to keep the selected rows data.

elenora

I added unique id for each checkbox in datatable. I think if I can just get the id of selected row and using ajax call to fetch the related data from database, it will solve my issue. But how can I get the row id of selected data?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

See this example to get the selected rows. Since you have rowId: "id", you should be able to use row().id() or rows().id(). But this will only get the rows in the DOM.

Since you are using the Gyrocode checkboxes you can try one of that library's APIs. Since the Gyrocode Checkboxes keeps track of server side rows you might be able to get all the checkbox IDs from that library. You will need to ask the developer of that library, see the docs for links to support.

Kevin