jquery easyui datagrid添加前台分页

原创 2013年12月05日 23:28:29

对jquery easyui datagrid添加前台分页功能,java后台生成一个list集合并且转成json数据类型返回前台,前台代码如下

/**

 * 前台分页
 * @param param
 * @param success
 * @param error
 * @return
 */
function noPagerLoader(param,success,error){
var that = $(this);
var opts = that.datagrid("options");
if (!opts.url) {
return false;
}
var cache = that.data().datagrid.cache;
if (!cache) {
$.ajax({
type : opts.method,
url : opts.url,
data : param,
dataType : "json",
success : function (data) {
that.data().datagrid['cache'] = data;
success(bulidData(data));
},
error : function () {
error.apply(this, arguments);
}
});
} else {
success(bulidData(cache));
}

function bulidData(data) {
var temp = $.extend({},data);
var tempRows = [];
var start = (param.page - 1) * parseInt(param.rows);
var end = start + parseInt(param.rows);
var rows = data;
for (var i = start; i < end; i++) {
if(rows[i]){
tempRows.push(rows[i]);
}else{
break;
}
}
temp.rows = tempRows;
temp.total=data.length;
return temp;
}
}


datagrid的属性loader:noPagerLoader

jQuery EasyUI datagrid本地分页

一般分页都是后台做,前端做无论从
  • qinshenxue
  • qinshenxue
  • 2014年05月22日 09:30
  • 12265

easyui datagrid 前台分页的实现java采用的版本

使用easyui分页,有后台服务器端实现和前台浏览器端实现。服务器端实现按规定的格式返回数据就可以了,前台实现需要写js来实现。 代码如下: 关键代码: 1 ...
  • qq_25824243
  • qq_25824243
  • 2017年06月17日 14:06
  • 4256

js实现EasyUI-datagrid前台分页

牛腩新闻发布系统中讲到过两种分页的方式:真分页与假分页       这两种分页方式是怎么回事呢?所谓真分页就是从数据库中查询出需要展示的条数,比如10条,下次我再要展示25条的时候它再次访问数据库,...
  • lxy344x
  • lxy344x
  • 2015年08月12日 22:39
  • 3650

jquery easyui datagrid 添加超链接

var username = $("#form_username").val(); $('#tt').datagrid({ url:webContext+"/user/queryUserList....
  • zengmingen
  • zengmingen
  • 2016年07月18日 15:11
  • 1156

jquery easyui datagrid 数据样式的设置

数据样式对表格中的选取的数据进行样式设置。
  • qq_35070434
  • qq_35070434
  • 2016年12月04日 19:52
  • 216

jquery easyui datagrid data format

 概要         jQuery EasyUI是一个基于jquery的集成了各种用户界面的框架,使用easyui我们不需要写太多javascript代码,一般情况下我们只需要使用一...
  • wilsonke
  • wilsonke
  • 2014年07月08日 16:53
  • 6804

EasyUI数据分页实现(真假分页)

数据分页功能的实现是在任何一个项目中都非常实用的一个功能,在ASP.NET学习的时候,曾写过一篇关于分页功能的实现(点击查看),上面已经介绍的真假分页的优缺点,在这里我们就不过多的赘述了。现在的分页实...
  • why15732625998
  • why15732625998
  • 2016年08月14日 11:56
  • 10975

jquery EasyUI数据表格datagrid中load,reload,loadData方法的区别

初学者小问题大问题的都比较多,就是因为初学嘛,对框架了解的没那么深入。这里我就拿出初学可能会遇到的一个问题来讲一讲,datagrid比较常 用也比较复杂,它有其中有load,reload,loadDa...
  • H12KJGJ
  • H12KJGJ
  • 2017年06月08日 19:32
  • 1988

easyUI datagrid显示摘要信息在页脚

@author YHC 在这个教程中,我们将告诉你如何显示摘要信息行在datagrid页脚. 查看 Demo 显示页脚行,你应该设置showFooter 属性为true,然后准备页脚...
  • yhc13429826359
  • yhc13429826359
  • 2012年08月11日 10:37
  • 5267

easyui datagrid 单元格使用进度条

{field: 'status', title: '进度', width: getWidth(0.12), align: 'center', f...
  • qq_32053361
  • qq_32053361
  • 2016年12月22日 13:56
  • 714
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery easyui datagrid添加前台分页
举报原因:
原因补充:

(最多只允许输入30个字)