Pages

Jquery Data Tables Complete essential Example

 <pre>                  

  <table id="basic-datatable" class="display table-bordered nowrap table table-striped table-sm" style="font-size:12px;">

                            <thead>

                                <tr>

                                    <th>Action</th>

                                    <th>Employee ID</th>

                                    <th>Employee Name</th>

                                    <th>Designation</th>

                                    <th>Start Day/Time</th>

                                    <th>Meter Reading</th>

                                    <th>Start Remarks</th>

                                    <th>End Day/Time</th>

                                    <th>Meter Reading</th>

                                    <th>End Remarks</th>

                                    <th>Attachments</th>

                                    

                                </tr>


                            </thead>



                            <tbody>

                                @foreach (var item in Model)

                                {

                                    <tr class="align-middle">


                                        <td class="text-nowrap text-end">


                                            <a class="btn btn-link p-0" href="~/DayInOut/ShowMapRoute?id=@item.Session" data-bs-toggle="tooltip" data-bs-placement="top" title="View Route" onclick="GetRouteById(@item.Session)">

                                                <i class="mdi mdi-archive-edit"></i>

                                            </a>


                                        </td>

                                        <td class="text-nowrap fw-bold">

                                            <span title="@item.Client" class="d-inline-block text-truncate" style="max-width: 100px;"> E10001</span>

                                        </td>

                                        <td class="text-nowrap">

                                            <span title="@item.Client" class="d-inline-block text-truncate" style="max-width: 100px;"> Tharaka Jayampathi </span>

                                        </td>

                                        <td class="text-nowrap">DivisionalCodinator</td>


                                        <td class="text-nowrap fw-bold">


                                            @if (item.DayStart.HasValue)

                                            {

                                                @item.DayStart.Value.ToString("M/d/yyyy")


                                                <br>


                                                @item.DayStart.Value.ToString("h:mm:ss tt")

                                            }

                                            else

                                            {

                                                <p>???</p>

                                            }


                                        

                                        <td class="text-nowrap">@item.StartMileage </td>

                                        <td class="text-nowrap">@item.DayStartRemark </td>


                                        <td class="text-nowrap fw-bold">

                                                @if (item.DayEnd.HasValue)

                                                {

                                                    @item.DayEnd.Value.ToString("M/d/yyyy")


                                                <br>


                                                    @item.DayEnd.Value.ToString("h:mm:ss tt")

                                                }

                                                else

                                                {

                                                <p>???</p>

                                                }

                                        </td>

                                        <td class="text-nowrap">@item.EndMileage </td>

                                        <td class="text-nowrap">@item.DayEndRemark </td>


                                        <td class="text-nowrap">

                                                @if (item.DayStartAttachment != "" && item.DayStartAttachment != null)

                                                {



                                                <a title="Start" style="  border: 1px solid #dedede; margin-right: 5px;" class="btn px-2  btn-success btn btn-sm" target="_blank" href="@item.DayStartAttachment" download>

                                                    <i class="far fa-file-image"></i>

                                                </a>


                                                }


                                                @if (item.DayEndAttachment != "" && item.DayEndAttachment != null)

                                                {


                                                <a title="End" style="    border: 1px solid #dedede; margin-right: 5px;" class="btn px-2 btn-danger btn btn-sm" target="_blank" href="@item.DayEndAttachment" download>

                                                    <i class="far fa-file-image"></i>

                                                </a>


                                                }

                                        </td>


                                    </tr>

                                }

                            </tbody>


                            <tfoot>

                                <tr>

                                    <th>Action</th>

                                    <th>Employee ID</th>

                                    <th>Employee Name</th>

                                    <th>Designation</th>

                                    <th>Start Day/Time</th>

                                    <th>Meter Reading</th>

                                    <th>Start Remarks</th>

                                    <th>End Day/Time</th>

                                    <th>Meter Reading</th>

                                    <th>End Remarks</th>

                                    <th>Attachments</th>


                                </tr>


                            </tfoot>


                        </table>

@section Styles {

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

        }


        thead input {

            width: 100%;

        }

    </style>


}






@section Scripts{



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

            // Setup - add a text input to specific footer cells

            $('#basic-datatable thead tr')

                .clone(true)

                .addClass('filters')

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


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

                orderCellsTop: true,

                dom: 'Bfrtip',

                scrollX: true,

                buttons: [{

                    extend: 'excelHtml5',

                    exportOptions: {

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

                    }

                }

                ],

                select: {

                    style: 'multi'

                },

                initComplete: function () {

                    var api = this.api();


                    // Define the columns that require filters

                    var filterColumns = [1, 2, 3, 4, 5, 6, 7, 8];


                    // 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();

                        }

                    });

                },

            });

        });

    </script>


</pre>  

No comments:

Post a Comment

Search This Blog