本地数据jqGrid分页

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;
}

};

转载于:https://www.cnblogs.com/jiangu66/p/3180143.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261427.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

避免将项目名称用作映射类型名称

避免将项目名称用作映射类型名称 在 Visual Studio 中向 BizTalk 项目添加新映射时&#xff0c;请不要将项目名称用作类型名称。如果这样做&#xff0c;编译器将生成一个或多个错误&#xff0c;类似于“类型中不存在类型名称‘’”。 若要从 BizTalk 项目内更改映射的类型名称&…

大教堂和市集

该文的作者Eric Raymond是Open Source Software领域的领袖&#xff0c;这方面许多新的思想正是从他那儿产生的&#xff0c;同时他也是UNIX上最流行的Email软件Fetchmail 的作者。 HansB翻译 本博文仅做简单排版 一. 大教堂和市集 Linux的影响是非常巨大的。甚至在&#xff15…

使用eclipse svn塔建(配置)时的一点点心得

有没有人遇到下面这种情况&#xff1f;&#xff1f;自己创建的SVN如下&#xff1a; 但网上别人搭建好的是这样子的&#xff1a; 就是为什么我的只有个主文件&#xff0c;而没有src、webroot、meta-inf、web-inf等子文件呢&#xff1f;&#xff1f; 这是我找了很多网上的资料&am…

android 获取网卡mac_Java获取Linux安卓设备的mac地址方法

Java如何获取Linux或安卓Android设备的mac地址呢&#xff1f;方法非常简单&#xff0c;只需要使用下方代码即可轻松通过java获取mac地址了&#xff0c;代码如下&#xff1a;public String getMacAddress() {String macAddress null;String str "";try {//linux下查…

实例构造器和类(引用类型)

构造器是允许将类型的实例初始化为良好状态的一种特殊方法。构造器方法在“方法定义元数据表”中始终教.ctor。创建一个引用类型的实例时&#xff0c;首先为实例的数据字段分配内存&#xff0c;然后初始化对象的附加字段&#xff08;类型对象指针呵呵同步块索引&#xff09;&am…

android 文件选择器_Android 开发 打开系统文件、图片、视频等 实现单选多选功能...

在网上搜下&#xff0c;如何实现图片的多选或者文件的多选&#xff0c;令人纳闷的是居然多是moudle、或第三方jar包&#xff0c;当然第三方的工程功能复杂或兼容性比较好&#xff0c;并没有说明Android系统是如何提供多选的。既然这么多图片选择器的工程、或者是文件选择器的工…

C语言错误: HEAP CORRUPTION DETECTED

程序源代码&#xff1a; //写文件两种方式(文本文件和二进制文件)#define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include<string.h>//文本写文件 int writeWord(const char *path,const char *pword){int ERRO_MSG 0;if (path N…

您不能不知的ToString()方法

1.1.1 摘要 相信大家对ToString()方法再熟悉不过了&#xff0c;由于该方法是.NET程序中最常用的方法之一&#xff0c;我们除了可以直接调用ToString()方法之外&#xff0c;.NET中的某些方法也隐式调用ToString()方法&#xff08;WPF&#xff0c;Windows Form和Silverlight等&am…

微信转账一次显示两个_微信为啥分红包和转账两大功能?这4个区别你要知道,望相互转告...

众所周知&#xff0c;自从移动支付普及之后&#xff0c;支付宝、微信就已经成为人们手机中必备的APP&#xff0c;其中微信更是具备社交、支付等一系列功能&#xff0c;所以在国内吸引了超十一亿用户的使用&#xff01;当我们节假日、过年时&#xff0c;很多用户都喜欢给亲朋好友…

java 正则提取及替换字符串

2019独角兽企业重金招聘Python工程师标准>>> <% page import"java.util.regex.Pattern" %><% page import"java.util.regex.Matcher" %><% page import"java.util.List" %><% page import"java.util.Array…

IE的documentMode属性

参看下面链接:《IE的documentModeshuxing》 转载于:https://www.cnblogs.com/chaoguo1234/p/3192865.html

Android传感器编程入门

一、前言 我很喜欢电脑&#xff0c;可是笔记本还是太大&#xff0c;笔记本电脑再小还是要弄个小包背起来的&#xff0c;智能手机则不同&#xff0c;它完全就是一个手机&#xff0c;可以随意装在一个口袋里随身携带。因此我在2002年左右时最喜欢玩装备是Dell的PDA&#xff0c;20…

python引入redis_使用python向Redis批量导入数据

1.使用pipeline进行批量导入数据class Redis_Handler(Handler):def connect(self):#print self.host,self.port,self.tableself.conn Connection(self.host,self.port,self.table)def execute(self, action_name):filename "/tmp/temp.txt"batch_size 10000with o…

使用R语言绘制中国地图

R语言环境 R3.1.1 Windows8.1 需要安装的packages: maptools,gp 绘图所需要的数据 中国地图的GIS数据 &#xff08;可以此下面的网址下载) http://cos.name/wp-content/uploads/2009/07/chinaprovinceborderdata_tar_gz.zip 是一个压缩包&#xff0c;完全解压后包含三个文件&am…

ASP.NET MVC 5 学习教程:控制器传递数据给视图

起飞网 ASP.NET MVC 5 学习教程目录&#xff1a; 添加控制器添加视图修改视图和布局页控制器传递数据给视图添加模型创建连接字符串通过控制器访问模型的数据生成的代码详解使用 SQL Server LocalDBEdit方法和Edit视图详解添加查询Entity Framework 数据迁移之添加字段添加验证…

如何将ListT转换相应的Html(xsl动态转换)(二)

一、前言 紧跟着上一篇随笔&#xff0c;本文主要涉及到如何将xml与xsl动态转换成html&#xff0c;这个才是最关键的地方&#xff0c;所有的内容都是围绕这个主题来进行开展的。根据指定的xsl样式将List<T>转换相应的Html&#xff0c;相关的随笔如下&#xff1a; &#xf…

echarts折线图背景线_echarts设置折线线条颜色和折线点颜色的实例

本文主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下&#xff0c;希望能帮助到大家。1、问题背景设计一条折线图&#xff0c;但是图形中不用插件自带的颜色&am…

saxbuilder用法(转)

xml为我们在网络交换数据带来很大方便,在java中可以使用saxbuilder来操作xml格式文件,下面介绍一下saxbuilder的常用方法.import org.jdom.Document;import org.jdom.Element;import org.jdom.JDOMException;import org.jdom.input.SAXBuilder;import org.jdom.output.XMLOutpu…

页面添加复制代码功能

简单的"复制代码" 功能<a href"javascript:" οnclick"CopyCode(document.getElementById(code1));">复制代码</a> <div id"code1"> 点击复制 这里放代码这里放代码这里放代码这里放代码这里放代码这里放代码这里放…

Linux CentOS 5.5 服务器安装图文教程

下面开始&#xff1a; 系统版本&#xff1a;CentOS 5.5 将镜像刻成光盘&#xff0c;设置BIOS将CDROM设置为第一启动 启动画面&#xff1a; 通过提示&#xff0c;按ENTER进入图形安装模式&#xff08;E文不好的&#xff0c;赶紧补习去哈~~~&#xff09; 我们按ENTER键 信息检测&…