如何在ajax调用后刷新数据表

时间:2017-09-15 03:34:54

标签: javascript php jquery ajax datatable

在AJAX调用之后我尝试了几种刷新数据表的方法,但没有工作。 我尝试了draw()和。ajax.reload()功能,但仍然没有运气。 知道怎么刷新吗?

这里是我的代码

HTML

<table id="transaction_data" class="table table-hover">
                                                  <thead>
                                                  <tr>
                                                      <th>Date Created</th>
                                                      <th>User Name</th>
                                                      <th>Transaction Type</th>
                                                      <th>Amount (USD)</th>
                                                      <th>Last Update</th>
                                                      <th>Status</th>
                                                      <th>Amount Coin</th>
                                                      <th>Amount Coin Received</th>
                                                  </tr>
                                                  </thead>
                                                  <tbody>
                                                  <tr>

                                                  </tr>
                                                  </tbody>
                                              </table>

数据表脚本

var table = $("#transaction_data").DataTable({
             processing: true,
                serverSide: true,
                ajax: '{{ url("member/deposit/data_transaction") }}',
                columns: [
                    { data: 'created_at', name: 'created_at' },
                    { data: 'member_id', name: 'member_id' },
                     { data: 'transaction_type', name: 'transaction_type' },
                     { data: 'amount_usd', name: 'amount_usd' },
                     { data: 'updated_at', name: 'updated_at' },
                     { data: 'status', name: 'status' },
                     { data: 'amount_coin_kirim', name: 'amount_coin_kirim' },
                    { data: 'amount_coin_terima', name: 'amount_coin_terima' }
                ]
        });

ajax脚本

$('#formdeposit').submit(function(e){
    e.preventDefault();
    if (grecaptcha.getResponse()) {

    var formData = {
             "_token": "{{ csrf_token() }}",
            'deposit' : $('#deposit').val(),
            'coin' : $('#coin option:selected').val()
        };
        $.ajax({
            type : 'POST',
            url : '{{ asset("/member/deposit/process") }}',
            data : formData,
            dataType : 'json',
            encode : true
        })
        .done(function(data){
              console.log(data);
              $('#myModal').modal('show');
        //  

        if (data.pesan=='ok')
            {
            $('#test').html(data.html);     
            }

        else{
            $('#test').html(data.pesan);
        }   

              });

    e.preventDefault();
        table.draw(); //here I tried to refresh the datatable
    }
    else{ alert('Please Confirm The Captcha') }
});     

1 个答案:

答案 0 :(得分:1)

编辑:试试这个(For - datatable version 1.10.9)

$('#formdeposit').submit(function(e){
    e.preventDefault();
    if (grecaptcha.getResponse()) {

         var formData = {
            "_token": "{{ csrf_token() }}",
            'deposit' : $('#deposit').val(),
            'coin' : $('#coin option:selected').val()
        };
        $.ajax({
            type : 'POST',
            url : '{{ asset("/member/deposit/process") }}',
            data : formData,
            dataType : 'json',
            encode : true
        })
        .done(function(data){


              console.log(data);
              $('#myModal').modal('show');
        //  

        if (data.pesan=='ok')
            {
            $('#test').html(data.html);     
            }

        else{
            $('#test').html(data.pesan);
        }  
        var table = $('#transaction_data').DataTable(); 
        table.ajax.reload( null, false );

              });

        e.preventDefault();

        }
        else{ alert('Please Confirm The Captcha') }
});