datatables multiple checkbox

Question

I found the next code for generating multiple checkboxes inside datatable and its works great:

https://jsfiddle.net/snqw56dw/

var table = $('#example').DataTable({
      'ajax': 'https://api.myjson.com/bins/1us28',
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true
            }
         }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[1, 'asc']]
});

But when I try to change the code to work with static table data (changed that data will not come from Ajax) its stopped working..

Here is my code:

https://jsfiddle.net/snqw56dw/3158/

var table = $('#example').DataTable({     
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true
            }
         }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[1, 'asc']]
});

I would love to get your help and understand what I'm doing wrong there..

Thanks

Answer 1

You need to have unique data in the column containing checkboxes - 1, 2, 3, etc.

See updated example for code and demonstration.

Answer 2

As per DataTable Document:

DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded data as well as for server-side processing).

You can read full document here: https://www.ksia.or.kr/plugin/DataTables-1.10.15/examples/server_side/ids.html

For static record, you can do it this way: https://jsfiddle.net/cwvr7kba/1/

$(document).ready(function() {
    var table = $('#example').DataTable({
        'columnDefs': [{
            'targets': 0,
            'checkboxes': {
                'selectRow': true
            }
        }],
        'select': {
            'style': 'multi'
        },
        'fnCreatedRow': function(nRow, aData, iDataIndex) {
            $(nRow).attr('data-id', aData.DT_RowId); // or whatever you choose to set as the id
            $(nRow).attr('id', 'id_' + aData.DT_RowId); // or whatever you choose to set as the id
        },
        'order': [
            [1, 'asc']
        ]
    });
    // Handle form submission event 
    $('#frm-example').on('submit', function(e) {
        var form = this;


        var rows = $(table.rows({
            selected: true
        }).$('input[type="checkbox"]').map(function() {
            return $(this).prop("checked") ? $(this).closest('tr').attr('data-id') : null;
        }));
        //console.log(table.column(0).checkboxes.selected())
        // Iterate over all selected checkboxes
        rows_selected = [];
        $.each(rows, function(index, rowId) {
            console.log(rowId)
            // Create a hidden element 
            rows_selected.push(rowId);
            $(form).append(
                $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'id[]')
                .val(rowId)
            );
        });

        // FOR DEMONSTRATION ONLY
        // The code below is not needed in production

        // Output form data to a console     
        $('#example-console-rows').text(rows_selected.join(","));

        // Output form data to a console     
        $('#example-console-form').text($(form).serialize());

        // Remove added elements
        $('input[name="id\[\]"]', form).remove();

        // Prevent actual form submission
        e.preventDefault();
    });
});