ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Data

ASP.NET MVC与EF在服务端分页中使用jqGrid和jquery Datatables的旅程

我一直梦想着为自己创建一个博客网站，技术路线选择了ASP.NET MVC5、EF6（Code First）、ZUI以及各种Jquery插件。在确定了技术路线后，我开始寻找合适的UI框架。我研究了多个选项，包括H-ui、Amaze UI和ZUI。最终，我选择了ZUI，因为它是基于Bootstrap的定制版本，更容易上手。

接下来，我将详细介绍在ASP.NET MVC下使用JQGrid实现服务端分页的过程。你需要在JQGrid官网下载js文件，然后建立一个JQGridController控制器。在建立了控制器后，你需要建立index页面，并引入相应的js和CSS样式。

在前端HTML页面调用和js部分，需要特别注意的是，DEMO中的实例使用的是php后台的数据格式datatype: "jsonp"，而在ASP.NET MVC中，我们需要将其改为datatype:"json"。这个问题困扰了我很久，经过反复尝试，最终得以解决。

展示效果

当我看到展示效果时，我开始感到不适。界面的左边出现了空白的地方，这让我感到不爽。当我加载更多数据时，我发现这是为了滚动条预留的位置。这让我不禁开始纠结，对这样的样式产生了不满。于是，我开始寻找解决方案，发现了接下来的jquery Datatables。

接下来是jquery Datatables在asp MVC下的实现过程

我在网上找到了两个官网，一个是中文官网 Datatables后，发现中文资料很少，于是与国外的作者联系翻译成中文的。这让我对这位大牛充满了敬意。

建立DataTabController控制器是第一步。接下来，建立index页面并引入相应的js以及CSS样式。然后，我查看了官网的实例，寻找需要的参数以及返回数据的格式。例如，服务器端的分页demo

在使用datatables时，需要配置"serverSide": true,才能开启服务端模式。关键的参数包括start（表示从第几条开始）、length（表示一页多少条）和draw（绘制计数器），这些参数用于确保Ajax从服务器返回的是对应的数据（因为Ajax是异步的，返回的顺序是不确定的）。这些参数需要在服务器接收到后再返回。具体参数的使用方法可以在官网查询

返回的数据格式中，data为数据集、draw为绘制计数器、recordsFiltered为过滤多少条、recordsTotal为总共多少条。

我开始编写代码，本以为使用起来应该和JQGrid差不多。但在前端html以及js代码完成后，结果却报错了。我检查了自己的查询数据返回的格式，和DEMO中的一样，却仍然报错。这让我很是郁闷。

在群里的指导下，我终于找到了问题所在。原来在datatables中传到后台的参数start表示的是从第几条开始，而不是第几页开始。我第一次传入的参数是0，表示从第0条开始。在分页时如果传入的参数是负数就会报错。因此我在修改时，先对pagesize进行了判断，同时在分页时修改了跳过条数的设置。经过这些修改后，重新启动测试页面，数据成功显示出来了。

后续

希望这篇文章能对需要使用JQGrid以及Datatables两个JS控件的小伙伴们有所帮助。感谢大家的阅读。

精彩专题分享

以上内容由cambrian渲染呈现。