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

Question

I have a datatable which displays the list of employees. 我有一个数据表，其中显示了雇员列表。 It works fine when I the number of employees in the 0-2000 range but after that there is a serious lag time when loading that page. 当我的员工数量在0-2000范围内时，它可以正常工作，但是此后加载该页面时会有严重的滞后时间。 Which is really not surprizing since it is loading massive amount of data on page load. 这真的不足为奇，因为它可以在页面加载时加载大量数据。 I looked everywhere and I couldnt find a good example which shows how to do server side processing. 我四处张望，找不到一个很好的例子来说明如何进行服务器端处理。 The projects that I found on git hub are really not working in my computer(I got a lot of "missing references" errors). 我在git hub上找到的项目确实无法在我的计算机上运行（我遇到了很多“缺少引用”错误）。 This is the code I have working right now 这是我现在正在使用的代码

The employees.cshtml employee.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>

The datatable jquery looks like this 数据表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" 
             }]
        });
});

And this is the controller method which processes the page load request 这是处理页面加载请求的控制器方法

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

Can someone please show me how I can change this client side datatable to a server side processing datatable. 有人可以告诉我如何将这个客户端数据表更改为服务器端处理数据表。

Answer 1

I've used JQuery the datatables plugin code before, and even if you get the data quickly (ie, localhost), it is still slow -- You are spending lots of time in JavaScript/DOM manipulation. 我以前使用过JQuery datatables插件代码，即使您快速获取数据（即localhost），它仍然很慢-您在JavaScript / DOM操作上花费了大量时间。 To make it fast you must virtualize the JQuery datatable. 为了快速进行，您必须虚拟化JQuery数据表。 SO, you actually have to modify both client & server code. 因此，您实际上必须同时修改客户端和服务器代码。

Step 1 ) you need to have a repeatable SQL proc that returns an appropriate subset of rows. 步骤1 ），您需要具有可重复的SQL proc，该proc返回适当的行子集。 Say you have 2000 rows total, you then need a stored proc that is something like 假设您总共有2000行，那么您需要一个类似以下内容的存储过程

GetEmployeDataRows(@startingrow) -- or pagenumber, or whatever is convenient for you. GetEmployeDataRows（@startingrow）-或页码，或任何对您方便的内容。

Make sure you have a stable query that can be "subsetted" appropriately. 确保您有一个可以适当“细分”的稳定查询。 This is the key to step 1 which you also want to be fast. 这是第一步的关键，您也希望很快。 Row# or Page# may not be a good choice. 行号或页号可能不是一个好的选择。 If returnng Rows in primary key orded, for example, it may be much smarter to pass your subset parameter as @empnum and the include where EmployeeNumber > @empnum in your GetEmployeDataRows 例如，如果对主键中的返回行进行了排序，则将子集参数作为@empnum传递，并在GetEmployeDataRows中将EmployeeNumber> @empnum包含在其中，可能会更聪明。

Step 2 ) Expose a webservice (JSon based usually the best for browser consumption) that takes the startingrow (etc.) as parameter(s) 步骤2 ）公开一个以开始行等为参数的网络服务（通常基于JSon的浏览器使用率最高）

Step 3 ) -- Virtualize your database based on your json service. 步骤3 ）-根据您的json服务虚拟化数据库。

So, this is not a trivial task, but it is the right way to really solve this. 因此，这不是一项艰巨的任务，但这是真正解决此问题的正确方法。 There are plenty of examples for each of these steps. 每个步骤都有很多示例。

-- followup I should have been clearer, DataTables are slow if you have lots of data, would never recommend using without virtualization if you have a 1000 rows of 20 columns, just too sluggish for me. -后续工作我应该更清楚一点，如果您有大量数据，则DataTables速度很慢，如果您有1000行的20列，则永远不建议不使用虚拟化，这对我来说太迟钝了。 If you use support old IE it is of course even slower than normal. 如果使用支持的旧IE，它的速度当然会比正常情况下慢。

Answer 2

Here you got an example of server side processing trough ajax. 在这里，您有一个通过ajax处理服务器端的示例。 I dealed with this, but my solution is very complex. 我已经处理了，但是我的解决方案非常复杂。 If you follow that you are going to make it, pay attention on the json structure that you have to reply from the server. 如果您遵循该方法，请注意必须从服务器回复的json结构。

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-08-23 22:50:14

解决方案2
0 2013-08-23 21:44:00

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-08-23 22:50:14

解决方案2 0 2013-08-23 21:44:00

解决方案1
1 已采纳 2013-08-23 22:50:14

解决方案2
0 2013-08-23 21:44:00