how can I get the selected row [Checkbox ticked rows] from the js datatable, Please helpRSS

1 reply

Last post Nov 18, 2019 08:06 AM by yij sun

‹ Previous Thread|Next Thread ›

Shortcuts

polachan

Member

296 Points

1027 Posts

how can I get the selected row [Checkbox ticked rows] from the js datatable, Please help

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

I am trying to get the all the DepotNo from the rows having the checkbox selected in the datatable into the function LockDepot(), When I click the button submitButton , the Selected Depot no should be shown into a variable in to the function LockDepot() , Please help

Please help

 <button type="button" name="submitButton" value="Open" class="btn btn-primary form-control"
                                onclick="LockDepot()">
                            Close Depots
                        </button>

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


    $(document).ready(function () {
        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": 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);
        });


        $('#DepotTable 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;
                }
            }
        });

        $('#BreakDownLogLock').on('submit', function (e) {
            debugger;
            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)
                        );
                    }
                }
            });
        });
    }

    function LockDepot() {


    }

yij sun

Member

290 Points

110 Posts

Re: how can I get the selected row [Checkbox ticked rows] from the js datatable, Please help

Nov 18, 2019 08:06 AM|yij sun|LINK

Hi polachan,

According to your description, I suggest you could checkboxs binds the click event and assigns the retrieved value to the global variable select value.Finally alert it in the function lockDepot().

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>
        var table;
        var selectvalue = "";
        $(document).ready(function () {
            GetDepotList();

        });
        function LockDepot() {
            if (selectvalue == "") {
                alert("please select a checkbox!");
            } else {
                alert(selectvalue);
            }
        }
        function GetDepotList() {
            var url = "https://api.myjson.com/bins/1us28";
            table = $('#DepotTable').DataTable({
                "processing": true,
                "ajax": {
                    "url": url,
                },
                'columnDefs': [
                    {
                        'targets': 0,
                        'checkboxes': { 'selectRow': true },
                        '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);
                selectvalue = "";
                if (this.checked) {
                    $('input[type="checkbox"]:checked:not(:first)').each(function () {
                        selectvalue += table.row($(this).closest('tr')).data()[1]+"        ";
                    });
                }
            });


            $('#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;
                    }
                }
            });

            $('#DepotTable tbody').on('click', 'input[type="checkbox"]', function () {
                selectvalue = "";
                if (!this.checked) {
                    $('#example-select-all').prop("checked", false);
                } else {
                    if ($('input[type="checkbox"]:checked').length == $('#DepotTable tbody tr').length) {
                        $('#example-select-all').prop("checked", true);
                    }
                }
                if ($('#example-select-all').prop("checked")) {
                    $('input[type="checkbox"]:checked:not(:first)').each(function () {
                        selectvalue += table.row($(this).closest('tr')).data()[1]+"       ";
                    });
                }
                else {
                    $('input[type="checkbox"]:checked').each(function () {
                        selectvalue += table.row($(this).closest('tr')).data()[1]+"       ";

                    });
                }


            })

            $('#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>



<button type="button" name="submitButton" value="Open" class="btn btn-primary form-control"
            onclick="LockDepot()">
            Close Depots
        </button>
        <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" class="checkbox" /></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>

Result:

Best Regards,

Yijing Sun

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.

‹ Previous Thread|Next Thread ›