Lazy load datatables ajax
Lazy load datatables ajax
This is the main view
@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>
And this is the partial view that loads inside the datatable :
@model Northwind.Order
@{
ViewBag.Title = "Me";
Layout = "~/Views/Shared/MasterDetailsLayoutPage.cshtml";
}
- @Html.DisplayNameFor(model => model.CustomerID)
- @Html.DisplayFor(model => model.CustomerID)
- @Html.DisplayNameFor(model => model.Customer.ContactName)
- @Html.DisplayFor(model => model.Customer.ContactName)
- @Html.DisplayNameFor(model => model.EmployeeID)
- @Html.DisplayFor(model => model.EmployeeID)
- @Html.DisplayNameFor(model => model.OrderDate)
- @Html.DisplayFor(model => model.OrderDate)
- @Html.DisplayNameFor(model => model.RequiredDate)
- @Html.DisplayFor(model => model.RequiredDate)
- @Html.DisplayNameFor(model => model.ShippedDate)
- @Html.DisplayFor(model => model.ShippedDate)
- @Html.DisplayNameFor(model => model.ShipVia)
- @Html.DisplayFor(model => model.ShipVia)
- @Html.DisplayNameFor(model => model.Freight)
- @Html.DisplayFor(model => model.Freight)
- @Html.DisplayNameFor(model => model.ShipName)
- @Html.DisplayFor(model => model.ShipName)
- @Html.DisplayNameFor(model => model.ShipAddress)
- @Html.DisplayFor(model => model.ShipAddress)
- @Html.DisplayNameFor(model => model.ShipCity)
- @Html.DisplayFor(model => model.ShipCity)
- @Html.DisplayNameFor(model => model.ShipRegion)
- @Html.DisplayFor(model => model.ShipRegion)
- @Html.DisplayNameFor(model => model.ShipPostalCode)
- @Html.DisplayFor(model => model.ShipPostalCode)
- @Html.DisplayNameFor(model => model.ShipCountry)
- @Html.DisplayFor(model => model.ShipCountry)
Order ID | CUSTOMER | OrderDate | RequiredDate | ShippedDate | Freight | ShipName | ShipAddress | ShipCity | ShipPostalCode | ShipCountry | Total |
---|---|---|---|---|---|---|---|---|---|---|---|
@Html.DisplayFor(model => model.OrderID) | @Html.DisplayFor(model => model.Customer.ContactName) | @Html.DisplayFor(model => model.OrderDate) | @Html.DisplayFor(model => model.RequiredDate) | @Html.DisplayFor(model => model.ShippedDate) | @Html.DisplayFor(model => model.Freight) | @Html.DisplayFor(model => model.ShipName) | @Html.DisplayFor(model => model.ShipAddress) | @Html.DisplayFor(model => model.ShipCity) | @Html.DisplayFor(model => model.ShipPostalCode) | @Html.DisplayFor(model => model.ShipCountry) | @Northwind.Controllers.HomeeController.getOrderTotal(Model.Order_Details) |
<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>
How to to LAZY LOAD , i mean from the performance aspects , when the application runs , not to load all the partial views for every daatatable record , but to load only that that is being selected .I appriciate every help .Thanks.