Pages

HTML Data tables all options example

 

                <table id="basic-datatable-Users" class="table table-striped dt-responsive nowrap w-100">

                            <thead>

                                <tr>

                                    <th>Name</th>

                                    <th>Phone</th>

                                    <th>Email</th>

                                    <th>Role</th>

                                    <th>HRIS No</th>

                                    <th>Bar Code</th>

                                    <th>Supervisor</th>

                                    <th>User Skill</th>

                                    <th>Is Active</th>

                                    <th>Action</th>

                                </tr>

                            </thead>



                            <tbody>

                                @foreach (var user in Model.Users)

                                {

                                    <tr>

                                        <td>

                                            @user.FullName

                                        </td>


                                        <td>@user.PhoneNumber</td>

                                        <td>@user.Email</td>

                                        <td>@user.RoleName</td>

                                        <td>@user.HrisNo</td>

                                        <td>@user.BarCode</td>

                                        <td>@user.Supervisor</td>

                                        <td>@user.UserSkill</td>

                                        <td>

                                            @if (user.IsActive == true)

                                            {

                                                <div class="form-check form-switch">

                                                    <input data-toggle="ajax-modal" type="checkbox" checked disabled class="form-check-input">

                                                </div>

                                            }

                                            else

                                            {

                                                <div class="form-check form-switch">

                                                    <input data-toggle="ajax-modal" type="checkbox" disabled class="form-check-input">

                                                </div>

                                            }

                                        </td>

                                        <td>

                                            <a href="/user/details?id=@user.Id" type="button" title="User Edit" class="btn btn-sm btn-soft-primary rounded-pill">

                                                <i class="mdi mdi-account-edit-outline"></i>

                                            </a>

                                            <button type="button" title="Deactivate" class="btn btn-sm  btn-soft-primary rounded-pill" data-bs-toggle="modal" data-id="@user.Id" onclick="OpenUserDeleteSubmit(this);">

                                                <i class="mdi mdi-delete"></i>

                                            </button>


                                        </td>

                                    </tr>

                                }


                            </tbody>

                            <tfoot>

                                <tr>

                                    <th>Name</th>

                                    <th>Phone</th>

                                    <th>Email</th>

                                    <th>Role</th>

                                    <th>HRIS No</th>

                                    <th>Bar Code</th>

                                    <th>Supervisor</th>

                                    <th>User Skill</th>

                                    <th>Is Active</th>

                                    <th>Action</th>

                                </tr>

                            </tfoot>

                        </table>



<!-- Datatables css -->

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css" />

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.6.2/css/select.dataTables.min.css" />

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />

<style>

    div.dataTables_wrapper {

        width: 100%;

        margin: 0 auto;

    }


    .dt-button.buttons-excel{

        background: #727cf5;

        color:#fff;

        border:0;

    }

    thead input {

        width: 100%;

        border:1px solid #ededed;

    }

</style>



@section Scripts {

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/select/1.6.2/js/dataTables.select.min.js"></script>





    <script>


        $(document).ready(function () {

            $('#basic-datatable-Users thead tr')

                .clone(true)

                .addClass('filters')

                .appendTo('#basic-datatable-Users thead');


                ///


                ///


            $("#basic-datatable-Users").DataTable({

                orderCellsTop: true,

                dom: 'Bfrtip',

                scrollX: true,  

                responsive : true,

                buttons: [{

                    extend: 'excelHtml5',

                    exportOptions: {

                        columns: [1, 2, 3, 4, 5, 6, 7, 8, 9]

                    }

                }

                ],

                select: {

                    style: 'multi'

                },

                keys: !0,

                language: {

                    paginate: {

                        previous: "<i class='mdi mdi-chevron-left'>",

                        next: "<i class='mdi mdi-chevron-right'>"

                    }

                },

                drawCallback: function () {

                    $(".dataTables_paginate > .pagination").addClass("pagination-rounded")

                },

                //clear autocomplete

                initComplete: function () {


                    var api = this.api();


                    // Define the columns that require filters

                    var filterColumns = [1, 2, 3, 4];


                    // For each column

                    api.columns().eq(0).each(function (colIdx) {

                        var cell = $('.filters th').eq($(api.column(colIdx).header()).index());


                        if (filterColumns.includes(colIdx)) {

                            // Set the header cell to contain the input element

                            var title = $(cell).text();

                            $(cell).html('<input type="text" placeholder="' + title + '" />');


                            // On every keypress in this input

                            $('input', cell)

                                .off('keyup change')

                                .on('change', function (e) {

                                    // Get the search value

                                    $(this).attr('title', $(this).val());

                                    var regexr = '({search})';


                                    var cursorPosition = this.selectionStart;

                                    // Search the column for that value

                                    api

                                        .column(colIdx)

                                        .search(

                                            this.value != ''

                                                ? regexr.replace('{search}', '(((' + this.value + ')))')

                                                : '',

                                            this.value != '',

                                            this.value == ''

                                        )

                                        .draw();

                                })

                                .on('keyup', function (e) {

                                    e.stopPropagation();


                                    $(this).trigger('change');

                                    $(this)

                                        .focus()[0]

                                        .setSelectionRange(cursorPosition, cursorPosition);

                                });

                        } else {

                            // Empty the header cell

                            $(cell).empty();

                        }

                    });


                    $(this.api().table().container()).find('input[type="search"]').parent().wrap('<form>').parent().attr('autocomplete', 'off').css('overflow', 'hidden').css('margin', 'auto');


                }

            });

        });


        /////



    </script>




}


No comments:

Post a Comment

Search This Blog