Lazy load datatables ajax

See more:

C#

Ajax

performance

DataTable

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";
}



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

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.


What I have tried:

i just explained above the problem