0

我有一个显示员工列表的数据表。当我的员工人数在 0-2000 范围内时它工作正常，但之后加载该页面时会出现严重的滞后时间。这真的不足为奇，因为它在页面加载时加载了大量数据。我到处找，我找不到一个很好的例子来说明如何进行服务器端处理。我在 git hub 上找到的项目在我的计算机上确实无法运行（我遇到了很多“缺少引用”的错误）。这是我现在正在工作的代码

雇员.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 );
    }

有人可以告诉我如何将此客户端数据表更改为服务器端处理数据表。

4

2 回答 2

1

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

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

GetEmployeDataRows(@startingrow) -- 或页码，或任何你方便的东西。

确保您有一个可以适当“子集”的稳定查询。这是第 1 步的关键，您也想加快速度。Row# 或 Page# 可能不是一个好的选择。例如，如果在主键排序中返回行，则将子集参数作为@empnum 传递并在 GetEmployeDataRows 中包含 where EmployeeNumber > @empnum 可能会更聪明

第 2 步）公开一个以起始行（等）作为参数的 Web 服务（基于 JSON，通常最适合浏览器使用）

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

所以，这不是一项微不足道的任务，而是真正解决这个问题的正确方法。每个步骤都有很多示例。

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

于 2013-08-23T22:50:14.620 回答
0

在这里，您获得了通过ajax 进行服务器端处理的示例。我处理了这个，但我的解决方案非常复杂。如果您遵循您将要成功的信息，请注意您必须从服务器回复的 json 结构。

于 2013-08-23T21:44:00.173 回答