本地数据jqGrid分页
var mydata='';
$(function() {
var str = '';
str += "<span>共<span id='p_total'></span>条记录</span> "
str += "<span>每页" + "<select id='set_page_size' class='ui-button ui-widget ui-state-default ui-corner-all'>"
str += "<option value='5'>5</option>" + "<option value='10'>10</option>" + "<option value='15'>15</option>"
str += "<option value='20' selected='selected'>20</option>" + "<option value='25'>25</option>" + "<option value='30'>30</option>"
str += "</select>" + "条 </span>";
str += "<span style='width:230px;height:20px;'>";
str += "<span id='p_first'> </span>";
str += "<span id='p_before'> </span>";
str += "<span class='p_count'>当前<span id='p_current'>1</span> / <span id='p_total_page'></span>页</span>"
str += "<span id='p_next'> </span>";
str += "<span id='p_last'> </span>";
str += "</span>";
str += "<span style='margin-left:10px;'>跳转到:</span>"
str += "<input type='text' id='p_pager'/> 页"
$("#pager").append(str);
mydata = [{
id: "1",
invdate: "2007-10-01",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
}, {
id: "2",
invdate: "2007-10-02",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "3",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}, {
id: "4",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
}, {
id: "5",
invdate: "2007-10-05",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "6",
invdate: "2007-09-06",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}, {
id: "7",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
}, {
id: "8",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "9",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}, {
id: "10",
invdate: "2007-10-01",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
}, {
id: "11",
invdate: "2007-10-02",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "12",
invdate: "2007-10-02",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "13",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}, {
id: "14",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
}, {
id: "15",
invdate: "2007-10-05",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "16",
invdate: "2007-09-06",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}, {
id: "17",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
}, {
id: "18",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "19",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}, {
id: "20",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}, {
id: "21",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}
];
jQuery("#grid1").jqGrid({
datatype: "local",
width: pageWidth() - 18,
height: 450,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"
}, {
name: 'invdate',
index: 'invdate',
width: 90,
sorttype: "date"
}, {
name: 'name',
index: 'name',
width: 100
}, {
name: 'amount',
index: 'amount',
width: 80,
align: "right",
sorttype: "float"
}, {
name: 'tax',
index: 'tax',
width: 80,
align: "right",
sorttype: "float"
}, {
name: 'total',
index: 'total',
width: 80,
align: "right",
sorttype: "float"
}, {
name: 'note',
index: 'note',
width: 150,
sortable: false
}
],
rownumbers: true,
multiselect: false,
caption: "Manipulating Array Data"
});
// 数据初始化
var total = mydata.length;//记录总数
$("#p_total").html(total);
var p_total_page='';//页数总数
var p_num = $("#set_page_size option:selected").val();//当前页显示数据
if(total % p_num == 0){
p_total_page = parseInt(total / p_num);
}else{
p_total_page = parseInt(total / p_num)+1;
}
$("#p_total_page").html(p_total_page);
for (var i = 0; i < p_num; i++) {
jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
}
// 总页数/每页显示多少条记录
$("#set_page_size").change(function() {
$("#grid1").clearGridData();
p_num = $("#set_page_size option:selected").val();
if(total % p_num == 0){
p_total_page = parseInt(total / p_num);
}else{
p_total_page = parseInt(total / p_num)+1;
}
$("#p_total_page").html(p_total_page);
$("#p_current").html(1);//当前页码
for (var i = 0; i < p_num; i++) {
jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
}
});
// 第一页
$("#p_first").click(function() {
$("#p_current").html("1");
var p_num = $("#set_page_size option:selected").html();
$("#grid1").clearGridData();
for(var i=0;i<p_num;i++){
jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
}
});
// 前一页
$("#p_before").click(function() {
var num = $("#p_current").html();
var a = new Array();
if (num > 1) {
$("#p_current").html(num - 1);
var p = $("#p_current").html()-1;
var p_num = $("#set_page_size option:selected").html();
var sum = p*p_num;
$("#grid1").clearGridData();
for (var i = sum; i < mydata.length; i++) {
a.push(mydata[i]);
}
for(var i=0;i<p_num;i++){
jQuery("#grid1").jqGrid('addRowData', i + 1, a[i]);
}
};
});
// 下一页
$("#p_next").click(function() {
var num = $("#p_current").html();
var total = $("#p_total_page").html();
var a = new Array();
if (num < total) {
$("#p_current").html(parseInt(num) + 1);
var p = $("#p_current").html()-1;
var p_num = $("#set_page_size option:selected").html();
var sum = p*p_num;
$("#grid1").clearGridData();
for (var i = sum; i < mydata.length; i++) {
a.push(mydata[i]);
}
for(var i=0;i<p_num;i++){
jQuery("#grid1").jqGrid('addRowData', i + 1, a[i]);
}
};
});
//最后一页
$("#p_last").click(function() {
$("#p_current").html(p_total_page);
var p = $("#p_current").html()-1;
var p_num = $("#set_page_size option:selected").html();
var sum = p*p_num;
var a = new Array();
$("#grid1").clearGridData();
for (var i = sum; i < mydata.length; i++) {
a.push(mydata[i]);
}
for(var i=0;i<p_num;i++){
jQuery("#grid1").jqGrid('addRowData', i + 1, a[i]);
}
});
// 跳转到几页
$("#p_pager").keydown(function(e) {
if (e.keyCode == 13) {
var pager = $("#p_pager").val();
if (pager <= p_total_page) {
$("#p_current").html(pager);
var p = pager-1;
var p_num = $("#set_page_size option:selected").html();
var sum = p*p_num;
var a = new Array();
$("#grid1").clearGridData();
for (var i = sum; i < mydata.length; i++) {
a.push(mydata[i]);
}
for(var i=0;i<p_num;i++){
jQuery("#grid1").jqGrid('addRowData', i + 1, a[i]);
}
} else {
alert("请正确输入要跳转的页码!");
}
}
})
});
function pageWidth() {
if ($.browser.msie) {
return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
} else {
return self.innerWidth;
}
};
本地数据jqGrid分页的更多相关文章
- vuejs实现本地数据的筛选分页
今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码 效果图: 项目需要:点击左侧进 ...
- jqgrid 分页时，清空原表格数据加载返回的新数据
由于,我们是动态分页,分页后的数据是在触发分页后动态加载而来.如何使jqgrid清空原数据而加载新数据? 1)调用jqgrid的 clearGridData 方法清空表格数据 2)调用jqgrid的 ...
- jqGrid 分页
这两天一直在搞jqGrid分页,焦头烂额,不过还是有点收获的(主要是后台分页): jqGrid分页可以分为两种,远程数据(服务器数据)分页和本地数据分页, 先看远程数据分页: $(&q ...
- extjs_02_grid(显示本地数据，显示跨域数据)
1.显示表格 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...
- 本地数据Store。Cookie，Session，Cache的理解。Timer类主要用于定时性、周期性任务 的触发。刷新Store,Panel
本地数据Store var monthStore = Ext.create('Ext.data.Store', { storeId : 'monthStore', autoLoad : false, ...
- iOS --- UIWebView的加载本地数据的三种方式
UIWebView是IOS内置的浏览器,可以浏览网页,打开文档 html/htm pdf docx txt等格式的文件. safari浏览器就是通过UIWebView做的. 服务器将MIM ...
- Django数据操作F和Q、model多对多操作、Django中间件、信号、读数据库里的数据实现分页
models.tb.objects.all().using('default'),根据using来指定在哪个库里查询,default是settings中配置的数据库的连接名称. 外话:django中引 ...
- Android本地数据存储复习
Android本地数据存储复习 Android无论是应用层还是系统层都需要在本地保存一些数据,尤其在应用层中使用的就更为普遍,大体有这么几种:SharedPreference,file,sqlite数 ...
- IOS中NSUserDefaults的用法（轻量级本地数据存储）
NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名.密码之类的,个人觉得使用NSUserDefaults是首选.下次再登陆的时候就可以直接从NSUserDefa ...
随机推荐
- springbatch操作CSV文件
一.需求分析 使用Spring Batch对CSV文件进行读写操作: 读取一个含有四个字段的CSV文件(id, name, age, score), 对文件做简单的处理, 然后输出到还有一个csv文件 ...
- javascript and dom1
<script type="text/javascript"> //数组 var beatles=Array(4); var beatles=Array(); cons ...
- unity3d 血液
这里的人物头像和血条是在3d世界生成的,所以有真正的纵深感和遮挡关系,废话不多说,看我是怎么实现的. 第一步.先在UI Root里制作头像和血条. 这个制作步骤基本和我前面一篇文章介绍头像血条的制作步 ...
- leetcode[61] Unique Paths
题目:给定一个m*n的矩阵,从头开始,只能往右边和下边走,一次走一格,知道走到最后一个(右下角)为止.总共有多少种走法. 典型的动态规划吧.其实从头走到尾部,和从尾部开始走到头是一样的次数.我们用一个 ...
- PhpStorm创建Drupal模块项目开发教程
在PhpStorm开发工具中,创建Drupal开发项目有两种方式:整合Drupal到现有的项目中和直接创建一个新的Drupal模块. 接下来将展示这两种方式的具体操作! 整合Drupal到现有的项目 ...
- js 文字预写匹配
效果图: demo如下: <!DOCTYPE html> <html> <head> <title>文字预写</title> </he ...
- Android总结的基本机制监控事件
研究上午Android底层机制事件监视器,例如下面的摘要: 内核驱动监控硬件状态和行为,由uevent机制将事件发送到用户空间: 通过用户空间UeventObserver从内核监控uevent,处理. ...
- PhotoShop基本工具 -- 移动工具
艺术或学习的东西吧, 爱好 比学编程还难 PS版本号 : PhotoShop CS6 1. 移动工具 (1) 工具栏和属性栏 工具栏 和 属性栏 : 左側的是工具栏, 每选中一个工具, 在菜单条的 ...
- js中的屏蔽
js屏蔽效果 /** 屏蔽F1帮助 */ window.onhelp = function(){return false;} /** *屏蔽 F5.Ctrl+N.Shift+F10.Alt ...
- CODEFORCES #272 DIV2[为填完]
#272是自己打的第一场cf,感觉这一套质量挺棒的,不像后两场略水 //先附上A,B,C的题解,因为离noip只剩下一点时间了,所以之后不一定还刷cf,暂且就先放上前三题好了 A题目大意忘了.懒得看, ...