单击复选框时如何使用Ajax重新加载数据表

时间:2019-07-09 14:44:08

标签: javascript html model-view-controller

单击复选框后,我希望能够重新加载我的数据表,以下是我的尝试代码,但我仍然遇到错误:Uncaught TypeError:无法将属性'data'设置为null不能确定如何处理此错误。我已经在MVC应用程序中同时提供了javascript和视图,如果您需要更多详细信息,请告诉我。

.js

function ReloadTable()
{


    $(document).ready(function () {
        var table =  $('#DashboardTable').DataTable({

            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            //"pageLength": 5,


            "ajax": {
                "url": "/Chargeback/Index",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
            { "data": "ChargebackCode" },
            { "data": "StatusName" },
            { "data": "BusinessUnitName" },
            { "data": "InvoiceCode" },
            { "data": "OrderCode" },
            { "data": "PickTicketCode" },
            { "data": "CustomerPo" },
            { "data": "AssignedDepartment" },
            { "data": "DivisionName" },
            { "data": "Customer" },
            { "data": "WarehouseName" },
            { "data": "Coordinator" },
            { "data": "ChargebackDate" },
            { "data": "ModDate" },
            { "data": "ChargebackDeadline" },
            { "data": "ChargebackCloseDate" },
            { "data": " DaysOpen" },
            { "data": "ChargebackAmount" },
            { "data": "ChargebackBalance" },
            { "data": "FaultName" },
            { "data": "ResponsibleName" }
            ]

        });
        table.ajax.reload();
    });

}

视图:

@using (Html.BeginForm("Index", "Chargeback"))
{
   <label id = "Include" > @Html.CheckBox("IncludeClosed", (bool)ViewBag.IncludeClosed, new { onChange = "ReloadTable()" }) Include Closed</label>

<table id="DashboardTable" class="table table-striped" >
    <thead>
        <tr>
            <th>Code</th>
            <th>Status</th>
            <th>Business</th>
            <th>Invoice</th>
            <th>Order</th>
            <th>Pick Tickets</th>
            <th>Customer PO</th>
            <th>Assigned</th>
            <th>Division</th>
            <th>Customer</th>
            <th>Warehouse</th>
            <th>Coordinator</th>
            <th>Open Date</th>
            <th>Last Activity</th>
            <th>Deadline</th>
            <th>Closed Date</th>
            <th>Days Open</th>
            <th>Amount</th>
            <th>Balance</th>
            <th>Fault</th>
            <th>Responsible</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            var chargebackDeadline = item.ChargebackDeadline == null ? "" : ((DateTime)item.ChargebackDeadline).ToString("MM/dd/yyyy");
            var chargebackCloseDateAsString = item.ChargebackCloseDate == null ? "" : ((DateTime)item.ChargebackCloseDate).ToString("MM/dd/yyyy");

            <tr>
                <td>@Html.ActionLink(item.ChargebackCode, "Details", "Chargeback", new { id = item.Id }, null)</td>
                <td>@item.StatusName</td>
                <td>@item.BusinessUnitName</td>
                <td>@item.InvoiceCode</td>
                <td>@item.OrderCode</td>
                <td>@item.PickTicketCode</td>
                <td>@item.CustomerPo</td>
                <td>@item.AssignedDepartment</td>
                <td>@item.DivisionName</td>
                <td>@item.Customer</td>
                <td>@item.WarehouseName</td>
                <td>@item.Coordinator</td>
                <td>@item.ChargebackDate.ToString("MM/dd/yyyy")</td>
                <td>@item.ModDate.ToString("MM/dd/yyyy")</td>
                <td>@chargebackDeadline</td>
                <td>@chargebackCloseDateAsString</td>
                <td>@item.DaysOpen</td>
                <td>$@item.ChargebackAmount</td>
                <td>$@item.ChargebackBalance</td>
                <td>@item.FaultName</td>
                <td>@item.ResponsibleName</td>
            </tr>
        }
    </tbody>
</table>
}

0 个答案:

没有答案