`
tzylwl
  • 浏览: 91932 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Jquery分页

阅读更多
Jquery分页:


Page.jsp:
<%@ page contentType="text/html; charset=UTF-8"%>

<table tabindex="11" class="im_tb data_list" cellspacing="0" rules="all" border="0" id="page" style="border-width:0px;width:100%;border-collapse:collapse;">
<tr class="tr_list">
<input type="hidden" id="pageno" name="pageno" value=""/>
  <td  colspan="100" style="text-align:right;">&nbsp;
    第<span id="curpage">1</span>页/共<span id="pagecount">1</span>页&nbsp;&nbsp;
    共<span id="recordcount">0</span>条记录&nbsp;&nbsp;每页
    <select name="pagesize" id="pagesize" onchange="book()">
       <option >5</option>
      <option >10</option>
      <option >20</option>
      <option >30</option>
      <option>40</option>
      <option>50</option>
      <option>70</option>
    </select>
    行 <span ><a href="#" id="first" style="font-family:Webdings!important;" disabled> 9 </a></span>
    <a href="#" id="pre" style="font-family:Webdings!important;" disabled> 7 </a>
    <input type="text" id="gopage" name="gopage" style="width:40px; background-color:#F5F5F5;" border="0" onKeyUp="this.value=this.value.replace(/\D/g,'')"   onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
    <input type="button" name="button" id="go" value="Go" class="btn_go"/>
    <span><a href="#" id="next" style="font-family:Webdings!important;" disabled> 8 </a></span>
    <a href="#" id="last" style="font-family:Webdings!important;" disabled> :</a></td>
</tr>
</table>

<script language="javascript" type="text/javascript">

$("#go").bind("click",function(){
var pagecount=$("#pagecount").html();
pagecount=parseInt(pagecount);
if($("#gopage").val()==0)
{
$("#gopage").val(1);
}
if($("#gopage").val()>pagecount)
{
$("#gopage").val(pagecount);
}
$("#pageno").val($("#gopage").val());
book();
})

$("#first").bind("click",function(){
$("#pageno").val("1");
book();
})
$("#pre").bind("click",function(){
var pageno=$("#pageno").val();
pageno=parseInt(pageno);
if(pageno>1)
{
$("#pageno").val(pageno-1);
book();
}
})

$("#next").bind("click",function(){
var pageno=$("#pageno").val();
var pagecount=$("#pagecount").html();
pageno=parseInt(pageno);
pagecount=parseInt(pagecount);
if(pageno<pagecount)
{
$("#pageno").val(parseInt(pageno)+1);
book();
}

})
$("#last").bind("click",function(){
var pagecount=$("#pagecount").html();
$("#pageno").val(pagecount);
book();
})


/**
pageno 页码
pagesize 每页数
recordcount 记录总数
pagecount  总页数
*/
function setPageData(pageno,pagesize,recordcount,pagecount)
{
 
pageno=parseInt(pageno)==0?1:pageno;
pagesize=parseInt(pagesize);
recordcount=parseInt(recordcount);
pagecount=parseInt(pagecount)==0?1:pagecount;

alert(pageno+":"+pagesize+":"+recordcount+":"+pagecount);
if(pageno>pagecount)
{
pageno=pagecount;
}

$("#pageno").val(pageno+"");
$("#curpage").html(pageno+"");
$("#pagesize").val(pagesize+"");
$("#recordcount").html(recordcount+"");
$("#pagecount").html(pagecount+"");


$("#first").attr("disabled",pageno<=1);
$("#pre").attr("disabled",pageno<=1);
$("#next").attr("disabled",pageno>=pagecount);
$("#last").attr("disabled",pageno>=pagecount);
}
</script>



Jquery.js:
function book()
{
 
  var StartRow= $("#pageno").val();
  var pagesize=$("#pagesize").val();

   if (StartRow == null || StartRow == "") {
StartRow = "1";
}
if (pagesize == null || pagesize == "") {
pagesize = "5";
}

var row = (parseInt(StartRow) - 1) * parseInt(pagesize);
 
  $.ajax({
   type:'post',
   url:'bookShop.do',
   cache:false,
   async:true,
   data:{parameter:'bookInfo',startRow:row,pageSize:pagesize},
    success:function(transport)
    {
      var de=transport.documentElement;
      var pageRow=de.getElementsByTagName("pageRow")[0].text;
      var pageSize=de.getElementsByTagName("pageSize")[0].text;
      var rowCount=de.getElementsByTagName("rowCount")[0].text;
      var pageCount=de.getElementsByTagName("pageCount")[0].text;
    
       var nodelist = de.getElementsByTagName("bklist");
       var htmlstr = "";
   for (var i = 0; i < nodelist.length; i++) {
        var id=nodelist[i].getElementsByTagName("id")[0].text;
var author = nodelist[i].getElementsByTagName("author")[0].text;
var bookname = nodelist[i].getElementsByTagName("bookname")[0].text;
var bookid = nodelist[i].getElementsByTagName("bookid")[0].text;
var bookprice = nodelist[i].getElementsByTagName("price")[0].text;

htmlstr += "<tr>"
+"<td>"
+id
+"</td>"
+"<td id='bookid'>"
    + bookid
    + "</td>"
    + "<td>"
    + "<a href=#>"
    + bookname
    + "</a>"
    + "</td>"
    + "<td>"
    + author
    + "</td>"
    + "<td id='price'>"
    + bookprice + "</td>"
    + "<td>"
    + "<a href=bookShop.do?parameter=getBookListCar&bookid=" + bookid + ">"
    + "shoping";
htmlstr += "</a><input type='button' value='\u7f16\u8f91' id='edit' onclick='edit(this)'></td>";
htmlstr += "</tr>";
}
     $("#memberList").html(htmlstr);
     setPageParam(pageRow,pageSize,rowCount,pageCount);
    }
  });
    
}
function setPageParam(pageRow,pageSize,rowCount,pageCount)
{
  
    var pageNo;                   //第几页
if (pageRow % pageSize == 0) {
pageNo = pageRow / pageSize + 1;
} else {
pageNo = pageRow / pageSize;
}

setPageData(pageNo, pageSize, rowCount, pageCount);
}


Action:
public ActionForward bookInfo(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {

int startRow=Integer.parseInt(request.getParameter("startRow"));
int pageSize=Integer.parseInt(request.getParameter("pageSize"));

Document doc = DocumentHelper.createDocument();
Element rsp = doc.addElement("rsp");
Element el = null;
Element booklist=null;

        DataPage<Bookshoping> page=new DataPage<Bookshoping>(startRow,pageSize);
List<Bookshoping> book = bookShopListBiz.getBookShopList(page,startRow,pageSize);

    el = rsp.addElement("page");
    el.addElement("pageRow").setText(String.valueOf(page.getPageNum()));       //从第几条开始显示 
el.addElement("pageSize").setText(String.valueOf(page.getPageSize()));      //每页显示几条
el.addElement("rowCount").setText(String.valueOf(page.getTotalCount()));    //共多少条数据
el.addElement("pageCount").setText(String.valueOf(page.getPageCount()));    //分几页

for(Bookshoping bk:book)
{
booklist=rsp.addElement("bklist");
booklist.addElement("id").setText(String.valueOf(bk.getId()));
booklist.addElement("bookid").setText(String.valueOf(bk.getBookid()));
booklist.addElement("bookname").setText(bk.getBookname());
booklist.addElement("author").setText(bk.getAuthor());
booklist.addElement("price").setText(String.valueOf(bk.getPrice()));
}
writerXML(response, doc);
return null;

}


entity:
package cn.com.zte.Biz.Page;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

@SuppressWarnings("serial")
public class DataPage<T> implements Serializable{

//当前页数
private int pageNum;

//每页数量
private int pageSize;

//总数
private int totalCount;

private List<T> data;

public DataPage(int pageNum,int pageSize)
{
this.pageNum=pageNum;
this.pageSize=pageSize; 
this.data=new ArrayList<T>();
}

/**
* 获取开始的行数
* @return
*/
public int getStartRow()
{
return this.pageNum;
}


/**
* 获取总页数
* @return
*/
public int getPageCount()
{
if(this.pageSize<1 || this.totalCount<1)
{
return 0;
}
else
{
if(totalCount%pageSize==0)
{
return totalCount/pageSize;
}else
{
return totalCount/pageSize+1;
}
}
}
public int getPageNum() {
return pageNum;
}

public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}

public int getPageSize() {
return pageSize;
}

public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}

public int getTotalCount() {
return totalCount;
}

public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}

public List<T> getData() {
if(data==null)
{
data=new ArrayList<T>();
}
return data;
}

public void setData(List<T> data) {
this.data = data;
}

}




分享到:
评论

相关推荐

    jquery 分页

    本篇将详细介绍jQuery分页的基本原理、实现方式以及相关的文件结构。 ### 1. jQuery 分页基本原理 jQuery分页主要基于JavaScript和HTML,通过AJAX技术实现动态加载数据。其工作流程大致如下: 1. 用户点击分页...

    jQuery分页插件设置分页内容显示数量的分页代码

    本篇文章将详细讲解如何使用jQuery分页插件来设置分页内容显示的数量。 首先,我们需要选择一个适合的jQuery分页插件。有许多开源的选项可供选择,例如jQuery Pagination Plugin、jQuery UI Paginator、Bootstrap-...

    jQuery分页插件(实例详尽,简单易用

    jQuery分页插件是网页开发中常用的一种工具,它能够帮助开发者轻松地在大量数据中实现页面的分段展示,提高用户体验,同时减轻服务器负担。本文将深入探讨jQuery分页插件的工作原理、优势以及如何在实际项目中进行...

    jquery分页插件结合jsp实例

    本教程将详细介绍如何使用jQuery分页插件与JavaServer Pages(JSP)结合,实现一个高效的分页功能。我们将重点讨论jQuery分页插件jPagination的使用方法,以及它与JSP的集成。 首先,`jQuery`是一种轻量级的...

    jQuery分页

    jQuery分页是网页开发中常用的一种技术,用于处理大量数据的显示,特别是在用户需要浏览多页内容时。这种技术能够将大块数据分成若干小部分,每次只加载一部分到页面上,提高页面加载速度,优化用户体验。jQuery分页...

    jQuery分页插件 很实用

    在本教程中,我们将深入探讨jQuery分页插件的使用方法、核心功能和优点。 首先,jQuery分页插件的工作原理是通过JavaScript库jQuery来动态加载和展示页面内容。当用户点击分页按钮时,插件会向服务器发送请求,获取...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    jQueryPager是一款轻量级的jQuery分页插件,它允许开发者通过Ajax无刷新的方式实现网页数据的分页加载。此插件名为`pagination`,在CSDN等技术交流平台上被广泛讨论和分享。 **1. jQuery与Ajax** jQuery是一个强大...

    jquery分页插件-内有演示说明

    **jQuery分页插件**是Web开发中常用的一种工具,用于在大量数据中实现高效的页面导航,提升用户体验。本资源包含一个演示说明,使得理解和应用变得更加直观和简单。以下将详细解析jQuery分页插件的核心知识点及其...

    .net 类的JQuery分页.net 类的JQuery分页

    在.NET开发中,jQuery分页是一种常见的用于网页数据展示的技术,尤其在大数据量的列表或者表格中,分页能够提高用户体验,避免一次性加载过多数据导致页面加载缓慢。本项目主要探讨了如何在.NET环境中结合jQuery实现...

    jquery分页插件带总数分页代码

    本知识点将详细讲解如何使用jQuery分页插件实现带总数的分页代码。 首先,我们需要一个分页插件。这里提到的"jquery分页插件带总数分页代码"可能是指包含总条数显示功能的插件,例如"jQuery Pagination Plugin with...

    自己写的jQuery分页根据json分页

    在IT行业中,jQuery分页是一种常见的网页数据展示技术,它能有效地管理大量数据,提高用户体验。本项目名为“自己写的jQuery分页根据json分页”,表明这是一个使用jQuery库实现的自定义分页功能,该功能依赖于JSON...

    简单实用的jquery分页插件

    要实现jQuery分页,我们首先需要引入jQuery库。确保在HTML文件中包含以下代码,以便在页面中使用jQuery: ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ``` 接着,选择一个合适的...

    五款漂亮的jquery分页插件

    以下是对"五款漂亮的jquery分页插件"的详细分析: 1. **Bootstrap Pagination** Bootstrap是广泛使用的前端框架,它自带的Pagination组件简洁而实用。这款jQuery分页插件具有响应式设计,可以自适应不同设备的屏幕...

    jQuery分页插件jPagination 超实用

    jQuery分页插件jPagination是Web开发中一个非常实用的工具,它可以帮助开发者轻松地在大量数据中实现分页功能,提升用户体验。jPagination利用了jQuery的强大功能,以简洁的API设计,使得分页功能的集成变得简单易行...

    jQuery分页插件页码跳转代码.zip

    jQuery分页插件是实现这一功能的强大工具,它简化了JavaScript代码,让开发者可以快速实现动态分页效果。本资源"jQuery分页插件页码跳转代码.zip"提供了实现这一功能的代码示例。 首先,我们需要了解jQuery分页的...

    简单的jQuery分页插件下载.zip

    **jQuery分页插件简介** 在网页开发中,分页是一种常见的数据展示方式,它能够帮助用户有效地浏览大量数据,避免一次性加载过多内容导致页面响应变慢或内存消耗过大。jQuery是一个轻量级的JavaScript库,它简化了...

    jQuery分页排序插件.zip

    jQuery分页排序插件是前端开发中常用的工具,它极大地提升了网页数据展示的用户体验,尤其在处理大量数据时。这款插件允许用户对HTML结构进行排序、分页和过滤,无需复杂的后端处理,减轻了服务器负担,同时也提高了...

    jquery分页大全

    **jQuery分页插件概述** 在网页开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高用户体验。jQuery,一个流行的JavaScript库,提供了丰富的插件和方法来实现分页功能。"jQuery分页大全"这个...

    JS+Jquery分页插件

    总结来说,JS+jQuery分页插件通过利用jQuery库的强大功能,结合CSS样式表,可以轻松实现网页的高效分页功能,提高用户在浏览大量数据时的体验。对于前端开发者而言,理解并掌握这种插件的使用和实现原理,有助于提升...

    jquery分页

    分页,并使用jquery ajax传数据。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。...

Global site tag (gtag.js) - Google Analytics