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

1 reply

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

‹ Previous Thread|Next Thread ›

Shortcuts

polachan

Member

410 Points

1326 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

Contributor

3720 Points

1406 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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

‹ Previous Thread|Next Thread ›