延迟加载数据表ajax [英] Lazy load datatables ajax

查看：69
本文介绍了延迟加载数据表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.src =/Content/images/details_open.png; 
 oTable.fnClose（nTr ）; 
} 
 else {
 / *打开这一行* / 
 this.src =/Content/images/details_close.png; 
 var orderid = $（this）.attr（rel）; 
 $ .get（Me？OrderID =+ orderid，function（detalet）{
 oTable.fnOpen（nTr，detalet，'details'） ; 
}）; 
} 
}）; 
 
 / *初始化表并使第一列不可排序* / 
 oTable = $（'＃companies'）。dataTable（{
bServerSide：true，
sAjaxSource：'AjaxHandler'，
bJQueryUI：true，
aoColumns：
 [
 {bSortable：false，
bSearchable ：false，
fnRender：function（oObj）
 {
 return'< img src =/ Content / images / details_open.pngalt =expand / collapserel ='+ oObj.aData [0] +'/>'; 
} 
}，
 null，
 null，
 null 
 
] 
}）; 
 
} 
 
 
< table id =companiesclass =display> 
< thead> 
< tr> 
< th>< / th> 
< th>订单ID< / th> 
 
 
< th>客户ID< / th> 
 
< th>发货地址< / th> 
 
< / tr> 
< / thead> 
< tbody>< / tbody> 
< / table>







这是部分视图加载到数据表：



 @model Northwind.Order 
 
 @ {
 ViewBag.Title =Me ; 
 Layout =〜/ Views / Shared / MasterDetailsLayoutPage.cshtml; 
} 
 
 
 
< div> 
 
 
< dl class =dl-horizo​​ntal> 
< 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 =tablecellpadding =4cellspacing =0
 border =0style =padding-left：50px;> 
 
< tr> 
< th>订单ID< / th> 
< th> CUSTOMER< / th> 
 
< th> OrderDate< / th> 
< th> RequiredDate< / th> 
< th> ShippedDate< / th> 
< th>运费< / th> 
< th> ShipName< / th> 
< th> ShipAddress< / th> 
< th> ShipCity< / th> 
< th> ShipPostalCode< / th> 
< th> ShipCountry< / th> 
< th>总计< / 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 =tablecellpadding =4cellspacing =0
 border =0style =padding-left：50px;> 
< tr> 
< th>产品ID< / th> 
< th>产品< / th> 
< th>单价< / th> 
< th>数量< / th> 
< th>折扣< / th> 
< th>总计< / th> 
< / tr> 
 
 @foreach（Model.Order_Details中的var项目）
 {
< 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>







如何对于LAZY LOAD，我的意思是从性能方面来说，当应用程序运行时，不是为每个可转换的记录加载所有部分视图，而是仅加载正在被选中的那个。我恳求每一个帮助。谢谢。





我的尝试：



i刚解释上面的问题

解决方案

（'＃companies tbody td img'）。live（'click'，function（）{
var nTr = this.parentNode.parentNode;
if（this.src.match（'details_close'））{
/ *此行已经打开 - 关闭它* /
这个。 src =/Content/images/details_open.png;
oTable.fnClose（nTr）;
}
else {
/ *打开这一行* /
this.src =/Content/images/details_close.png;
var orderid =


（this）.attr（rel）;


.get（Me？OrderID =+ orderid，function（detalet）{
oTable.fnOpen（nTr，detalet，'details'）;
}）;
}
}）;

/ *初始化表并使第一列不可排序* /
oTable =


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

解决方案

('#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 =


这篇关于延迟加载数据表ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆