How to get data values of checked rows of DataTables

How to get data values of checked rows of DataTables

don2don2 Posts: 24Questions: 13Answers: 0

I have a DataTables with a checkbox column on the 1st column of the DataTables, I need to get the data value of checked row, so for example:

  checkBox                 simsPid     ICCID      IMEI        
  -------------        -----------    ---------     --------------
        -                1                 18789      AABBC
        x                2                18729      A3B4C5

I need to get the data values of checked row (in my use case above, I need to get simsPid, ICCID, and IMEI)

I have tried codes below, I have got checked rows but I don't have an idea on how to get the value?

I need advice.

   $('#sims').DataTable({
        destroy: true,
        responsive: true,
        info: false,
        autoWidth: false,
        filter: true,
        lengthChange: false,
        paging: false,
        searching: true,
        order: [1, 'asc'],
        ajax: {
            url: '@Models.AppSettings.Path.Deployment' + '/SIM/List/', 
            dataSrc: ''
        },
        columns: [
            {
                'data': null,
                'defaultContent': '',
                'targets': 0,
                'checkboxes': {
                    'selectRow': true
                }
            },
            { data: 'simsPid', visible: false },
            { data: 'iccid', className: 'text-left', width: '10%', responsivePriority: 1 },
            { data: 'imei', className: 'text-left', orderable: true, width: '10%', responsivePriority: 2 }
        ],
        dom: '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
        buttons: [
            {
                text: 'Set Status',
                className: 'btn btn-outline-warning',
                action: function(e, dt, node, config) {

                    var client_table = $('#sims').dataTable();

                    var rows = $(client_table.$('input[type="checkbox"]').map(function() {
                        return $(this).prop("checked") ? $(this).closest('tr') : null;
                    }));

                    // here I got the rows, but I don't know how to get the value of simsPid. iccid, and imei

                    $.each(rows, function(index, rowId) {


                    });

                }
            },
            {
                text: 'Discard',
                className: 'btn btn-outline-secondary',
                action: function(e, dt, node, config) {

                }
            }
        ]
    });

})

Answers

  • allanallan Posts: 56,837Questions: 1Answers: 9,033 Site admin

    If you use our Select extension then you could simply do table.rows({selected: true}).data().

    If you have your own checkbox though, then you will probably need to use a custom selector function (row-selector) - perhaps something like:

    table
      .rows((idx, data, node) => {
        return $('input[type=checkbox]').is(':checked');
      }).data();
    

    One thing, I don't recognise this code:

                    'checkboxes': {
                        'selectRow': true
                    }
    

    Where did you get that from - are you using a third party extension perhaps?

    Allan

  • kthorngrenkthorngren Posts: 16,773Questions: 25Answers: 3,971

    Where did you get that from - are you using a third party extension perhaps?

    This is from the Gyrocode checkbox plugin.

    Kevin

  • allanallan Posts: 56,837Questions: 1Answers: 9,033 Site admin

    Ah! I totally didn't recognise that at all - thanks Kevin.

    In that case @don2 - you should contact Gyrocode for support with their plug-in as it isn't supported by us.

    Allan

  • don2don2 Posts: 24Questions: 13Answers: 0

    Thanks @allan

    I will try Select, could you please share the example link on how to implement checkbox with Select?, I thought I have to modify the codes if I want to use Select, please cmiiw.
    thank you so much in advance

  • kthorngrenkthorngren Posts: 16,773Questions: 25Answers: 3,971

    The Gyrocode checkboxes uses select so you can use row().data() for one row or rows().data() for multiple rows with the selector-modifier of {selected: true}. See the example in the docs.

    could you please share the example link on how to implement checkbox with Select?

    If you want to remove the Gyrocode plugin, you don't need to, you can use this example.

    Kevin

  • don2don2 Posts: 24Questions: 13Answers: 0
    edited August 12

    I have tried but it caught Cannot extend unknown button type: selected

    <script src="~/app-assets/vendors/Select-1.4.0/js/jquery-3.5.1.js"></script>
    <script src="~/app-assets/vendors/Select-1.4.0/js/jquery.dataTables.min.js"> 
    </script>
    <script src="~/app-assets/vendors/Select-1.4.0/js/dataTables.select.min.js"> 
    </script>
    
    $('#sims').DataTable({
                destroy: true,
                select: {
                    style: 'multi'
                },
                responsive: true,
                info: false,
                autoWidth: false,
                filter: true,
                lengthChange: false,
                paging: false,
                searching: true,
                order: [1, 'asc'],
    
     buttons: [
     {
                        text: 'Set Status',
                        enabled: '@Model.userRole' !== '3',
                        className: 'btn btn-outline-warning',
                        extend: 'selected',
                        action: function(e, dt, node, config) {
                            var rows = dt.rows({ selected: true }).count();
    
                            alert('There are ' + rows + '(s) selected in the table');
                        }
       ]
    

    What I did wrong?

  • allanallan Posts: 56,837Questions: 1Answers: 9,033 Site admin

    I don't see where Buttons is being loaded in your code block there. Also it is possible that the dataTables.select.min.js file isn't being loaded (a permissions error for example) which would explain it.

    We'd need a test case showing the issue to be able to help resolve it.

    Allan

  • don2don2 Posts: 24Questions: 13Answers: 0

    Hi @Allan,

    this is my full datatables codes:

     <script src="~/app-assets/vendors/Select-1.4.0/js/jquery-3.5.1.js"></script>
    <script src="~/app-assets/vendors/Select-1.4.0/js/jquery.dataTables.min.js"></script>
    <script src="~/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="~/app-assets/vendors/Select-1.4.0/js/dataTables.select.min.js"></script>
    
    
           var table = $('#sims').DataTable();
            table.rows({ selected: true }).data();
    
            $('#sims').DataTable({
                destroy: true,
                responsive: true,
                info: false,
                autoWidth: false,
                filter: true,
                lengthChange: false,
                paging: false,
                searching: true,
                select: true,
                order: [1, 'asc'],
                ajax: {
                    url: '/SIM/List/' + '@Model.hexId',
                    dataSrc: ''
                },
                columns: [
                    {
                        'data': null,
                        'defaultContent': '',
                        'targets': 0,
                        'checkboxes': {
                            'selectRow': true
                        }
                    },
                    { data: 'simsPid', visible: false },
                    { data: 'iccid', className: 'text-left', width: '10%', responsivePriority: 1 },
                    { data: 'imei', className: 'text-left', orderable: true, responsivePriority: 2 }
    
                ],
    
                dom: '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                buttons: [
    
                    {
                        text: 'Set Status',
                        enabled: '@Model.userRole' !== '3',
                        className: 'btn btn-outline-warning',
                        extend: 'selected',
                        attr: {
                            'data-bs-toggle': 'modal',
                            'data-bs-target': '#setstatus'
                        }
    
                    }
                ]
            });
    

    any I try to get the data of checked row, but no luck, I'm stuck, need help.. thank you so much in advance.

              var rows = table.rows('.selected').data();
                alert(rows.length);
                $.each(rows, function(index, rowId) {
                    var data = rows.data();
                    console.log(data);
                    console.log(data[1]);
                });
    
  • allanallan Posts: 56,837Questions: 1Answers: 9,033 Site admin

    Try table.rows({selected: true}).data() like I had in my first post. That should do it. If it doesn't please link to a test case showing the issue.

    Allan

Sign In or Register to comment.