简单标签开实现类似QQ搜搜的分页效果

最新推荐文章于 2024-05-02 16:04:25 发布

huangxw000

最新推荐文章于 2024-05-02 16:04:25 发布

阅读量565

点赞数

分类专栏： Java 文章标签： qq string javascript class encoding border

本文链接：https://blog.csdn.net/huangxw000/article/details/7070687

版权

Java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、编写分页标签：

package com.commons;

import java.io.IOException;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.SimpleTagSupport;

public class PaginationTag extends SimpleTagSupport {
    private String currentPage = "1";
    private String totalPage = "0";
    private String numberPerPage = "10";

    public String getCurrentPage() {
	return currentPage;
    }

    public void setCurrentPage(String currentPage) {
	this.currentPage = currentPage;
    }

    public String getTotalPage() {
	return totalPage;
    }

    public void setTotalPage(String totalPage) {
	this.totalPage = totalPage;
    }

    public String getNumberPerPage() {
	return numberPerPage;
    }

    public void setNumberPerPage(String numberPerPage) {
	this.numberPerPage = numberPerPage;
    }

    public PaginationTag() {
	super();
    }

    @Override
    public void doTag() throws JspException, IOException {
	StringBuffer sb = new StringBuffer("");
	int total = Integer.parseInt(this.getTotalPage());
	if (total != 0) {
	    int current = Integer.parseInt(this.getCurrentPage());
	    int number = Integer.parseInt(this.getNumberPerPage());
	    int startRow = ((current - 1) / number) * number;
	    startRow = startRow == 0 ? 1 : startRow;
	    int endRow = startRow + number;
	    sb.append("<div id='pager'><div class='pg'>");
	    String params = "'" + total + "','" + number + "','" + "{current}"
		    + "'";

	    if (current != 1)
		sb.append("<a class='pre' href='javascript:void(0)' οnclick=\"pre("
			+ params.replace("{current}", String.valueOf(current))
			+ ")\">上一页<</a>");
	    for (int i = startRow; i < endRow; i++) {
		if (current == i)
		    sb.append("<span class='current'>" + i + "</span>");
		else {
		    sb.append("<a class='flag_pg' href='javascript:void(0)' href='javascript:void(0)' οnclick=\"current("
			    + params.replace("{current}", String.valueOf(i))
			    + ")\">" + i + "</a>");
		}
	    }
	    if (current != total)
		sb.append("<a class='next' href='javascript:void(0)' οnclick=\"next("
			+ params.replace("{current}", String.valueOf(current))
			+ ")\">下一页></a>");
	    sb.append("</div></div>");
	}
	this.getJspContext().getOut().write(sb.toString());
    }
}

2、编写tag描述tld文件

<?xml version="1.0" encoding="UTF-8" ?>

<taglib 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"
    version="2.0">
    
  <description>define framework tag library</description>
  <display-name>define framework tag</display-name>
  <tlib-version>1.0</tlib-version>
  <short-name>defTag</short-name>
  <uri>http://www.defTag.com/defTag</uri>

 <tag><!--分页标签 -->
	  <name>PaginationTag</name>
	  <tag-class>com.commons.PaginationTag</tag-class>
	  <body-content>empty</body-content>
	  <attribute>
	    <name>currentPage</name>
	    <required>true</required>
	    <rtexprvalue>true</rtexprvalue>
	  </attribute>
	  <attribute>
	    <name>totalPage</name>
	    <required>true</required>
	    <rtexprvalue>true</rtexprvalue>
	  </attribute>
	  <attribute>
	    <name>numberPerPage</name>
	    <required>true</required>
	    <rtexprvalue>true</rtexprvalue>
	  </attribute>
</tag>

</taglib>

3、页面引用：

<%@ taglib uri="http://www.defTag.com/defTag" prefix="dt" %>

<dt:PaginationTag numberPerPage="10" totalPage="2000" currentPage="10"/>

4、部分的CSS文件：

<style>

#pager{padding-top:3px;white-space:nowrap }
#pager .pg{font-size:14px;text-align:left }
#pager .pg a,#pager .pg a:link,#pager .pg a:visited,#pager .pg span.current{margin-right:5px;background:#fff;border:1px solid #d8d8d8;font-family:'Tahoma';color:#0066ca;text-decoration:none;display:inline-block;*display:inline;zoom:1;height:28px;width:28px;text-align:center;line-height:28px }
#pager .pg a:hover{background:#d1e5fc }
#pager .pg span.current{border:1px solid #fff;color:#000;font-weight:bold }
#pager .pg span.extend{padding:0 5px 8px 0;zoom:1 }
#pager .pg a.pre,#pager .pg a.next{width:70px }
</style>