The export button does don't appear after filter data

Al-Amin Msangi · December 2019

Good day team.
I use the yajra datatable server side to display data to the table and export it. When I load data for the first time the export buttons appear but when I filter the data by the date the export buttons disappear. Please, anyone can help with this.

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

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

        function loadCustomer(start_date = '', end_date = '', status = ''){

            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'
                    }
                ]
            })
        }

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren · December 2019

When you filter is this function executed?

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

Looks like it should work. It destroys the Datatable and reinitializes it. I would start by looking at the browser's console for errors.

Kevin

Al-Amin Msangi · December 2019

Yeah is the function that is called.
But there is no error in my web console.

kthorngren · December 2019

Can you post a link to your page or a test case replicating the issue? This way we can take a look at what is happening to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Al-Amin Msangi · December 2019

Can we use TeamViewer or live share with visual code?
Or we can start from here, Skype: alaminhamadi.
Please help me because it takes me 3 days until today.

Al-Amin Msangi · December 2019

After using Datatables Debugger, when I filter the data on datatable information return "Information about 0 tables available"

kthorngren · December 2019

Can we use TeamViewer or live share with visual code?

The Datatables developers may help this way but I believe they might charge for the service. You can contact @allan or @colin to find out the details.

After using Datatables Debugger, when I filter the data on datatable information return "Information about 0 tables available"

I assume the debugger works correctly before you filter?

That suggests that after the destroy() the loadCustomer function is not working correctly. Using the browser's developer tools do you see an Ajax request being sent when you filter?

Use some console.log statements to help debug the path of your code. I would start with one in the loadCustomer function to make sure its called when you try filtering.

Kevin

Al-Amin Msangi · December 2019

I have check as you suggested above and the loadCustomer function is called.
Please let me show a hole script.

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

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin · December 2019

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

The export button does don't appear after filter data

The export button does don't appear after filter data

Answers

Howdy, Stranger!

Categories

DataTables

The export button does don't appear after filter data

The export button does don't appear after filter data

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables