ESG/wwwroot/BackEnd/assets/javascript/custom/BackEndTickets.js

$(document).ready(function () {
    loadDataTable();

    $("#search_btn").click(function () {
        $('#myTable').DataTable().ajax.reload();
    });

    $("#export_btn").click(function () {
        var datestr = $("#data_select").val();

        var formData = {
            ticket_type: datestr
        }



        $.redirect('/BackEndApi/ticketListXlsx', formData);
    });

    function loadDataTable() {
        var dataTables = {
            init: function init() {

                this.bindUIActions();
            },
            bindUIActions: function bindUIActions() {

                // event handlers
                this.table = this.handleDataTables();

                // add buttons
                this.table.buttons().container().appendTo('#dt-buttons').unwrap();
            },
            handleDataTables: function handleDataTables() {
                //$('#myTable').append("<tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tfoot>");
                return $('#myTable').DataTable({
                    dom: '<\'text-muted\'Bif>\n        <\'table-responsive\'trl>\n        <\'mt-4\'p>',
                    lengthChange: true,
                    lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
                    pageLength: 50,
                    buttons: [
                        //{
                        //    text: '休假設定',
                        //    action: function (e, dt, node, config) {
                        //        vacationBtnFun();

                        //    }
                        //},
                        //{
                        //    text: '新增公司行號',
                        //    action: function (e, dt, node, config) {
                        //        addBtnFun();

                        //    }
                        //}
                    ],
                    language: {
                        paginate: {
                            previous: '<i class="fa fa-lg fa-angle-left"></i>',
                            next: '<i class="fa fa-lg fa-angle-right"></i>'
                        },
                        buttons: {
                            copyTitle: 'Data copied',
                            copyKeys: 'Use your keyboard or menu to select the copy command'
                        }
                    },
                    autoWidth: false,
                    ajax: {
                        url: '/BackEndApi/ticketList',
                        type: 'POST',
                        data: function (d) {
                            Object.assign(d, {
                                ticket_type: $("#data_select").val()
                            });

                            return d;
                        },
                        dataSrc: 'tickets'
                    },
                    rowId: 'ticket_uid',
                    deferRender: true,
                    initComplete: function () {
                        $('#myTable').on('click', 'a', function () {
                            buttonClick(this);
                        });

                        $('#myTable').on('click', 'input[name="selectedRow[]"]', function () {
                            checkboxClick(this);
                        });
                    },
                    order: [[2, 'asc']],
                    info: true,
                    search: "搜尋:",
                    searching: true,
                    columns: [{ data: 'line_displayName', className: 'align-middle', orderable: false, searchable: true }, { data: 'ticket_type', className: 'align-middle' }, { data: 'ticket_createdate', className: 'align-middle text-center' }, { data: 'ticket_surveyCake', className: 'align-middle text-center' }, { data: 'ticket_checkin', className: 'align-middle text-center' },
                    { data: 'line_uid', className: 'align-middle text-left' }],
                    columnDefs: [
                        //{
                        //    targets: 0,
                        //    className: 'align-middle',
                        //    orderable: false,
                        //    searchable: false,
                        //    render: function render(data, type, row, meta) {

                        //        return "";
                        //        //var editRet = '<a id="table-btn" class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="edit" data-uid="' + row.quotation_serial + '"><i class="fa fa-pencil-alt"></i></a>          <a id="table-btn" class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="setting" data-uid="' + row.quotation_serial + '"><i class="fas fa-cog"></i></a>';

                        //        //if (row.quotationUser_perm == "A" || row.quotationUser_perm == "D" || row.quotationUser_perm == "admin" || row.quotationUser_perm == "pro") {
                        //        //    editRet = editRet + '          <a  id="table-btn" class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="del" data-uid="' + row.quotation_serial + '"><i class="far fa-trash-alt"></i></a>';
                        //        //}
                        //        //return editRet;
                        //    }
                        //}, {
                        //    targets: 1,
                        //    orderable: false,
                        //    searchable: false,
                        //    render: function render(data, type, row, meta) {
                        //        return '<a href="javascript: void(0); " data-method="edit" data-uid="' + row.company_uid + '">' + row.company_name + '</a>';
                        //    }
                        //}, {
                        //    targets: 2,
                        //    orderable: false,
                        //    searchable: false,
                        //    render: function render(data, type, row, meta) {
                        //        return row.company_serial;
                        //    }
                        //}, {
                        //    targets: 3,
                        //    orderable: false,
                        //    searchable: false,
                        //    render: function render(data, type, row, meta) {

                        //        if (row.company_enabled == "Y") {
                        //            return '<label class="switcher-control switcher-control-lg"><input type="checkbox" class="switcher-input" checked disabled> <span class="switcher-indicator"></span> <span class="switcher-label-on">啟用</span> <span class="switcher-label-off">停用</span></label>';
                        //        } else {
                        //            return '<label class="switcher-control switcher-control-lg"><input type="checkbox" class="switcher-input" disabled> <span class="switcher-indicator"></span> <span class="switcher-label-on">啟用</span> <span class="switcher-label-off">停用</span></label>';
                        //        }
                        //    }
                        //}, {
                        //    targets: 4,
                        //    orderable: false,
                        //    searchable: false,
                        //    render: function render(data, type, row, meta) {
                        //        return (new Date(row.company_createdate)).format("yyyy/MM/dd hh:mm:ss");
                        //    }
                        //}, {
                        //    targets: 5,
                        //    orderable: false,
                        //    searchable: false,
                        //    render: function render(data, type, row, meta) {
                        //        var editRet = '<a class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="edit" data-uid="' + row.company_uid + '" ><i class="fa fa-pencil-alt"></i></a>          <a  class="btn btn-sm btn-secondary" style="display: none;" href="javascript: void(0);" data-method="del" data-uid="' + row.company_uid + '" ><i class="far fa-trash-alt"></i></a>';


                        //        return editRet;
                        //    }
                        //}

                    ],

                });
            },
            handleSearchRecords: function handleSearchRecords() {
                var self = this;

                $('#table-search, #filterBy').on('keyup change focus', function (e) {
                    var filterBy = $('#filterBy').val();
                    var hasFilter = filterBy !== '';
                    var value = $('#table-search').val();

                    self.table.search('').columns().search('').draw();

                    if (hasFilter) {
                        self.table.columns(filterBy).search(value).draw();
                    } else {
                        self.table.search(value).draw();
                    }

                });
            }
        }

        dataTables.init();
    }

});