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

  • Question

  • User-1355965324 posted

    Hi

    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() {
    
    
        }

    Friday, November 15, 2019 9:56 AM

Answers

  • User1535942433 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 18, 2019 8:06 AM