Question

我正在尝试将dataTable初始化为bootstrap模式中的表。

每次打开或关闭模态时，我都使用destroy : true来清除dataTable初始化。

但是我获得了在第一次模态打开期间加载的相同旧数据，尽管输入数据不同。

这是我的表：

    <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <table class="table table-striped table-bordered table-condensed" id="tbDetails">
                    <thead class="thead-dark">
                        <tr>
                            <th>Date</th>
                            <th>Amount to be received (NRs.)</th>
                            <th>Received (NRs.)</th>
                            <th>Credit (NRs.)</th>
                            <th>Due (NRs.)</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-primary log-btn" name="transaction_history">Transaction History</button>

单击该按钮，将调用ajax请求，并将记录加载到模态内的表中。

$('#lunchReportForm').on('click', '.log-btn', function(event) 
{ 
    var user_id = $('form#lunchReportForm').find('#emps').val();
    var date_from = $('form#lunchReportForm').find('#lunch-date').val();
    var date_to = $('form#lunchReportForm').find('#lunch-date1').val();
    user_id = (user_id != '') ? user_id : $('#current_user').val();

    $.ajax
    ({
        url: "lunch/transaction/log",
        data: 
        {
            user_id : user_id,
            date_from : date_from,
            date_to : date_to,
            log_export : false
        },
        method: 'POST',
        dataType: "json",
    }).success(function(response) 
    {   console.log(response)
        var log_form = $('form#logFilterForm');
        log_form.find('#emps').select2("val", user_id);
        log_form.find('#log-date').val(date_from);
        log_form.find('#log-date1').val(date_to);

        $("#tbDetails tbody").empty();
        $.each(response, function (index, obj) 
        { 
            var credit_amount = '-';
            var remaining_amount = '-';
            var difference_amount = parseFloat(obj.due_amount) - parseFloat(obj.paid_amount);
            if(difference_amount < 0){
                credit_amount = parseFloat(difference_amount);
            }else{
                remaining_amount = parseFloat(difference_amount);
            }

            var row = '<tr><td> ' + obj.date + ' </td> <td> ' + obj.due_amount + ' </td> <td>' + obj.paid_amount + '</td> <td>' + credit_amount + '</td> <td> ' + remaining_amount + '</td> </tr>'
            $("#tbDetails tbody").append(row);
        });

        /* initialize dataTable */
        initializeDataTable();

        /* show modal.. */
        $('#myModal').modal('show');  

        /* clear files list on modal hide */
        $('#myModal').on('hidden.bs.modal', function (e) 
        {
            $("#tbDetails tbody").empty();
        })
    });
});

将表行附加到表后，通过调用initializeDataTable()初始化dataTable。

关闭模态时，表行被清除。

function initializeDataTable()
{
    $('#tbDetails').dataTable({
        "bPaginate": true,
        "aLengthMenu": [8, 16, 32, 64],
        "bLengthChange": true,
        "bSort": false,
        "bDestroy": true
    });
}

首先加载表格并初始化dataTable时，记录会正确显示。

但是一旦模态关闭，并且输入参数值被更改，则会显示模态，但表记录值不会更改。

虽然来自ajax的记录是从服务器正确获取的（通过。console.log(response)看到）。

我做错了什么？

DataTable在模态打开和关闭时重新初始化时数据未加载

0 个答案: