tethys/resources/views/settings/page/index.blade.php

@extends ('settings.layouts.app') 
@section ('title', trans('labels.backend.pages.management')) {{-- 
@section('page-header')
<h2>{{ trans('labels.backend.pages.management') }}</h1>
@endsection
 --}} 
@section('content')
    <div class="box box-info">

        <div class="box-header with-border header">
            <h3 class="header-title">
                <i class="fas fa-file-signature"></i> {{ trans('labels.backend.pages.management') }}
            </h3>
            <div class="box-tools pull-right">
                {{--
    @include('backend.pages.partials.pages-header-buttons') --}}
            </div>
        </div>

        <div class="box-body pure-g box-content">
            <div class="table-responsive data-table-wrapper pure-u-1 pure-u-md-1">
                <table id="pages-table" class="table table-condensed table-hover table-bordered pure-table pure-table-horizontal">
                    <thead>
                        <tr>
                            <th>{{ trans('labels.backend.pages.table.title') }}</th>
                            <th>{{ trans('labels.backend.pages.table.status') }}</th>
                            <th>{{ trans('labels.backend.pages.table.createdat') }}</th>
                            <th>{{ trans('labels.backend.pages.table.createdby') }}</th>
                            <th>{{ trans('labels.general.actions') }}</th>
                        </tr>
                    </thead>
                    <thead class="transparent-bg">
                        <tr>
                            <th>
                                {!! Form::text('first_name', null, ["class" => "search-input-text form-control", "data-column" => 0, "placeholder" => trans('labels.backend.pages.table.title')])
                                !!}
                                <a class="reset-data" href="javascript:void(0)"><i class="fa fa-times"></i></a>
                            </th>
                            <th>
                                {!! Form::select('status', [0 => "InActive", 1 => "Active"], null, ["class" => "search-input-select form-control", "data-column"
                                => 1, "placeholder" => trans('labels.backend.pages.table.all')]) !!}
                            </th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!--table-responsive-->
        </div>
        <!-- /.box-body -->
    </div>
    <!--box-->
@endsection
 
@section('after-scripts') {{-- For DataTables --}} {{ Html::script(mix('js/dataTable.js')) }}

    <script>
        $(function() {
            var dataTable = $('#pages-table').dataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    headers: {
                        'CSRFToken': document.head.querySelector('meta[name="csrf-token"]').content
                    },
                    url: '{{ route("settings.page.get") }}',
                    type: 'get'
                },
                columns: [
                    {data: 'title', name: 'title'},
                    {data: 'status', name: 'status'},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'created_by', name: 'first_name'},
                    {data: 'actions', name: 'actions', searchable: false, sortable: false}
                ],
                order: [[1, "asc"]],
                searchDelay: 500,
                dom: 'lBfrtip',
                buttons: {
                    buttons: [
                        { extend: 'copy', className: 'copyButton',  exportOptions: {columns: [ 0, 1, 2, 3 ]  }},
                        { extend: 'csv', className: 'csvButton',  exportOptions: {columns: [ 0, 1, 2, 3 ]  }},
                        { extend: 'excel', className: 'excelButton',  exportOptions: {columns: [ 0, 1, 2, 3 ]  }},
                        { extend: 'pdf', className: 'pdfButton',  exportOptions: {columns: [ 0, 1, 2, 3 ]  }},
                        { extend: 'print', className: 'printButton',  exportOptions: {columns: [ 0, 1, 2, 3 ]  }}
                    ]
                }
            });

            var Backend = {}; // common variable used in all the files of the backend          
            Backend = {    

                DataTableSearch: { //functionalities related to datable search at all the places
                    selector: {},

                    init: function (dataTable) {

                        this.setSelectors();
                        this.setSelectors.divAlerts.delay(2000).fadeOut(800);
                        this.addHandlers(dataTable);

                    },
                    setSelectors: function () {
                        this.selector.searchInput = document.querySelector("div.dataTables_filter input");
                        this.selector.columnSearchInput = document.querySelectorAll(".search-input-text");
                        this.selector.columnSelectInput = document.querySelectorAll(".search-input-select");
                        this.selector.restButton = document.querySelectorAll('.reset-data');
                        this.setSelectors.copyButton = document.getElementById("copyButton");
                        this.setSelectors.csvButton = document.getElementById("csvButton");
                        this.setSelectors.excelButton = document.getElementById("excelButton");
                        this.setSelectors.pdfButton = document.getElementById("pdfButton");
                        this.setSelectors.printButton = document.getElementById("printButton");
                        this.setSelectors.divAlerts = jQuery('div.alert').not('.alert-important');

                    },
                    cloneElement: function (element, callback) {
                        var clone = element.cloneNode();
                        while (element.firstChild) {
                            clone.appendChild(element.lastChild);
                        }
                        element.parentNode.replaceChild(clone, element);
                        Backend.DataTableSearch.setSelectors();
                        callback(this.selector.searchInput);
                    },
                    addHandlers: function (dataTable) {
                        // get the datatable search input and on its key press check if we hit enter then search with datatable
                        this.cloneElement(this.selector.searchInput, function (element) { //cloning done to remove any binding of the events
                            element.onkeypress = function (event) {
                                if (event.keyCode == 13) {
                                    dataTable.fnFilter(this.value);
                                }
                            };
                        }); // to remove all the listinerers

                        // for text boxes
                        //column input search if search box on the column of the datatable given with enter then search with datatable
                        if (this.selector.columnSearchInput.length > 0) {
                            this.selector.columnSearchInput.forEach(function (element) {
                                element.onkeypress = function (event) {
                                    if (event.keyCode == 13) {
                                        var i = element.getAttribute("data-column"); // getting column index
                                        var v = element.value; // getting search input value
                                        dataTable.api().columns(i).search(v).draw();
                                    }
                                };
                            });
                        }


                        // Individual columns search
                        if (this.selector.columnSelectInput.length >> 0) {
                            this.selector.columnSelectInput.forEach(function (element) {
                                element.onchange = function (event) {
                                    var i = element.getAttribute("data-column"); // getting column index
                                    var v = element.value; // getting search input value
                                    dataTable.api().columns(i).search(v).draw();
                                };
                            });
                        }

                        // Individual columns reset
                        if (this.selector.restButton.length >> 0) {
                            this.selector.restButton.forEach(function (element) {
                                element.onclick = function (event) {
                                    var inputelement = this.previousElementSibling;
                                    var i = inputelement.getAttribute("data-column");
                                    inputelement.value = "";
                                    dataTable.api().columns(i).search("").draw();
                                };
                            });
                        }

                        /*this.setSelectors.copyButton.onclick = function (element) {
                            document.querySelector(".copyButton").click();
                        };
                        this.setSelectors.csvButton.onclick = function (element) {
                            document.querySelector(".csvButton").click();
                        };
                        this.setSelectors.excelButton.onclick = function (element) {
                            document.querySelector(".excelButton").click();
                        };
                        this.setSelectors.pdfButton.onclick = function (element) {
                            document.querySelector(".pdfButton").click();
                        };
                        this.setSelectors.printButton.onclick = function (element) {
                            document.querySelector(".printButton").click();
                        };*/
                    }

                }
            };

            Backend.DataTableSearch.init(dataTable);
      

        });
    </script>
@endsection