easyui的datagird插件比较好用,也很方便。网上也有很多热的网友贴出了使用代码,但是很少有网友指出在使用过程应该注意的地方,让我实在搞不清分页应该怎么使用。我就说下使用分页功能中要注意的一个小地方。

1、首先你的html得有个table标签

<table id="tt" ></table>

在js页面加载代码中$(document).ready({})加入代码:

$('#tt').datagrid({
  singleSelect:true, //True 就会只允许选中一行。
  fitColumns:true, //True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
  url: 'dataTable.ashx?action=list', //数据请求地址
  title: false, //不要标题
  method:'get', //请求方式
  loadMsg: '数据加载中请稍后……', //数据等待时候的提示
  striped: true, //True 就把行条纹化。(即奇偶行使用不同背景色)
  columns: [[ // field- 后台传来的json 键名,title-表头列名,...
    { field: 'Id', title: 'ID', width: 100, align: 'center' },
    { field: 'Name', title: '名字', width: 100, align: 'center' },
    { field: 'Description', title: '描述', width: 100, align: 'center' },
    { field: 'Price', title: '价格', width: 100, align: 'center' }
  ]],
  pageNumber:1, //初始页码 默认 1
  pageSize: 10, //每页显示的记录条数,默认为10
  pageList: [5, 10], //可以设置每页记录条数的列表
  pagination: true //设置true 才提供分布功能。
})

设置 pagination: true 后就有分页功能了,自动捕获翻页事件,自动重新请求。


如果只需分页功能,加入此段代码就可以了。

当点击翻页按钮时,会自动重新请求服务器并自动带上参数rows和page,后台获取这两个参数进行数据库查询数据即可。

获取数据后,把数据转换成json格式返回,列表就更新了。

注意:json中一定要有两个键名:total,rows

total:控件会根据total的值来判断有多少页,能不能翻页。
rows:控件会展示rows的数据集合。rows的值放的是 本页的某些条数据。
后台返回json例子:{"total":2,"rows":[{"Id":1,"Name":"步步高点读机","Description":"哪里不会点哪里工tttttt","Price":12.0},{"Id":3,"Name":"苹果手","Description":"吊丝专有,泡妞神气","Price":12.0}]}
就此分页功能实现。

easyui datagrid分页要点总结的更多相关文章

  1. EasyUI DataGrid分页数据绑定

    记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...

  2. EasyUI datagrid 分页Json字符串格式

    //EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...

  3. asp.net mvc easyui datagrid分页

    提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...

  4. easyUI datagrid 分页参数page和rows

    Struts2获取easyUI datagrid 分页参数page和rows 用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分. 获取方法:定义两 ...

  5. EasyUI Datagrid 分页显示(客户端)

    转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  7. easyui datagrid 分页略解

    easyui datagrid 本身自带了分页功能. 但是这个需要你自己控制. 在后台可以得到两个datagrid的参数,rows 和page.其中rows是每页要显示的个数,page是第几页.单纯的 ...

  8. jquery easyui datagrid 分页详解

    由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...

  9. easyui datagrid分页

    datagrid分页设置 pagination="true" 貌似是不行的!  只是显示分页工具栏 没有达到分页效果 前端 $(function (){ var p = $('#d ...

随机推荐

  1. pip 直接安装tar.gz zip文件包 (windows linux mac 可用)

    在不能连接外网的机器上安装python的各种包,解压安装要人工输入多条命令: tar -zxvf Flask-WTF-0.10.0.tar.gz cd Flask-WTF-0.10.0 python ...

  2. 【转】maven命令背后是如何工作的

    转载自:http://yinny.iteye.com/blog/1883488 Maven强大的一个重要的原因是它有一个十分完善的生命周期模型(lifecycle),它有三套相互独立的生命周期,请注意 ...

  3. 14.约瑟夫环问题[JosephusProblem]

    [题目] n个数字(0,1,…,n-1)形成一个圆圈,从数字0开始,每次从这个圆圈中删除第m个数字(第一个为当前数字本身,第二个为当前数字的下一个数字).当一个数字删除后,从被删除数字的下一个继续删除 ...

  4. iOS 拍照中加入GPS和具体地理位置

    最近有一个需求,要求用手机拍个照片,并切需要拍摄时间,拍摄gps,拍摄具体街道信息. 首先要感谢PhotoGPSdemo的作者,你可以到这里下载demo http://www.cocoachina.c ...

  5. 【xml】python的lxml库使用

    1.官方教程:http://lxml.de/tutorial.html#parsing-from-strings-and-files  最重要的文档,看完基本就能用了 2.lxml支持xpath,xp ...

  6. Intellj IDEA快捷键

    Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+Insert 生成代码 ...

  7. 原创centos7安装hadoop2.7(转载请注明出处)

    启用ip vi /etc/sysconfig/network-scripts/ifcfg-ONBOOT=yes 编辑DNS /etc/resolv.conf nameserver 114.114.11 ...

  8. Jam的计数法(codevs 1140)

    题目描述 Description Jam是个喜欢标新立异的科学怪人.他不使用阿拉伯数字计数,而是使用小写英文字母计数,他觉得这样做,会使世界更加丰富多彩.在他的计数法中,每个数字的位数都是相同的(使用 ...

  9. 村村通(codevs 2627)

    题目描述 Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 约翰已经给他的农场安排了一条高速的网络线路,他想把这 ...

  10. php 用面向对象的方法对数据库增删改查

    主页面 <body> <h1>主页面</h1> <table width="100%" border="1" cell ...