Excel buttons disappear after search again

Excel buttons disappear after search again

blackarchblackarch Posts: 3Questions: 0Answers: 0
edited November 2021 in DataTables 1.10

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?

Replies

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • blackarchblackarch Posts: 3Questions: 0Answers: 0

    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.

  • blackarchblackarch Posts: 3Questions: 0Answers: 0

    Oh my bad, i got it thanks

Sign In or Register to comment.