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. 10 Python Optimization Tips and Issues

    转自: http://www.algorithm.co.il/blogs/computer-science/10-python-optimization-tips-and-issues/

  2. C# 代理/委托 Delegate

    本文转载自努力,努力,努力 1. 委托的定义:委托是函数的封装,它代表一"类"函数.他们都符合一定的签名:拥有相同的参数列表,返回值类型.同时,委托也可以看成是对函数的抽象,是函数 ...

  3. STM32canopen调试

    问题1:用usbcan监测不到can口的报文 属于接线问题 CANopen程序总使用的是can1 对应的接下口在J1的1和2口,而其接口排序是从外向里排序,故最外面的为1号接口,由于接线时,按照左边的 ...

  4. Apple Swift中英文开发资源集锦[apple swift resources]

    找到的一些Apple Swift中英文资源原文链接,希望对大家有所帮助.欢迎大家补充,原始资源链接最好! The Swift Programming Language https://develope ...

  5. Android Your content must have a ListView whose id attribute is 'android.R.id.list'错误的解决办法

    在Android开发中,ListView有着很重要的地位,使用的场合也非常的多 错误提示:Your content must have a ListView whose id attribute is ...

  6. Codeforces7C 扩展欧几里得

    Line Time Limit: 1000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u Submit Status ...

  7. July 25th, Week 31st Monday, 2016

    We will not go quietly into the night. 今夜,我们将奋战到底. We will be the champion. We will not stop fightin ...

  8. 组合数(codevs 1631)

    1631 组合数  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 组合数C(N, K)表示 ...

  9. CodeIgniter - 集成七牛云存储

    最近有一个项目需要集成七牛云存储的图片存储和调用功能,程序是基于CodeIgniter2.1.3的PHP框架.刚拿到手完全无从下手的感觉,因为像框架这种东西,想从官方的PHPSDK集成进去,需要改动很 ...

  10. Web应用你加盐了吗?——浅谈MD5加密算法中的加盐值(SALT)

    转自:http://blog.csdn.net/blade2001/article/details/6341078 我们知道,如果直接对密码进行散列,那么黑客可以对通过获得这个密码散列值,然后通过查散 ...