Lazy load datatables ajax

Lazy load datatables ajax

ggddggdd Posts: 3Questions: 3Answers: 0

This is the main view :smile:

@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.

This discussion has been closed.