how can I add checkbox button in js Datatable [Answered]RSS

4 replies

Last post Nov 18, 2019 07:58 AM by yij sun

‹ Previous Thread|Next Thread ›

Shortcuts

polachan

Member

301 Points

1036 Posts

how can I add checkbox button in js Datatable

Nov 14, 2019 01:57 PM|polachan|LINK

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

- Reply
ryanbesko
Contributor

7008 Points

2168 Posts
Re: how can I add checkbox button in js Datatable

Nov 14, 2019 07:13 PM|ryanbesko|LINK
```
"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.
Mark all posts that give the desired result the answer. If you only mark the last that gave you clarification because you misread an earlier post others will be confused. Some of us are here to help others and our point to post ratio matters.

Brando ZWZ

Star

9611 Points

3033 Posts

Re: how can I add checkbox button in js Datatable

Nov 15, 2019 07:44 AM|Brando ZWZ|LINK

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

polachan

Member

301 Points

1036 Posts

Re: how can I add checkbox button in js Datatable

Nov 15, 2019 09:12 AM|polachan|LINK

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

yij sun

Member

310 Points

125 Posts

Re: how can I add checkbox button in js Datatable

Nov 18, 2019 07:58 AM|yij sun|LINK

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

‹ Previous Thread|Next Thread ›