js分页查询

/**

* 分页说明:

* 因为是JS分页,所以有2个方法必须自己手动写入,分别是getMaxCount()和findPage()

* getMaxCount()为获得当前的记录总数,

* findPage()为根据下方的3个变量查找的列表。

* 然后还需在页面的最下方增加一个div,div的DIV为pageTool

*/

var pageCount=10;//每页数量

var pageIndex=1;//当前第几页

var maxPage=10;//总页数

var total=0;//总数

function nextPage(){

if(pageIndex<maxPage){

pageIndex=parseInt(pageIndex)+1;

}

findPage();

initTool();

//findPage();

}

function prePage(){

if(pageIndex>1){

pageIndex=parseInt(pageIndex)-1;

}

findPage();

initTool();

//findPage();

}

function search(){

dwr.engine.setOrdered(false);

dwr.engine.setAsync(false);

getMaxCount();

pageIndex=1;

findPage();

initTool();

//findPage();

}

function clickPage(index){

pageIndex=index;

findPage();

initTool();

//findPage();

}

function clickPage1(){

var button=document.getElementById("goText");

if(button.value>0&&button.value<=maxPage){

clickPage(button.value);

}else{

alert("请输入一个大于0小于"+maxPage+"的数字");

}

}

function initTool(){

var pageTool=document.getElementById("pageTool");

var pageTooltr=‘<table  style="text-align: center;"><tr id="pageTooltr" style="height:30px;">‘;

pageTooltr+=‘<td>共‘+total+‘条数据 </td>‘;

pageTooltr+=‘<td>第‘+pageIndex+‘页 </td>‘;

pageTooltr+=‘<td>共‘+maxPage+‘页 </td>‘;

pageTooltr+=‘<td><a href="javascript:clickPage(1)">首页</a></td>‘;

if(pageIndex!=1){

pageTooltr+=‘<td><a href="javascript:prePage(‘+pageIndex+‘)">上一页</a></td>‘;

}

pageIndex=parseInt(pageIndex);

var first=pageIndex-4>0?pageIndex-4:1;

var last=pageIndex+4<maxPage?pageIndex+4:maxPage;

for(var a=first;a<last+1;a++){

if(a==pageIndex){

pageTooltr+=‘<td><a href="javascript:clickPage(‘+a+‘)">‘+a+‘</a></td>‘;

}else{

pageTooltr+=‘<td><a href="javascript:clickPage(‘+a+‘)">‘+a+‘</a></td>‘;

}

}

if(pageIndex!=maxPage){

pageTooltr+=‘<td><a href="javascript:nextPage()">下一页</a></td>‘;

}

pageTooltr+=‘<td ><a href="javascript:clickPage(‘+maxPage+‘)">尾页</a></td>‘;

pageTooltr+=‘<td >跳到第</td>‘;

pageTooltr+=‘<td ><input id="goText" type="text" style="width: 25px;"/></td>‘;

pageTooltr+=‘<td >页</td>‘;

pageTooltr+=‘<td><input id="goButton" type="button" value="go"/></td>‘;

pageTooltr+=‘</tr></table>‘;

pageTool.innerHTML=pageTooltr;

}

时间: 2024-07-31 14:18:56

js分页查询的相关文章

bos 第4 (区域excel批量导入、区域通用分页查询、分区的添加、分区多条件分页查询、分区导出excel)

BOS项目笔记 第4天 今天内容安排: 1.区域批量导入功能 jQuery OCUpload(一键上传插件).apache POI.pinyin4j 2.实现区域的分页查询 3.对分页代码重构 4.添加分区(combobox下拉框) 5.分区的组合条件分页查询 6.分区数据导出功能 1. 区域数据批量导入功能 1.1 一键上传插件使用 ajax不能做文件上传. 第一步:在jsp页面中引入插件的js文件 <script type="text/javascript" src=&quo

材料管理框架:一个共通的viewModel搞定所有的分页查询

前言 大家看标题就明白了我想写什么了,在做企业信息化系统中可能大家写的最多的一种页面就是查询页面了.其实每个查询页面,除了条件不太一样,数据不太一样,其它的其实都差不多.所以我就想提取一些共通的东西出来,再写查询时只要引入我共通的东西,再加上极少的代码就能完成.我个人比较崇尚代码简洁干净,有不合理的地方欢迎大家指出. 这篇文章主要介绍两个重点:1.前台viewModel的实现.2.后台服务端如何简洁的处理查询请求. 需求分析 查询页面要有哪些功能呢 1.有条件部输入查询条件(这个不打算做成共通的

Ajax写分页查询(实现不刷新页面)

要求: 获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表吧! 一张简单的表 代码,引入jquery包: <script src="jquery-1.11.2.min.js"></script> 写一张表格,显示我们的代号跟名称: <table class="table table-striped&

PHP中使用jQuery+Ajax实现分页查询多功能操作

1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax做分页</title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> <script src="Ajax_

基于Mysql数据库的SSM分页查询

前言: Hello,本Y又来了,"分页"在我们使用软件的过程中是一个很常见的场景,比如博客园对于每个博主的博客都进行了分页展示.可以简单清晰的展示数据,防止一下子将过多的数据展现给用户,毕竟用户的阅读能力和短期接受力都有限,使用分页可以避免带给用户浏览上的不舒服感,利用它可以带给用户良好的体验,便于浏览和查询数据.那么本期我们的博客就来探讨关于分页,使用的Java的框架是Spring+Springmvc+mybatis,这也是目前企业非常流行的搭配方式,使用的数据库是Mysql,我们将

ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询

ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询 1.demo简介 这是一个由ExtJs4.2,Mysql5.5 ,Struts2,Hibernate3.3构成的简单web项目,本人由于最近在研究ExtJs所以特意做了这个Demo,方便有需要的同学查看,也给自己留下学习笔记吧.需要特别说明我这里并没有整合Struts,Hibernate,这两个工具是独立运行的.转载请注明:http://blog.csdn.net/qiuzhping/article/details/

如何用ajax写分页查询(以留言信息为例)-----2017-05-17

要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总数. (2)计算分页信息,此处,以每页显示5条信息为例.分页列表(如图)以当前页为中心,向前显示2条,向后显示2条. (3)给每个分页列表添加对应的点击事件. (4)能够实现分页后,添加查询分页功能. 现实效果图: 第一步:引入 jquery文件和bootstrap文件.(因为表格和分页均是用的bo

一个共通的viewModel搞定所有的分页查询一览及数据导出(easyui + knockoutjs + mvc4.0)

前言 大家看标题就明白了我想写什么了,在做企业信息化系统中可能大家写的最多的一种页面就是查询页面了.其实每个查询页面,除了条件不太一样,数据不太一样,其它的其实都差不多.所以我就想提取一些共通的东西出来,再写查询时只要引入我共通的东西,再加上极少的代码就能完成.我个人比较崇尚代码简洁干净,有不合理的地方欢迎大家指出. 这篇文章主要介绍两个重点:1.前台viewModel的实现.2.后台服务端如何简洁的处理查询请求. 需求分析 查询页面要有哪些功能呢 1.有条件部输入查询条件(这个不打算做成共通的

框架 day50 BOS项目 4 批量导入(ocupload插件,pinyin4J)/POI解析Excel/Combobox下拉框/分区组合条件分页查询(ajax)/分区数据导出(Excel)

知识点: 批量导入(ocupload插件,pinyin4J /POI解析Excel(apache POI) /区域分页查询 /Combobox下拉框 /分区组合条件分页查询(ajax) /分区数据导出(Excel下载) BOS项目笔记第4天 1.    区域批量导入功能 *Ajax不支持文件上传. *上传并且不刷新上传页面原理: Target到一个0,0,0的隐藏iframe里,造成一个没有刷新的假象 <form target="myIframe" action="ab