本地数据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 ...
随机推荐
- php rsa 加密、解密、签名、验签
由于对接第三方机构使用的是Java版本的rsa加解密方法,所有刚开始在网上搜到很多PHP版本的rsa加解密,但是对接java大多都不适用. 以下php版本是适用于对接java接口,java适用密钥再p ...
- ASP.NET MVC企业级项目框架
ASP.NET MVC企业级项目框架 MVC项目搭建笔记---- 项目框架采用ASP.NET MVC+Entity Framwork+Spring.Net等技术搭建,搭建过程内容比较多,结合了抽象工厂 ...
- 快速构建Windows 8风格应用25-数据绑定
原文:快速构建Windows 8风格应用25-数据绑定 本篇博文主要介绍如何将UI元素与数据进行绑定.数据绑定的方向.数据更改通知.数据转换.数据绑定支持的绑定方案. 数据绑定是一种简单方式来显示数据 ...
- C++中出现的计算机术语2
C-style strings(C 风格字符串) C 程序把指向以空字符结束的字符数组的指针视为字符串.在 C++ 中,字符串字面值就是 C 风格字符串.C 标准库定义了一系列处理这样的字符串的库函数 ...
- Spring Resource之ResourceLoader
ResourceLoader接口意味着任何实现的对象都能够返回Resource实例. public interface ResourceLoader { Resource getResource(St ...
- Your build host version of Xamarin.IOS (release NO.)is too recent to work with the IOS designer
Encounted such error in VS after I update the xamarin at Mac side.Here is the solution for u to refe ...
- WPF随手小记之二 ——改变DataGrid样式
大部分时候我们并不需要手动改变DataGrid的样式,因为用默认的其实也看得过去,而且在DataGrid中的数据也远比外观重要. 但总有时候,我们需要做点必要的UI修改来使DataGrid更美观. 一 ...
- 为mongodb加上权限
我们知道mysql在安装的时候需要我们设置一个数据库默认的用户名和密码,mongodb也不例外,不过mongodb是默认的没有设置访问限制的,不需要输入用户名和密码都可以访问的,但是这样会十分的不安全 ...
- 如何用dumpbin.exe检查编译器生成的托管模块所嵌入的信息
开启CMD 运行到dumpbin目录下:D:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\bin 运行命令VCVARS32.BAT,配置环境 ...
- 读书笔记—CLR via C#章节1-2
这本书这几年零零散散读过两三遍了,作为经典书籍,应该重复读反复读,既然我现在开始写博了,我也准备把以前觉得经典的好书重读细读一遍,并且将笔记整理到博客中,好记性不如烂笔头,同时也在写的过程中也可以加深 ...