How to get data values of checked rows of DataTables

don2

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) {

                }
            }
        ]
    });

})

allan

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

kthorngren

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

This is from the Gyrocode checkbox plugin.

Kevin

allan

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

don2

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

kthorngren

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

don2

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?

allan

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

don2

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]);
            });

allan

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

niranjan528

It is worked for me

             var bank_table = $('#excel_table').DataTable();

                 $(bank_table.$('input[name="bank_check"]:checked').each(function () {

                    BankSelectedValues.push($(this).val());

                 }));

  #Niranjan Kumar Chowdam
#Niranjan Chowdam
 #Niranjan C