Excel buttons disappear after search again

blackarch

So I build form with filter date, name ,etc and I get the data with ajax like this :

$.ajax({
            url : site+'/getdata',
            type : 'POST',
            data : 'from='+from+'&to='+to+'&name='+name
            beforeSend : function(res){
                $('#loading').html('');
                $('#list-data').DataTable().destroy();

                //Put loading text
                $('#loading').html('<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">Loading Data...</div></div>');
            },
            success : function(res){
                $('#loading').html(res);
            }
        });

After that data will show on HTML

<table id="list-data" class="table table-bordered table-striped">
    <thead>
    <tr>
        <div class="pb-5">
        <strong class="freezeAction" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleFreeze(this)" style="cursor: pointer;" data-cf-modified-b2fd62bc81e79121d7f2ede7-="">Freeze</strong>
        
        </div>
        </tr>
        <tr>
            <th>No.</th>
            <th>name</th>
        </tr>
        
    </thead>

    <tbody>
        <?php
        $no = 0;
        foreach($query as $row):
            $no++;
            ?>
            <tr>
                <td><?=$no;?></td>
                <td><?=$row->name;?></td>
            </tr>
            <?php

        endforeach;    
        ?>
    </tbody>
</table>
<link href="<?= base_url() ?>assets/frontend/vendors/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>

$(document).ready( function () {

    var t = $('#list-data').DataTable({
        "dom": 'Bfrtip',
        "buttons": [ 
            {extend:'excel',title:'EXCEL', exportOptions: { columns: [ 0, 1, 2, 3, 4, 5 ] }}, 
            {extend:'csv',title:'CSV', exportOptions: { columns: [ 0, 1, 2, 3, 4, 5 ] }},
        ],
        order: [[1, 'asc' ]],
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0
        } ],
    });
    t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
    $('.buttons-excel').removeClass('btn-secondary');
    $('.buttons-excel').addClass('btn-success');
    $('.buttons-csv').removeClass('btn-secondary');
    $('.buttons-csv').addClass('btn-success');
    t= t; 
} );

Description of problem:
the first time I searching, it's working (show data, show button download), but when I try search again the data still appear but the button is disappear.
Any idea?

kthorngren

Ajax is an asynchronous process. It sounds like you are initializing Datatables when the HTML table is empty. Move your Datatables initialization code into the Ajax success function after the $('#loading').html(res); statement.

Kevin

blackarch

Hello Kevin, Thank you for fast reply
I already tried it, but it's not working the result is same like before.
I put the code var t = $('#list-data').DataTable({ . . . into success function but still not working.

blackarch

Oh my bad, i got it thanks