Ленивая загрузка datatables ajax
Это основной вид :
@model IEnumerable<Northwind.Order> @{ ViewBag.Title = "Ajax"; Layout = "~/Views/Shared/MasterDetailsLayoutPage.cshtml"; } @section onReady{ var oTable; $('#companies tbody td img').live('click', function () { var nTr = this.parentNode.parentNode; if (this.src.match('details_close')) { /* This row is already open - close it */ this.src = "/Content/images/details_open.png"; oTable.fnClose(nTr); } else { /* Open this row */ this.src = "/Content/images/details_close.png"; var orderid = $(this).attr("rel"); $.get("Me?OrderID=" + orderid, function (detalet) { oTable.fnOpen(nTr, detalet, 'details'); }); } }); /* Initialize table and make first column non-sortable*/ oTable = $('#companies').dataTable({ "bServerSide": true, "sAjaxSource": 'AjaxHandler', "bJQueryUI": true, "aoColumns": [ { "bSortable": false, "bSearchable": false, "fnRender": function (oObj) { return '<img src="/Content/images/details_open.png" alt="expand/collapse" rel="' + oObj.aData[0] + '" />'; } }, null, null, null ] }); } <table id="companies" class="display"> <thead> <tr> <th></th> <th>Order ID</th> <th>Customer ID</th> <th>Ship Address</th> </tr> </thead> <tbody></tbody> </table>
И это частичное представление, которое загружается внутри datatable :
@model Northwind.Order @{ ViewBag.Title = "Me"; Layout = "~/Views/Shared/MasterDetailsLayoutPage.cshtml"; } <div> <dl class="dl-horizontal"> <dt> @Html.DisplayNameFor(model => model.CustomerID) </dt> <dd> @Html.DisplayFor(model => model.CustomerID) </dd> <dt> @Html.DisplayNameFor(model => model.Customer.ContactName) </dt> <dd> @Html.DisplayFor(model => model.Customer.ContactName) </dd> <dt> @Html.DisplayNameFor(model => model.EmployeeID) </dt> <dd> @Html.DisplayFor(model => model.EmployeeID) </dd> <dt> @Html.DisplayNameFor(model => model.OrderDate) </dt> <dd> @Html.DisplayFor(model => model.OrderDate) </dd> <dt> @Html.DisplayNameFor(model => model.RequiredDate) </dt> <dd> @Html.DisplayFor(model => model.RequiredDate) </dd> <dt> @Html.DisplayNameFor(model => model.ShippedDate) </dt> <dd> @Html.DisplayFor(model => model.ShippedDate) </dd> <dt> @Html.DisplayNameFor(model => model.ShipVia) </dt> <dd> @Html.DisplayFor(model => model.ShipVia) </dd> <dt> @Html.DisplayNameFor(model => model.Freight) </dt> <dd> @Html.DisplayFor(model => model.Freight) </dd> <dt> @Html.DisplayNameFor(model => model.ShipName) </dt> <dd> @Html.DisplayFor(model => model.ShipName) </dd> <dt> @Html.DisplayNameFor(model => model.ShipAddress) </dt> <dd> @Html.DisplayFor(model => model.ShipAddress) </dd> <dt> @Html.DisplayNameFor(model => model.ShipCity) </dt> <dd> @Html.DisplayFor(model => model.ShipCity) </dd> <dt> @Html.DisplayNameFor(model => model.ShipRegion) </dt> <dd> @Html.DisplayFor(model => model.ShipRegion) </dd> <dt> @Html.DisplayNameFor(model => model.ShipPostalCode) </dt> <dd> @Html.DisplayFor(model => model.ShipPostalCode) </dd> <dt> @Html.DisplayNameFor(model => model.ShipCountry) </dt> <dd> @Html.DisplayFor(model => model.ShipCountry) </dd> </dl> </div> <table class="table" cellpadding="4" cellspacing="0" border="0" style="padding-left:50px;"> <tr> <th>Order ID </th> <th>CUSTOMER </th> <th>OrderDate </th> <th>RequiredDate </th> <th>ShippedDate</th> <th>Freight</th> <th>ShipName</th> <th>ShipAddress </th> <th>ShipCity </th> <th>ShipPostalCode</th> <th>ShipCountry</th> <th>Total</th> </tr> <tr> <td> @Html.DisplayFor(model => model.OrderID) </td> <td> @Html.DisplayFor(model => model.Customer.ContactName) </td> <td> @Html.DisplayFor(model => model.OrderDate) </td> <td> @Html.DisplayFor(model => model.RequiredDate) </td> <td> @Html.DisplayFor(model => model.ShippedDate) </td> <td> @Html.DisplayFor(model => model.Freight) </td> <td> @Html.DisplayFor(model => model.ShipName) </td> <td> @Html.DisplayFor(model => model.ShipAddress) </td> <td> @Html.DisplayFor(model => model.ShipCity) </td> <td> @Html.DisplayFor(model => model.ShipPostalCode) </td> <td> @Html.DisplayFor(model => model.ShipCountry) </td> <td>@Northwind.Controllers.HomeeController.getOrderTotal(Model.Order_Details)</td> </tr> </table> <table class="table" cellpadding="4" cellspacing="0" border="0" style="padding-left:50px;"> <tr> <th>Product ID</th> <th>Product </th> <th>Unit Price</th> <th>Quantity</th> <th>Discount</th> <th>Total</th> </tr> @foreach (var item in Model.Order_Details) { <tr> <td> @item.ProductID </td> <td> @item.Product.ProductName </td> <td> @item.UnitPrice </td> <td> @item.Quantity </td> <td> @item.Discount </td> <td> @Northwind.Controllers.TestController.getOrderDetailTotal(item) </td> </tr> } </table>
Как лениво загружать, я имею в виду с точки зрения производительности , когда приложение запускается , не загружать все частичные представления для каждой записи daatatable , а загружать только то, что выбрано .Я ценю любую помощь .Спасибо.
Что я уже пробовал:
я только что объяснил выше эту проблему