EasyUIASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

引言:

自家想本人个博客网址出来,技术途径是用ASN.NET MVC5+EF陆(Code
First)+ZUI+各类Jquery插件,有了这些想法之后就起来选拔UI,看了成都百货上千bootstrap的模版之后,发现即使你用了bootstrap还是要团结写css样式,都以自学的,前端真的很垃圾,在网上找了很多UI,以下是各样UI的地点,供给的能够去探访:

H-ui:http://www.h-ui.net/H-ui.admin.shtml
,是一个前端大拿弄得,模仿bootstrap,做适合中中原人民共和国网上的UI。

Amaze UI:http://amazeui.org/ ,中国HTML5 前端框架
对IE老版本包容不好,那些自家也是网上看的IE十之上 不错 若是想包容IE8官网都说不怎么好了。

ZUI:http://zui.sexy/
三个依据Bootstrap深度定制开源前端实践方案,帮忙您快速构现代跨屏应用。

最终接纳了ZUI,因为是Bootstrap定制的 上手也不难点
因为原先也学过Bootstrap的使用 自身写了些DEMO
感觉不错,笔者找了广大模板都是弄好了,海外的多,所之前端本身又破烂,就改起来也发麻烦,就不吐弃了,首假如和谐或然垃圾了。

 

壹.登录界面

有了上述的办法之后笔者就和好初叶做了叁个登录界面:

EasyUI 1

虽说被技术群里的大神 嫌弃了很久 然则 作者要好做的。

 

2.表格的选项

腼腆各位,以上好像讲的跟要说的东西没什么关系,接下去就是表格选拔了,作者是一个很纠结的人,真的很纠结,由于ZUI中唯有表格的体裁,没用那种含蓄分页
一共多少条,设置每页的页数,遵照ZUI的始创人士的传道是,分页那几个能够用js分页控件来替代,那样重点是为了加载数据,那是她们在类型中推行的结果,不过小编要么想要个有那么些意义的表格,所以自身就想协调在网上找,找到七个贰个是JQGrid和jquery
Datatables,就又开端纠结了用哪个了? 因为以前用过jQuery EasyUI
所以壹从头接纳了JQGrid:

 

  二.1JQGgird在asp.net MVC下促成进程:

       在JQGgird官网下载js文件,官网地址:http://www.trirand.com/blog/
,貌似再次创下新了201陆年7月17日,DEMO
地址:http://www.guriddo.net/demo/bootstrap/ 
Bootstrap风格,其它3个粤语demo网址:http://blog.mn886.net/jqGrid/
然后初阶上干货:

       一.创造以个JQGridController控制器:

EasyUI 2

       2.身无寸铁index页面 引进相应的js以及CSS样式:

EasyUI 3

  三.翻看插入的参数: rows为一页多少条记录 ;page为第几页;

EasyUI 4

EasyUI 5

四.翻看数据重回的格式
:page为第几页;records:为1起多少条数据;rows:为数量集合;total:为一起多少页

EasyUI 6

伍.然后就依葫芦画瓢在后台弄个这么的多寡格式出来:

EasyUI 7

伍.一:分页查询的方法,使用的是查询多少条,跳过多少条的笔触:

EasyUI 8

陆.前端HTML页面调用以及js部分:
要求验证1些的是:http://www.guriddo.net/demo/bootstrap/ DEMO中的实例使用的是php的后台数据格式为
datatype: “jsonp”;而小编那里MVC重回要改成
datatype:”json”,为了那几个题材本身弄了旷日持久,难过。

EasyUI 9

 

柒、显示效果:

EasyUI 10

总的来看的效应之后笔者,小编就起来不舒服了
为何右边会有空白的地点,望着不爽,当加载了数量过多的时候,发现原来是为着滚动条保留的职分

EasyUI 11

下一场作者就纠结,不欣赏那几个样式了,有接到的jquery Datatables

 

二.2jquery Datatables在asp.net MVC下促成进程:

       同样在网上找官网:汉语官网:http://datatables.club/ 
(是一个大牌在很早在此在此之前用过jquery
Datatables之后,发现汉语的素材很少,就跟国外的撰稿人联系翻译成人中学文,很钦佩那种人)
;英文官网 :https://datatables.net/examples/index

      ①.率先成立DataTabController控制器:

EasyUI 12 

  贰.创造index页面 引进相应的js以及CSS样式:

EasyUI 13

3.查看官网实例找参数,以及重回数据格式:

劳动器端分页demo:https://datatables.net/examples/server_side/jsonp.html

`datatables 需要配置"serverSide": true,才能张开服务端格局;关键参数:start为从第几条起初;length为一页多少条;draw:为绘制计数器。那一个是用来保管Ajax从服务器再次回到的是呼应的(Ajax是异步的,因而回到的次第是不明确的)。 供给在服务器收到到此参数后再回去(具体看上边);具体参数查询官网地址http://datatables.club/manual/server-side.html`

EasyUI 14

归来数据格式:data为数据集;draw:为绘制计数器;recordsFiltered:为过滤多少条;recordsTotal:为1起多少条

EasyUI 15

四.然后笔者就起来写两道三科的以为本人会用了应当更JQGrid大约:

EasyUI 16

  5.   前端html以及js代码:

EasyUI 17

结果是报错了:

EasyUI 18

弄了很久没弄出来:因为本人的查询数据重返的格式是跟DEMO中1致的,作者就从头郁闷了:

EasyUI 19

 

总结:

透过群里的大神指点,终于找到标题了:

因为datatables中传播后台的参数是start表示的是从第几页条起初跟jqgrid的page第几页分化,第1次穿到后台的是0,从第0条开首,在分页的时候:传0过去减一的话正是负数,所以报错

EasyUI 20

于是做了修改:

先把pagesize做个判断

EasyUI 21

在分页的时候也修改了跳过条数的设置

EasyUI 22

接下来再度启航空度量试页面:

EasyUI 23

那般数据就出去了

后续:

        
希望作者的下结论对亟待用到JQGrid以及Datatables多个JS控件的小伙伴,有帮带吗,多谢。此外作者会继续弄小编的博客,把内部用到的知识点,一点一点的享受给大家,微博的大神太多了,感谢大神的帖子给本人在技能中相见难题是不是的救助。