重新加载 Jquery DataGrid 表 - 不工作

Posted 2023-04-13

【中文标题】重新加载 Jquery DataGrid 表 - 不工作

【英文标题】：Reload Jquery DataGrid Table - not working

【发布时间】：2019-12-16 13:55:51

【问题描述】：

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

问题是，我有时需要重新加载表格。而且，我无法工作。

这是我的控制器

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 响应无效。

我似乎找不到任何可以帮助我理解原因或解决方法的内容。我很困惑该表将第一次加载，并在回邮时正确加载。但是当强制重新加载时 - 我得到这个错误并且它失败了。

【问题讨论】：

ajax.reload() 从 ajax 源重新加载表。您的代码没有显示任何 ajax 源的迹象。您还在已填充的表上初始化 DataTable，那么重新加载究竟对您有什么帮助？

您需要将表格加载为空（html）；设置ajax 选项以从后台请求数据；使您的支持脚本以有效格式的表源数据响应；每当您需要刷新表格时，请使用ajax.reload()。有关上述选项、API 方法和相关代码示例的详细说明，请参阅 datatables.net。

【参考方案1】：

按照建议，我重新配置了代码以从 ajax 源加载表。我想，我没有完全理解 jQuery DataTables 是如何工作的。在阅读了cmets之后，我在网上做了一些进一步的研究并弄清楚了一些事情。这就是我所做的

查看Table所在的位置

<!-- 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-->

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

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

我的控制器加载数据

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 DataTable 。 . .

$('#myTable').DataTable().ajax.reload();

现在一切正常。