Mr.Combet Webshell 🔥

View File Name : _Members.cshtml

@using RER_Project.BusinessLayer.BusinessService
@model List<RER_Project.DataAccess.ViewModels.MemberDetailView>
@{
    var meta = AppUserService.GetCurrent();
}
<style>
   

    /* Important part */
    .modal-dialog {
        overflow-y: initial !important
    }

    .modal-body {
        height: 450px;
        overflow-y: auto;
    }
</style>

<div class="modal-dialog width">
    <div class="modal-content" style="width:900px">
        <div class="modal-header">
            <span class="close" id="closeMember" data-dismiss="modal" aria-hidden="true">&times;</span>
            <label style="font-size:medium;"><b>Select Registered Members</b></label>
            
        </div>
        <div class="modal-body">

            <div class="table-responsive" style="margin-top: 16px;">
                <table id="example" class="footable table table-hover dataTables" data-page-size="8" data-filter=#filter>
                    <thead>
                        <tr>
                            <th>Group Name</th>
                            <th>Member Name</th>
                            <th>Age</th>
                            <th>Ethnicity</th>
                            <th>Gender</th>
                            <th>Contact No</th>
                            <th>Origin</th>
                            <th><a href="#" id="selectall">Select all</a></th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (Model.Count() > 0)
                        {
                            foreach (var item in Model)
                            {
                                <tr>
                                    <td><input type="hidden" name="GroupId" value="@item.GroupId" />@item.GroupName</td>
                                    <td><input type="hidden" name="MemberId" value="@item.Id" />@String.Concat(item.FirstName, ' ', item.LastName)</td>
                                    <td>@item.Age</td>
                                    <td><input type="hidden" name="EthnicityId" value="@item.EthnicityId" />@item.Ethinicity</td>
                                    <td>@item.GenderName</td>
                                    <td>@item.ContactNo</td>
                                    <td>@item.Origin</td>
                                    <td><input type="checkbox" class="record"></td>
                                </tr>
                            }
                        }
                        else
                        {
                            //<tr><td align="center" colspan="8">No Records Found</td></tr>
                        }

                    </tbody>
                </table>
            </div>
            <div class="row">
                <button class="btn btn-primary pull-right" id="export">Add Members</button>
            </div>
        </div>
    </div>
</div>

<link href="~/Content/plugins/dataTables/datatables.min.css" rel="stylesheet" />
<script src="~/Scripts/plugins/dataTables/datatables.min.js"></script>
<script>

    $(document).ready(function () {
        let runningTotal = 0;
        let table = $('.dataTables').DataTable({
            stateSave: true,
            fixedHeader: true,
            pageLength: 10,
            dom: '<"html5buttons"B>lTfgitp',
            buttons: [
                //{ extend: 'copy' },
                //{ extend: 'csv' },
                //{ extend: 'excel', title: 'ExampleFile' },
                //{ extend: 'pdf', title: 'ExampleFile' },
                //{
                //    customize: function (win) {
                //        $(win.document.body).addClass('white-bg');
                //        $(win.document.body).css('font-size', '10px');

                //        $(win.document.body).find('table')
                //            .addClass('compact')
                //            .css('font-size', 'inherit');
                //    }
                //}
            ]

        });
        $("#selectall").click(function () {
            if (runningTotal == table.rows().count()) {
                table.rows().every(function (rowIdx, tableLoop, rowLoop) {
                    let clone = table.row(rowIdx).data().slice(0);
                    clone[[clone.length - 1]] = '<input type="checkbox" class="record">'
                    table.row(rowIdx).data(clone);
                });
            } else {
                table.rows().every(function (rowIdx, tableLoop, rowLoop) {
                    let clone = table.row(rowIdx).data().slice(0);
                    clone[[clone.length - 1]] = '<input type="checkbox" class="record" checked="checked">'
                    table.row(rowIdx).data(clone);
                });
            }
            runningTotal = 0;
            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
                var data = this.data();
                if ($(data[data.length - 1]).prop("checked")) {
                    runningTotal++
                }
            });
            $('#dvcount').html(runningTotal);
        });
        $('#example tbody').on("click", ".record", function () {
            let clone = table.row($(this).closest('tr')).data().slice(0);
            let checkbox = clone[clone.length - 1];
            if ($(checkbox).prop("checked")) {
                clone[[clone.length - 1]] = '<input type="checkbox" class="record">'
            } else {
                clone[[clone.length - 1]] = '<input type="checkbox" class="record" checked="checked">';
            }
            table.row($(this).closest('tr')).data(clone);
            runningTotal = 0;
            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
                var data = this.data();
                if ($(data[data.length - 1]).prop("checked")) {
                    runningTotal++
                }
            });
            $('#dvcount').html(runningTotal);
        });
        $("#export").on("click", function () {
            let exportedRows = [];
            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
                let data = table.row(rowIdx).data()
                if ($(data[data.length - 1]).prop("checked")) {
                    exportedRows.push(data.slice(0, -1));
                }
            });
            addPMember(exportedRows);
            $("#closeMember").trigger("click");
        });
    });

</script>