Question

我几乎没有使用jQuery或JSON的经验。但是，我在网上找到了一个很棒的小教程，它引导我完成了创建jQuery DataGrid Table的步骤-正是我所需要的。而且效果很好。

问题是，我有时需要重新加载表。而且，我无法上班。

这是我的控制人

public ActionResult AddSupplies()
{
    var q = db.ICS_Orders;           
    return View(q);           
}

这是我的DataGrid部分视图

l IEnumerable<ICS20web.Models.ICS_Orders>
@{
Layout = null;
}

<div id="divSupplies">
<h3>Monthly Requisition: Supplies and Forms</h3>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary list-panel" id="list-panel">
            <div class="panel-heading list-panel-heading">
                <h1 class="panel-title list-panel-title">Requested Supplies</h1>
            </div>
            <div class="panel-body">
                <table id="supplies-data-table"
                       class="table table-striped table-bordered"
                       style="width:100%">
                    <thead>
                        <tr>                               
                            <th>Requisition Number</th>
                            <th>Supplies</th>
                            <th>Amount Ordered</th>

                        </tr>
                    </thead>
                    <tbody>
                        @*@foreach (var asset in Model)*@
                            @foreach (var asset in Model.Where(w => w.RequisitionNumber == ViewBag.TransNum))
                            {
                            <tr>

                                <td>@asset.RequisitionNumber</td>
                                <td>@asset.Supply</td>
                                <td>@asset.UnitsOrdered</td>

                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<hr />
<!-- Add Java Script-->

@Scripts.Render("~/Scripts/jquery-1.10.2.min.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
@Scripts.Render("~/Scripts/CheckContacts.js")
@Scripts.Render("~/Scripts/Supplies.js")

<script type="text/javascript">
 $(document).ready(function () {

     $('#supplies-data-table').DataTable();


 });

我所有的研究都表明，重新加载表的正确方法是：

  $('#supplies-data-table').DataTable().ajax.reload();

但这不起作用。我收到以下JSON错误

“ DataTables警告：表格id = supplies-data-table-无效的JSON响应。

我似乎找不到任何可以帮助我理解原因或解决方法的信息。我感到困惑的是，该表将在第一次加载，并正确地加载回发。但是在强制重新加载时-我收到此错误，但失败。

Answer 1

根据建议，我重新配置了代码以从ajax源加载表。我想，我不完全了解jQuery DataTables的工作原理。阅读评论后，我在网上做了一些进一步的研究，并弄清楚了。这是我所做的

查看表格的位置

export interface Field<T extends FieldType> {
  name: string,
  label: string,
  type: FieldType,
  validator: (val: T) => boolean,
  bounds: { lower: number; upper: number }
}

我要加载表的Jquery（在document.ready上）

<!-- Begin Jquery DataTable-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary list-panel" id="list-panel">
<div class="panel-heading list-panel-heading">
<h1 class="panel-title list-panel-title">Requested Supplies</h1>
</div>
<div class="panel-body">
<table id="myTable" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Requisition Number</th>
<th>Supply Name</th>
<th>Amount Requested</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>

<!-- End Jquery DataTable-->

我的控制器中的负载数据

$('#myTable').DataTable({
"ajax": {
"url": "/ICSNewOrders/loaddata",
"type": "GET",
 "datatype": "json"
 },
 "columns": [
 { "data": "RequisitionNumber", "autoWidth": true },
 { "data": "Supply", "autoWidth": true },
 { "data": "UnitsOrdered", "autoWidth": true }
 ]
 });
 });

最后，刷新Jquery DataTable。。

public ActionResult loaddata()
{

ViewBag.TransNum = TempData["ReqNo"];
TempData.Keep();

String ReqID = Convert.ToString(TempData["ReqNo"].ToString());

using (ICSContext dc = new ICSContext())
{
dc.Configuration.LazyLoadingEnabled = false; 
var data = dc.ICS_Orders.Where(s => s.RequisitionNumber == ReqID).OrderBy(a => a.RequisitionNumber).ToList();

return Json(new
{
data = data
}, JsonRequestBehavior.AllowGet);
}
}

现在一切正常。

重新加载Jquery DataGrid表-不起作用

1 个答案: