Question

我正在执行ajax调用，但响应后数据表未更新。我尝试了几种功能。请注意，我使用的是jQuery 2.2.4版本

$.ajax({
        type: 'POST',
        url: URL,
        data: parsed,
        dataType: "json",
        beforeSend: function() {}

    }).done(function(data) {
        let Content = '';
        $("#order-table-data").html(Content);
        $("#datatable").trigger("update");
        $("#datatable").ajax.reload(); //Cannot read property 'reload' of undefined
    })

HTML：

   <table id="datatable" class="table table-striped table-bordered">
     <thead>
     <tr>
                <th>Product</th>
                <th>Stock</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Order</th>
     </tr>
     </thead>

         <tbody id="order-table-data"></tbody>
     </table>

Answer 1

这可能对您有帮助

$("#datatable").DataTable().ajax.reload(null, false );

或

$("#datatable").ajax.reload(null, false);

Answer 2

Ajax调用在数据表中有些不同，请尝试这种方式

$('#datatable').dataTable( {
  "ajax": {
  "url": URL,
  "type": "POST",
  dataType: "json",
  "data": function ( d ) {
     $("#order-table-data").html(d);
   }
 }
} );

Answer 3

您可以尝试以下代码：

$(document).ready(function() {

    $('#results').html('<table id="table-output" class="display" cellspacing="0" width="100%"></table>');

    var table_config = {
        "bDestroy": true,
        "paging": false,
        "language": {
            "zeroRecords": "No results found",
            "processing": "<div align='center'><img src='/static/ajax-loader.gif'></div>",
            "loadingRecords": "<div align='center'><img src='/static/ajax-loader.gif'></div>"
        }
    };      

    $("form").submit(function(e) {

        e.preventDefault();

        var form_data = JSON.stringify($(this).serializeArray());

        $.ajax({
            type: 'POST',
            url: /the_url,
            data: form_data,
            contentType: 'application/json',
            dataType: 'json',
            success: function(response) {

               $('#results').html('<table id="table-output" class="display" cellspacing="0" width="100%"></table>');

                    table_config.columns = response.columns;

                    var table = $('#table-output').DataTable(table_config);
                    table.clear();
                    table.rows.add(response.data);
                    table.draw();

            }
        });
    });
});

AJAX响应后数据表未更新

3 个答案: