how can I add checkbox button in js Datatable

Question

User-1355965324 posted

Hi

I am  trying to give Select All button and Individual select for the datatable. My code is given below. How cam I give the checkbox column  before the first column. Please can you go through the link  https://datatables.net/extensions/select/examples/initialisation/checkbox.html. I would like to add  one checkbox button to select All and Deselect all record also  single or more than one record also  should be selected

The Above link will give  the code but I dont know how that can be applied to my code, Please anyone can help me it would be very appreciated

<div class="col-md-12 att-area">
                    <div class="table-responsive">
                        <table id="DepotTable" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Depot</th>
                                    <th>Depot Name</th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>DepotNo</td>
                                    <td>DepotName</td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                </div>

<script>
    $(document).ready(function () {
        alert("part1");
        GetDepotList();
    });

    function GetDepotList() {
        var url = "/Employee/GetDepotList";
        
       
        table = $('#DepotTable').DataTable({
            "processing": true,
            "ajax": {
                "type": "GET",
                "url": url,
                "datatype": "json",
                "dataSrc": function (json) {
                    return JSON.parse(json);
                }
            },
            "columns": [
                { "data": 'DepotNo' },
                { "data": 'DepotName' }
            ],
            order: [0, 'asc'],
            scrollY: "400px",
            scrollX: true,
            paging: false,





        });
    }
</script>

Many Thanks

Pol

Answer 1

User2053451246 posted

"columns": [
                {
                    data: null,
                    className: "select-checkbox",
                    defaultContent: "",
                    orderable: false
                }
                { "data": 'DepotNo' },
                { "data": 'DepotName' }
            ]

Add the additional column definition shown above.

You may also what to look at the other settings for select.  How I have mine is shown below.  This allows clicking in all columns except the last one to select the row.  If you only want the first column (the one with the checkbox) to select the row change the selector to "tr".

        select: {
            style: "multi+shift",
            selector: "td:not(:last-child)"
        },

EDIT: Make sure to add the column to the actual table definition as well.

EDIT: For a Select All and Select None button you need to add a buttons[] section to your code.  You also need to define where the buttons should be by defining the dom section.

buttons: [
                {
                    text: "<i class='fa fa-check-square'></i> Select All",
                    titleAttr: "Select All Visible Rows",
                    className: "btn-sm",
                    extend: "selectAll"
                },
                {
                    text: "<i class='fa fa-square'></i> Select None",
                    titleAttr: "Un-Select All Rows",
                    className: "btn-sm",
                    extend: "selectNone"
                }

],

        dom: "lBfrtip",

The buttons appear where the B is.

Answer 2

User283571144 posted

Hi polachan,

According to your description, I suggest you add <th><input type="checkbox" name="select_all" value="1" id="example-select-all" /></th> in the table as the table header. Then you could attach event handler to handle clicks on "select all" control.

More details, you could refer to below codes:

  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"> </script>
    <link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script>
    $(document).ready(function () {
        alert("part1");
        GetDepotList();
    });

    function GetDepotList() {
           var url = "https://api.myjson.com/bins/1us28";  
        table = $('#DepotTable').DataTable({
            "processing": true,
            "ajax": {
                "url": url,
            },
            'columnDefs': [
                {
                    'targets': 0,
                    'searchable': false,
                    'orderable': false,
                    'className': 'dt-body-center',
                    'render': function (data, type, full, meta) {
                        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
                    }
                }],
            order: [1, 'asc'],
            scrollY: "400px",
            scrollX: true,
            paging: false,
        });

        $('#example-select-all').on('click', function () {
            var rows = table.rows({ 'search': 'applied' }).nodes();
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
        });

       
        $('#example tbody').on('change', 'input[type="checkbox"]', function () {
            if (!this.checked) {
                var el = $('#example-select-all').get(0);
                if (el && el.checked && ('indeterminate' in el)) {
                    el.indeterminate = true;
                }
            }
        });

        $('#frm-example').on('submit', function (e) {
            var form = this;
            table.$('input[type="checkbox"]').each(function () {
                if (!$.contains(document, this)) {
                    if (this.checked) {
                        $(form).append(
                            $('<input>')
                                .attr('type', 'hidden')
                                .attr('name', this.name)
                                .val(this.value)
                        );
                    }
                }
            });
        });
    }

    </script>


<div class="col-md-12 att-area">
                    <div class="table-responsive">
                        <table id="DepotTable" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" name="select_all" value="1" id="example-select-all" /></th>
                                    <th>Depot</th>
                                    <th>Depot Name</th>

                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th>DepotNo</th>
                                    <th>DepotName</th>
                                </tr>
                            </tfoot>
                        </table>

                    </div>
                </div>

Result:

Best Regards,

Brando

Answer 3

User-1355965324 posted

Brando

I am nearly there  many thanks but I have a small issue 

I applied the code as given below. The Header checkbox <th> is not being showed as centered. it is showed left hand side of the table.   Please can you check my code please can you  help me  how to bring the checkbox button <th> as being  showed in the sames column position of check box of datarowhttps://drive.google.com/open?id=1unkID1DbQTe7Y6Fe60G8R0uRVb-6NVLO

<form id="myform" >

<div class="col-md-12 att-area">
                    <div class="table-responsive">
                        <table id="DepotTable" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" name="select_all" value="1" id="example-select-all" /></th>
                                    <th>Depot</th>
                                    <th>Depot Name</th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td></td>
                                    <td>DepotNo</td>
                                    <td>DepotName</td>
                                </tr>
                            </tbody>
                        </table>

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


<script>
    $(document).ready(function () {
        GetDepotList();
        
        //var data = table.rows('.selected').data();
    });

    function GetDepotList() {
        var url = "/Employee/GetDepotList";
        table = $('#DepotTable').DataTable({
            "processing": true,
            "ajax": {
                "type": "GET",
                "url": url,
                "datatype": "json",
                "dataSrc": function (json) {
                    return JSON.parse(json);
                }
            },
            "columns": [
                { "data": null, defaultContent: '' },
                { "data": 'DepotNo' },
                { "data": 'DepotName' }
            ],
            'columnDefs': [
                {
                    'targets': 0,
                    'searchable': false,
                    'orderable': false,
                    'className': 'dt-body-center',
                    'render': function (data, type, full, meta) {
                        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
                    }
                }],
            order: [1, 'asc'],
            scrollY: "400px",
            scrollX: true,
            paging: false,
        });

 $('#example-select-all').on('click', function () {
            var rows = table.rows({ 'search': 'applied' }).nodes();
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
        });


        $('#example tbody').on('change', 'input[type="checkbox"]', function () {
            if (!this.checked) {
                var el = $('#example-select-all').get(0);
                if (el && el.checked && ('indeterminate' in el)) {
                    el.indeterminate = true;
                }
            }
        });
        $('#myform').on('submit', function (e) {
            var form = this;
            table.$('input[type="checkbox"]').each(function () {
                if (!$.contains(document, this)) {
                    if (this.checked) {
                        $(form).append(
                            $('<input>')
                                .attr('type', 'hidden')
                                .attr('name', this.name)
                                .val(this.value)
                        );
                    }
                }
            });
        });
    }
</script>

With Many Thanks and sorry for bothering you

Pol

Answer 4

User1535942433 posted

Hi polachan,

According to your description and codes, I suggest you could check you have include the datatable’s css reference firstly.

Besides, if you have already added this reference, I suggest you could try to add some css style for the th to center the table title.

More details, you could refer to below codes:

<style>

        .table th {

    text-align: center;

    vertical-align: middle !important;

}

    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"> </script>

<%--        <link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />--%>

    <script>

        $(document).ready(function () {

            GetDepotList();

 

            //var data = table.rows('.selected').data();

        });

 

        function GetDepotList() {

           var url = "https://api.myjson.com/bins/1us28";      

        table = $('#DepotTable').DataTable({

            "processing": true,

            "ajax": {

                "url": url,

            },

                'columnDefs': [

                    {

                        'targets': 0,

                        'searchable': false,

                        'orderable': false,

                        'className': 'dt-body-center',

                        'render': function (data, type, full, meta) {

                            return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';

                        }

                    }],

                order: [1, 'asc'],

                scrollY: "400px",

                scrollX: true,

         

            paging: false,

               

            createdRow: function( row, data, dataIndex ) {

                $(row).children('td').attr('style', 'text-align: center;vertical-align: middle;');

            }

            });

 

            $('#example-select-all').on('click', function () {

                var rows = table.rows({ 'search': 'applied' }).nodes();

                $('input[type="checkbox"]', rows).prop('checked', this.checked);

            });

 

 

            $('#example tbody').on('change', 'input[type="checkbox"]', function () {

                if (!this.checked) {

                    var el = $('#example-select-all').get(0);

                    if (el && el.checked && ('indeterminate' in el)) {

                        el.indeterminate = true;

                    }

                }

            });

            $('#myform').on('submit', function (e) {

                var form = this;

                table.$('input[type="checkbox"]').each(function () {

                    if (!$.contains(document, this)) {

                        if (this.checked) {

                            $(form).append(

                                $('<input>')

                                    .attr('type', 'hidden')

                                    .attr('name', this.name)

                                    .val(this.value)

                            );

                        }

                    }

                });

            });

        }

    </script>

Result:

Best Regards,

Yijing Sun