• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >ASP.NET > ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

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

作者:坚持的孤独 字体:[增加 减小] 来源:互联网 时间:2017-05-11

坚持的孤独通过本文主要向大家介绍了ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一直想自己做个博客网站,技术路线是用ASN.NET MVC5+EF6(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老版本兼容不好,这个我也是网上看的IE10以上 不错 如果想兼容IE8 官网都说不怎么好了。

ZUI:http://zui.sexy/ 一个基于Bootstrap深度定制开源前端实践方案,帮助你快速构现代跨屏应用。

最后选择了ZUI,因为是Bootstrap定制的 上手也容易点 因为以前也学过Bootstrap的使用 自己写了些DEMO 感觉不错,我找了很多模板都是弄好了,国外的多,所以前端自己又垃圾,就改起来也发麻烦,就不放弃了,主要是自己还是垃圾了。

1.登录界面

有了以上的方法之后我就自己开始做了一个登录界面:

虽然被技术群里的大神 嫌弃了很久 但是我自己做的。

2.表格的选择

不好意思各位,以上好像讲的跟要说的东西没什么关系,接下来就是表格选择了,我是一个很纠结的人,真的很纠结,由于ZUI中只有表格的样式,没用那种带有分页 一共多少条,设置每页的页数,按照ZUI的创始人员的说法是,分页这些可以用js分页控件来代替,这样主要是为了加载数据,这是他们在项目中实践的结果,但是我还是想要个有这些功能的表格,所以我就想自己在网上找,找到两个一个是JQGrid和jquery Datatables,就又开始纠结了用哪个了? 因为以前用过jQuery EasyUI 所以一开始选择了JQGrid:

2.1JQGgird在asp.net MVC下实现过程:

在JQGgird官网下载js文件,官网地址:http://www.trirand.com/blog/ ,貌似又更新了2016年6月9日,DEMO 地址:http://www.guriddo.net/demo/bootstrap/ Bootstrap风格,另外一个中文demo网站:http://blog.mn886.net/jqGrid/ 然后开始上干货:

1.建立以个JQGridController控制器:

2.建立index页面 引入相应的js以及CSS样式:

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

4.查看数据返回的格式 :page为第几页;records:为一共多少条数据;rows:为数据集合;total:为一共多少页

5.然后就依葫芦画瓢在后台弄个这样的数据格式出来:

5.1:分页查询的方法,使用的是查询多少条,跳过多少条的思路:

6.前端HTML页面调用以及js部分: 需要说明一点的是:http://www.guriddo.net/demo/bootstrap/DEMO中的实例使用的是php的后台数据格式为 datatype: "jsonp";而我这里MVC返回要改成 datatype:"json",为了这个问题我弄了好久,痛苦。

7、展示效果:

看到的效果之后我,我就开始不舒服了 为什么左边会有空白的地方,看着不爽,当加载了数据过多的时候,发现原来是为了滚动条保留的位置

然后我就纠结,不喜欢这个样式了,有接下的jquery Datatables

2.2jquery Datatables在asp.net MVC下实现过程:

同样在网上找官网:中文官网:http://datatables.club/ (是一个大牛在很早以前用过jquery Datatables之后,发现中文的资料很少,就跟国外的作者联系翻译成中文,很崇拜这种人) ;英文官网 :https://datatables.net/examples/index

1.首先建立DataTabController控制器:

2.建立index页面 引入相应的js以及CSS样式:

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

返回数据格式:data为数据集;draw:为绘制计数器;recordsFiltered:为过滤多少条;recordsTotal:为总共多少条

4.然后我就开始写大言不惭的认为自己会用了应该更JQGrid差不多:

5. 前端html以及js代码:

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2018-08-20Visual Studio 2017 15.5 正式发布!性能再提升
  • 2017-05-11asp.net Timer的使用方法
  • 2018-08-20.NET/ASP.NET Routing路由(深入解析路由系统架构原理)
  • 2017-05-11详解Asp.net Core 使用Redis存储Session
  • 2017-05-11asp.net core mvc实现伪静态功能
  • 2017-05-11用ASP.NET还原与恢复Sql server
  • 2017-05-11DataGridView展开与收缩功能实现
  • 2017-05-11ASP.Net下载大文件的实现方法
  • 2017-06-05Exception type: HttpException Exception message: Request timed out.
  • 2017-05-11.NET实现XML与DataTable互转的实例代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 三种方法让Response.Redirect在新窗口打开
    • asp.net(c#) RSS功能实现代码
    • dz asp.net论坛中函数--根据Url获得源文件内容
    • asp.net 更改gridview pageSize的方法
    • ASP.NET对HTML页面元素进行权限控制(一)
    • 如何传值在2个页面之间 要求不刷新父页面,并且不能用Querystring传值
    • asp.net自定义分页控件示例
    • Asp.net 图片文件防盗链(尊重劳动成果)及BeginRequest事件学习
    • asp.net 读取并修改config文件实现代码
    • asp.net 页面输出缓存

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有