过滤数据后,没有出现导出按钮

时间:2019-12-29 05:35:40

标签: javascript datatable

晚安团队。我使用yajra数据表服务器端将数据显示到表中并将其导出。当我第一次加载数据时,将出现导出按钮,但是当我按日期过滤数据时,导出按钮会消失。请,任何人都可以提供帮助。

<script>

    var myChart = new Chart( document.getElementById("customerReportChart"), {
            type: 'line',
            data: {

                labels: [
                    @foreach($months as $month)
                        "{{ $month }}",
                    @endforeach
                ],
                datasets: [
                {
                    fill: false,
                    label: "Total Connection Per Month - {{ date('Y') }}",
                    borderColor: "rgba(4, 73, 203,.5)",
                    backgroundColor: "rgba(4, 73, 203,.5)",
                    data: [
                        @foreach($customer_list as $customers)
                            "{{ $customers }}",
                        @endforeach
                    ]
                }
                ]
            },
            options: {

                responsive: true,
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Customer'
                    },
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }

            }
        });


        var startDate;
        var endDate;
        var table;
        loadCustomer()
        // var n = document.createElement('script');
        // n.setAttribute('language', 'JavaScript');
        // n.setAttribute('src', 'https://debug.datatables.net/debug.js');
        // document.body.appendChild(n);

        $(document).ready(function(){
            $('#filter').click(function(){
                var status = $('#status').val();
                table.destroy();  
                loadCustomer(startDate,endDate,status);
            })

            $('#refresh').click(function(){
                startDate = ''
                endDate = ''
                status = ''
                table.destroy();
                loadCustomer()
            })
        })

        function loadCustomer(start_date = '', end_date = '', status = ''){
            console.log('Hello')
            table = $('#customer_table').DataTable({
                dom: 'Bfrtip',
                buttons: ['csv','print', 'excel', 'pdf'],
                processing:true,
                serverSide:true,
                ajax:{
                    url:'{{ url('report/customer/list') }}',
                    data:{start_date,end_date,status}
                },

                columns:[
                    {
                        data:'DT_RowIndex',
                        name:'DT_RowIndex'
                    },
                    {
                        data:'applicant_name',
                        name:'applicant_name'
                    },
                    {
                        data:'applicant_phone',
                        name:'applicant_phone'
                    },
                    {
                        data:'applicant_address',
                        name:'applicant_address'
                    },
                    {
                        data:'street_name',
                        name:'street_name'
                    },
                    {
                        data:'user_code',
                        name:'user_code'
                    },
                    {
                        data:'status',
                        name:'status'
                    },
                    {
                        data:'meter_number',
                        name:'meter_number'
                    },
                    {
                        data:'account_type_name',
                        name:'account_type_name'
                    },
                    {
                        data:'area',
                        name:'area'
                    },
                    {
                        data:'plot_number',
                        name:'plot_number'
                    },
                    {
                        data:'house_number',
                        name:'house_number'
                    },
                    {
                        data:'owner_name',
                        name:'owner_name'
                    },
                    {
                        data:'owner_phone',
                        name:'owner_phone'
                    },
                    {
                        data:'water_closet',
                        name:'water_closet'
                    },
                    {
                        data:'unrinals',
                        name:'unrinals'
                    },
                    {
                        data:'baths',
                        name:'baths'
                    },
                    {
                        data:'stand_pipes',
                        name:'stand_pipes'
                    },
                    {
                        data:'others',
                        name:'others'
                    },
                    {
                        data:'created_at',
                        name:'created_at'
                    }
                ]
            })
        }

        $.noConflict();
        $(document).ready(function(){
            $('#daterange-btn').daterangepicker(
                {
                    ranges   : {
                    'Today'       : [moment(), moment()],
                    'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month'  : [moment().startOf('month'), moment().endOf('month')],
                    'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    startDate: moment().subtract(29, 'days'),
                    endDate  : moment()
                },
                function (start, end) {
                    $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
                    startDate = start.format('YYYY/M/D h:m:s');
                    endDate = end.format('YYYY/M/D h:m:s'); 
                }
                )
            })
    </script>

0 个答案:

没有答案