如何使用JQuery“；数据表”；插件服务器端处理.NET MVC3剃刀视图中的大数据

本文关键字：视图 剃刀 MVC3 NET 数据 服务器端 JQuery 何使用 数据表 插件 处理 | 更新日期: 2023-09-27 18:29:01

我有一个显示员工列表的数据表。当我的员工数量在0-2000范围内时，它工作得很好，但在那之后，加载该页面时会有一个严重的滞后时间。这真的不夸张，因为它在页面加载时加载了大量数据。我到处找都找不到一个好的例子来展示如何进行服务器端处理。我在github上发现的项目在我的计算机上真的不起作用（我有很多"缺少引用"的错误）。这是我现在正在工作的代码

employees.cshtml

@model EmployeeList
@{
    Layout = null;
    ViewBag.Title = "employees";
}
<html>
<head>
<head/>
<body>
      <table id="employees_gridView">
            <thead>
                <tr>
                    <th
                        Name
                    </th>
                    <th>
                        Username
                    </th>
                    <th>
                        Job Category
                    </th>
                    <th>
                        Hire Date
                    </th>
                </tr>
            </thead>
            <tbody>
            @if (Model.RowList != null)
            {
                foreach (var item in Model.RowList)
                {

                <tr>
                    <td >
                        @Html.DisplayFor(i => item.DisplayName)
                    </td>
                    <td >
                        @Html.DisplayFor(i => item.UserName)
                    </td>
                    <td>
                        @Html.DisplayFor(i => item.JobCategoryName)
                    </td>
                    <td>
                        @Html.DisplayFor(i => item.hireDate)                          
                    </td>
                </tr>
                }
            }
            </tbody>
            <tfoot>
            </tfoot>
        </table>
    </div>
</div>

数据表jquery看起来像这个

$(document).ready(function(){
$('#employees_gridView').dataTable({
            "bDestroy":true,
            "bSortClasses": false,
            "bDeferRender": true,  
            // here is the default setting for number of results to show on a page
            "iDisplayLength": 10,
            "bJQueryUI": true,  
            "sPaginationType": "full_numbers",
            "aaSorting" :[],
            // here are the column specific settings
            "aoColumns": [
            {"aTargets": [ 0,1 ]},
                         null,
                         {"sClass": "DataTableCenterColumn"},   
                         {"sType":"date", "sClass": "DataTableCenterColumn" 
             }]
        });
});

这是处理页面加载请求的控制器方法

public ActionResult Index()
    {
        EmployeeList employeeList = getEmployeeList();
        return View("Index", employeeList );
    }

有人能告诉我如何将这个客户端数据表更改为服务器端处理数据表吗。

如何使用JQuery“；数据表”；插件服务器端处理.NET MVC3剃刀视图中的大数据

我以前使用过JQuery的数据表插件代码，即使你很快得到数据（即localhost），它仍然很慢——你在JavaScript/DOM操作上花费了很多时间。为了使其快速，您必须虚拟化JQuery数据表。所以，你实际上必须修改客户端和；服务器代码。

步骤1）您需要有一个可重复的SQL过程，该过程返回适当的行子集。假设你总共有2000行，那么你需要一个类似的存储过程

GetEmployeDataRows（@startingrow）——或者页码，或者任何对您方便的东西。

确保您有一个可以适当地"子集化"的稳定查询。这是第1步的关键，你也希望速度更快。第#行或第#页可能不是一个好的选择。例如，如果在主键排序中返回Rows，那么在GetEmployeDataRows 中将您的子集参数传递为@empnum和includewhere EmployeeNumber>@empnum可能会明智得多

步骤2）公开一个以startingrow（等）为参数的Web服务（基于JSon，通常最适合浏览器使用）

步骤3）--基于json服务虚拟化数据库。

因此，这不是一项琐碎的任务，但这是真正解决这一问题的正确方法。每一个步骤都有很多例子。

--后续我应该更清楚，如果你有很多数据，DataTables会很慢，如果你只有1000行20列，我永远不建议在没有虚拟化的情况下使用，这对我来说太慢了。如果你使用支持旧IE，它当然会比正常情况更慢。

这里有一个通过ajax进行服务器端处理的示例。我处理过这个问题，但我的解决方案非常复杂。如果您认为您将要成功，请注意必须从服务器回复的json结构。

相关文章：