var mydata='';
$(function() {
var str = '';
str += "<span>共<span id='p_total'></span>条记录</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
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>" + "条&nbsp;&nbsp;</span>";
str += "<span style='width:230px;height:20px;'>";
str += "<span id='p_first'>&nbsp;&nbsp;</span>";
str += "<span id='p_before'>&nbsp;&nbsp;</span>";
str += "<span class='p_count'>当前<span id='p_current'>1</span>&nbsp;/&nbsp;<span id='p_total_page'></span>页</span>"
str += "<span id='p_next'>&nbsp;&nbsp;</span>";
str += "<span id='p_last'>&nbsp;&nbsp;</span>";
str += "</span>";
str += "<span style='margin-left:10px;'>跳转到:</span>"
str += "<input type='text' id='p_pager'/>&nbsp;页"
$("#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分页的更多相关文章

  1. vuejs实现本地数据的筛选分页

    今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码 效果图: 项目需要:点击左侧进 ...

  2. jqgrid 分页时，清空原表格数据加载返回的新数据

    由于,我们是动态分页,分页后的数据是在触发分页后动态加载而来.如何使jqgrid清空原数据而加载新数据? 1)调用jqgrid的 clearGridData 方法清空表格数据 2)调用jqgrid的  ...

  3. jqGrid 分页

    这两天一直在搞jqGrid分页,焦头烂额,不过还是有点收获的(主要是后台分页):   jqGrid分页可以分为两种,远程数据(服务器数据)分页和本地数据分页,     先看远程数据分页:   $(&q ...

  4. extjs_02_grid(显示本地数据，显示跨域数据)

    1.显示表格 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...

  5. 本地数据Store。Cookie，Session，Cache的理解。Timer类主要用于定时性、周期性任务 的触发。刷新Store,Panel

    本地数据Store var monthStore = Ext.create('Ext.data.Store', { storeId : 'monthStore', autoLoad : false, ...

  6. iOS --- UIWebView的加载本地数据的三种方式

    UIWebView是IOS内置的浏览器,可以浏览网页,打开文档  html/htm  pdf   docx  txt等格式的文件.  safari浏览器就是通过UIWebView做的. 服务器将MIM ...

  7. Django数据操作F和Q、model多对多操作、Django中间件、信号、读数据库里的数据实现分页

    models.tb.objects.all().using('default'),根据using来指定在哪个库里查询,default是settings中配置的数据库的连接名称. 外话:django中引 ...

  8. Android本地数据存储复习

    Android本地数据存储复习 Android无论是应用层还是系统层都需要在本地保存一些数据,尤其在应用层中使用的就更为普遍,大体有这么几种:SharedPreference,file,sqlite数 ...

  9. IOS中NSUserDefaults的用法（轻量级本地数据存储）

    NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名.密码之类的,个人觉得使用NSUserDefaults是首选.下次再登陆的时候就可以直接从NSUserDefa ...

随机推荐

  1. 微信应用号开发知识贮备之Webpack实战

    天地会珠海分舵注:随着微信应用号的呼之欲出,相信新一轮的APP变革即将发生.作为行业内人士,我们很应该去拥抱这个趋势.这段时间在忙完工作之余准备储备一下这方面的知识点,以免将来被微信应用号的浪潮所淹没 ...

  2. 从久负盛名的GoDaddy开发革命来看Node.js的风靡程度

    英文原文连接:http://venturebeat.com/2015/02/09/godaddy-nodejitsu/ 网站主机托管公司GoDaddy将要进一步通过新的开发工具来提升自身能力.最新消息 ...

  3. 4. SQL Server数据库状态监控 - 作业状态

    原文:4. SQL Server数据库状态监控 - 作业状态 有很多地方可以设置定时任务,比如:Windows的计划任务,Linux下的crontab,各种开发工具里的timer组件.SQL Serv ...

  4. sb2-admin

    近期开发中遇到的问题总结   最近准备把后台管理系统重新设计开发下,使用了bootstrap,在网上找了个漂亮的后台模板:sb2-admin,在使用中遇到了不少问题,总结下,以免以后忘记. 1.EF5 ...

  5. Android SDK Web SDK 接口测试总结

    什么是SDK SDK就是一个程序,提供一些方法,调用这些方法,可以实现一些功能.如:调用银行提供的SDK,可以实现在线支付的功能. 目前主要接手的SDK有js SDK 和android SDK.JS ...

  6. QT添加exe文件的图标LOGO

    首先你需要一个ICO文件,这样的一个: 使用百度搜索到的在线工具直接生成一个ICO文件保存到本地就可以了 将这人LOGO.ico文件保存到自己的resource文件夹下 然后在工程中新建一个qrc文件 ...

  7. Ubuntu中改变文件的默认打开方式

    其实最简单的方法是右键,在属性中修改,不过这样做没啥意义. ubuntu中与文件的打开方式相关的配置文件有四个: /etc/gnome/defaults.list 这是全局配置文件 /usr/shar ...

  8. ubuntu下使用openocd+jlink进行STM32开发调试

    安装openocd就不用多说了,使用 apt-get install openocd 这个命令就可以做到. 对于使用stm32w系列的MCU,需要下载新的openocd-0.7及以上版本才能支持.0. ...

  9. 警惕使用WebClient.DownloadFile(string uri,string filePath)方法

    原文:警惕使用WebClient.DownloadFile(string uri,string filePath)方法 WebClient.DownloadFile(string uri,string ...

  10. 【SSRS】入门篇(二) -- 建立数据源

    原文:[SSRS]入门篇(二) -- 建立数据源 通过 [SSRS]入门篇(一) -- 创建SSRS项目 这篇,我们建立了一个SSRS项目: 接下来,我们以 AdventureWorks2012 示例 ...