Java JSP tag paging, jquery plug-in paging Encapsulation

Pagination CSS

.pagination{    margin: 20px auto 0;    width: 960px;    font-size:12px;    text-align: center;}.pagination a{    border:1px solid #CCCCCC;    color: #336CA9;    font-weight: bold;    margin-right: 3px;    padding: 2px 9px;    text-decoration: none;    cursor: pointer;}.pagination .all{    font-size: 14px;    margin-right: 10px;}.pagination .all b{    margin: 0 5px;}.pagination a:hover{    background-color: #1987CD;    color:#FFFFFF;    background-image: none;}.pagination .current{    color: #000000;    font-weight: bold;    margin-right: 3px;    padding: 2px 9px;}.pagination span.disabled{    border:1px solid #CCCCCC;    color: #336CA9;    font-weight: bold;    margin-right: 3px;    padding: 2px 9px;}

Java class Encapsulation

Package com. rying. weibo. util; import java. io. IOException; import javax. servlet. jsp. jspException; import javax. servlet. jsp. tagext. tagSupport; import cn.com. rying. logs. ryingLogs; public class PageTag extends TagSupport {private static final long serialVersionUID = 5729832874890417508l; private String url; // request URI private int pageSize; // number of records to be displayed per page private int currentPage; // current page number private int pageRecordCount; // total number of records @ Override public int doStartTag () throws JspException {int pageCount = (pageRecordCount + pageSize-1)/pageSize; // calculate the total number of pages RyingLogs. infoLogs ("url =" + url + "/pageSize =" + pageSize + "/currentPage =" + currentPage + "/count =" + pageRecordCount ); // The HTML text StringBuilder sb = new StringBuilder (); sb. append ("\ r \ n <span stype = \" align: center \ "class = \" pagination \ "> \ r \ n"); if (pageRecordCount = 0) {sb. append ("<strong> no data can be displayed </strong> \ r \ n");} else {// page number cross-border processing if (currentPage> pageCount) {currentPage = pageCount;} if (currentPage <1) {currentPage = 1;} sb. append ("<form method = \" post \ "action = \"\""). append ("name = \" qPagerForm \ "> \ r \ n"); // sets the current page number to the request parameter sb. append ("<input type = \" hidden \ "name = \""). append ("currentPage "). append ("\" value = \""). append (currentPage ). append ("\"/> \ r \ n "); sb. append ("<input type = \" hidden \ "name = \""). append ("pageSize "). append ("\" value = \""). append (pageSize ). append ("\"/> \ r \ n "); // outputs the statistical data sb. append ("<label class = \" all \ "> total <B> "). append (pageCount ). append ("</B> page </label>"); // if (currentPage = 1) {sb. append ("<span class = \" disabled \ "> Homepage "). append ("</span> \ r \ n "). append ("<span class = \" disabled \ "> previous page "). append ("</span> \ r \ n");} else {sb. append ("<a href = \" javascript: void (0 )\""). append ("onclick = \" turnOverPage ("). append (1 )). append (") \"> homepage </a> \ r \ n "); sb. append ("<a href = \" javascript: void (0 )\""). append ("onclick = \" turnOverPage ("). append (currentPage-1 )). append (") \"> previous page </a> \ r \ n ");} // The maximum page number displayed on the page is int maxPage = 10; int center = maxPage/2; int start = 0; int end = 0; // the maximum number of pages cannot exceed maxPage if (pageCount <= maxPage) {start = 1; end = pageCount ;} else {// if the current page is more than half the maximum page number displayed, if (currentPage> center) {// if the end is not displayed, the total number of page numbers displayed is maxPage if (currentPage + center> pageCount) {start = currentPage-(maxPage-(pageCount-currentPage) + 1; end = pageCount;} else {// The center value of the current page control is start = currentPage-center + 1; end = currentPage + center ;}} else {// start = 1; end = maxPage ;}} for (int I = start; I <= end; I ++) {if (currentPage = I) {// the current page number does not require a hyperlink sb. append ("<B class = \" current \ "> "). append (I ). append ("</B> \ r \ n");} else {sb. append ("<a href = \" javascript: void (0 )\""). append ("onclick = \" turnOverPage ("). append (I ). append (") \"> "). append (I ). append ("</a> \ r \ n") ;}// next page processing if (currentPage = pageCount) {sb. append ("<span class = \" disabled \ "> next page "). append ("</span> \ r \ n"); sb. append ("<span class = \" disabled \ "> last page "). append ("</span> \ r \ n");} else {sb. append ("<a href = \" javascript: void (0 )\""). append ("onclick = \" turnOverPage ("). append (currentPage + 1 )). append (") \"> next page </a> \ r \ n "); sb. append ("<a href = \" javascript: void (0 )\""). append ("onclick = \" turnOverPage ("). append (pageCount )). append (") \"> last page </a> \ r \ n ");} sb. append ("</form> \ r \ n"); // generate JS sb. append ("<script language = \" javascript \ "> \ r \ n"); sb. append ("function turnOverPage (no) {\ r \ n"); sb. append ("var qForm = document. qPagerForm; \ r \ n "); sb. append ("qForm. currentPage. value = no; \ r \ n "); // obtain the custom property sb. append ("qForm. action = \""). append (url ). append ("\"; \ r \ n "); sb. append ("qForm. submit (); \ r \ n "); sb. append ("} \ r \ n"); sb. append ("</script> \ r \ n");} sb. append ("</span> \ r \ n"); // output the generated HTML to the response. try {pageContext. getOut (). println (sb. toString ();} catch (IOException e) {throw new JspException (e);} return SKIP_BODY; // The label subject is empty, so directly skip the subject} public void setUrl (String url) {this. url = url;} public void setpageSize (int pageSize) {this. pageSize = pageSize;} public void setcurrentPage (int currentPage) {this. currentPage = currentPage;} public void setpageRecordCount (int pageRecordCount) {this. pageRecordCount = pageRecordCount ;}}

Pagetld

<?xml version="1.0" encoding="UTF-8"?><taglib version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd"><tlib-version>0.9</tlib-version><short-name>p</short-name><tag><name>page</name><tag-class>com.rying.weibo.util.PageTag</tag-class><body-content>empty</body-content><attribute><name>currentPage</name><required>true</required><rtexprvalue>true</rtexprvalue><type>int</type></attribute><attribute><name>pageRecordCount</name><required>true</required><rtexprvalue>true</rtexprvalue><type>int</type></attribute><attribute><name>pageSize</name><required>true</required><rtexprvalue>true</rtexprvalue><type>int</type></attribute><attribute><name>url</name><required>true</required><rtexprvalue>true</rtexprvalue><type>java.lang.String</type></attribute></tag></taglib>

Page header Introduction

<%@taglib prefix="p" uri="/page.tld"  %>

  <div class="pagination">        <p:page pageSize="${pageSize}" currentPage="${currentPage}" url="searchStatus.action?nick=${nick }&content=${content }&topic=${topic }&weiboId=${weiboId }&sortType=${sortType }&startTime=${startTime }&endTime=${endTime }" pageRecordCount="${pageRecordCount}" />    </div>

Jquery ajax paging Encapsulation

/*** Jquery. pagination. JS ** Author: Irwin. AI ** Date: 2013-04-07 */(function ($) {$. FN. pagination = function (options) {var opts = $. extend ({}, $. FN. pagination. defaults, options); return this. each (function () {var $ this = $ (this);/*** calculate the total number of pages */function calculatepages (data) {return (data. total % opts. pagesize) = 0 )? Math. floor (data. total/opts. pagesize): (math. floor (data. total/opts. pagesize) + 1);}/*** calculation start and end page number */function getinterval (data) {// maximum page number displayed on the page var maxpage = 10; vaR center = maxpage/2; var start = 0; var end = 0; var pagecount = calculatepages (data); // the maximum number of pages cannot exceed maxpage if (pagecount <= maxpage) {start = 1; end = pagecount;} else {// if the current page is more than half of the Max displayed page, if (OPTs. currentpage> Center) {// The tail is not displayed, The total number of displayed page numbers is maxpage if (OPTs. currentpage + center> pagecount) {start = opts. currentpage-(maxpage-(pagecount-opts. currentpage) + 1; end = pagecount;} else {// the current page control shows the central value start = opts. currentpage-center + 1; end = opts. currentpage + center ;}} else {// start = 1; end = maxpage ;}} return [start, end];} /*** select the page number and flip the page */function selectpage (PAGE) {opts. currentpage = page; Dr Aw ();}/*** fill display link HTML */function draw () {If (OPTs. Ajax. url! = NULL) {var transdata = (OPTs. Ajax. Data = NULL )? (New object (): opts. ajax. data); transdata. pagesize = opts. pagesize; transdata. currentpage = opts. currentpage; $. ajax ({URL: opts. ajax. URL, data: transdata, datatype: opts. ajax. datatype, success: function (data) {opts. ajax. callback (data); If (Data = NULL | DATA = "") {return;} If (data. total = undefined) {return;} else {// clear $ this. empty (); If (data. total = 0) {return;} else {// obtain the page number var pagecount = calculatepages (data); var interval = getinterval (data); // If (OPTs. currentpage> opts. pagecount) {opts. currentpage = pagecount;} If (OPTs. currentpage <1) {Copts. currentpage = 1 ;}$ this. append ('<lable class = "all"> total <B>' + pagecount + '</B> page </label>'); If (OPTs. currentpage = 1) {$ this. append ('<SPAN class = "disabled"> homepage </span> <SPAN class = "disabled"> previous page </span>');} else {$ this. append ('<a href = "javascript: void (0)" class = "first"> homepage </a> <a href = "javascript: void (0) "Class =" pre "> previous page </a> ');} For (VAR I = interval [0]; I <= interval [1]; I ++) {If (OPTs. currentpage = I) {$ this. append ('<B class = "current">' + I + '</B>');} else {$ this. append ('<a href = "javascript: void (0)" class = "cur">' + I + '</a>') ;}} if (OPTs. currentpage = pagecount) {$ this. append ('<SPAN class = "disabled"> next page </span> <SPAN class = "disabled"> last page </span>');} else {$ this. append ('<a href = "javascript: void (0)" class = "Next"> next page </a> <a href = "javascript: void (0) "Class =" end "> last page </a> ');} $ (". first "). BIND ("click", function () {selectpage (1) ;}); $ (". end "). BIND ("click", function () {selectpage (calculatepages (data) ;}); $ (". pre "). BIND ("click", function () {selectpage (parseint (OPTs. currentpage)-1);}); $ (". next "). BIND ("click", function () {selectpage (parseint (OPTs. currentpage) + 1);}); $ (". cur "). BIND ("click", function () {selectpage ($ (this ). text () ;}}}}) ;}} draw () ;};}; $. FN. pagination. defaults = {Ajax: {URL: NULL, // URL address data: NULL, // data, must be the object datatype: 'json', // data type: 'get', // submission type callback: function () {}// success callback function}, pagesize: 5, // The number displayed on each page currentpage: 1 // current page };}) (jquery );

Jquery call

    $(".pagination").pagination({        ajax : {              url : 'search.action',              dataType : 'json',              data : {"search":"test"},              callback : function(data){                   //do something              }        },        pageSize : 5  });

Page Effect