Add a checkbox as a first column

larrybg

Hello, I was looking for a solution to load data on demand (button click), and found this example here: https://datatables.net/forums/discussion/24379/load-data-in-datatable-from-ajax-through-button-click.
While everything is working great - data is loading and populating, the first column in my table is a checkbox column and I don't know how to map this column to the data that I'm receiving from the server.

HTML Table:

<table width="100%" class="table table-striped table-bordered table-hover" id="dataTable">
    <thead>
        <tr>
             <th></th>
             <th>Name</th>
             <th>IP</th>
             <th>Create-Date</th>
             <th>Expiration-Date</th>
             <th>State</th> 
             <th>UUID</th>
       </tr>
  </thead>

  <tbody>
  </tbody>
 </table>

This is my init

function initTable() {
                return $('#dataTable').DataTable({
                    //responsive: true,
                    data: [],
                    columns: [
                        { "data": "???" },  //checkbox should be here!!!
                        { "data": "vm_name" },
                        { "data": "vm_IP" },
                        { "data": "create_date" },
                        { "data": "expiration_date" },
                        { "data": "vm_state" },
                        { "data": "vm_uuid" }
                    ],
                    order : [[ 1, "asc"]],
                    columnDefs : [
                        {
                            orderable : false,
                            className : 'select-checkbox',
                            targets : 0
                        },
                    ],
                    //rowCallback: function(row, data){},
                    retrieve : true
                });
            }

this is AJAX code:

$.ajax({
                type: 'POST',
                url: "/listexpvms",
                cache: false,
                data: {
                    data: email
                },
                dataType: 'json',
                success: function( data ){
                    table.clear().draw();
                    table.rows.add(data).draw();
                },
                error: function() {
                    console.log("Something went wrong while getting list of VMs");
                }
            }); 

The data comes from a database.

kthorngren

I'm assuming you want to use the checkbox to select the row?

If so the Select extension can be used. The examples show how to use checkbox selection and the API examples show how to get the data form the selected row(s).

Kevin

larrybg

Hi Kevin,
That would be the next step - how to select the rows, but right now I need to show the first column with checkboxes. The data that I receive from the server maps to all columns of the table except the checkbox, and I don't know how to make datatable to show my data plus checkbox column.

Larry

kthorngren

If you are going to use the Select extension then it will automatically generate the checkboxes for you. Take a look at this example:
https://datatables.net/extensions/select/examples/initialisation/checkbox.html

Is this what you are looking for?

Kevin

larrybg

I've added the columnDefs and select style as it shown in the example and column in the header: <th></th> for checkbox. But I still have to keep the "columns" as it maps data that I receive to columns in the table, right?

So what do I do here:

columns: [
                        { "data": "-" }, <-------???????
                        { "data": "vm_name" },
                        { "data": "vm_IP" },
                        { "data": "create_date" },
                        { "data": "expiration_date" },
                        { "data": "vm_state" },
                        { "data": "vm_uuid" }
                    ],

Still don't have no selection, no checkboxes

kthorngren

Yes, for the first column you can use this:

columns: [
{ "data": null, defaultContent: '' },
{ "data": "vm_name" },

Kevin

larrybg

Hi Kevin!
This is better already - don't have any errors, and alert messages, but still not getting any checkboxes or selection behavior... am I missing something?

function initTable() {
                return $('#dataTable').DataTable({
                    responsive: true,
                    data: [],
                    columns: [
                        { "data": null, defaultContent: '' },
                        { "data": "vm_name" },
                        { "data": "vm_IP" },
                        { "data": "create_date" },
                        { "data": "expiration_date" },
                        { "data": "vm_state" },
                        { "data": "vm_uuid" }
                    ],
                    order : [[ 1, "asc"]],
                    columnDefs : [
                        {
                            orderable : false,
                            className : 'select-checkbox',
                            targets : 0
                        },
                    ],
                    retrieve : true,
                    select: {
                        style: 'os',
                        selector: 'td:first-child'
                    }
                });
            }

kthorngren

Did you load the select JS and CSS files?

The download builder will help with this:
https://datatables.net/download/index

Kevin

larrybg

Hi Kevin!
Yes! That definitely helped! Now I have the selection functionality and checkbox column!
Moving on to the next step - need to collect "uuid" data from selected rows ("uuid" column will be hidden) and send them back to the server to delete from database.