程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> java jsp標簽分頁,jquery 插件分頁封裝

java jsp標簽分頁,jquery 插件分頁封裝

編輯:關於JSP

分頁CSS
[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; 

.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類封裝
[java]
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 = 5729832874890369508L; 
    private String url; // 請求URI  
    private int pageSize; // 每頁要顯示的記錄數  
    private int currentPage; // 當前頁號  
    private int pageRecordCount; // 總記錄數  
 
    @Override 
    public int doStartTag() throws JspException { 
        int pageCount = (pageRecordCount + pageSize - 1) / pageSize; // 計算總頁數  
        RyingLogs.infoLogs("url=" + url + "/pageSize=" + pageSize + "/currentPage=" + currentPage + "/count=" + pageRecordCount); 
        // 拼寫要輸出到頁面的HTML文本  
        StringBuilder sb = new StringBuilder(); 
        sb.append("\r\n<span stype=\"align:center\" class=\"pagination\">\r\n"); 
        if (pageRecordCount == 0) { 
            sb.append("<strong>沒有可顯示的數據</strong>\r\n"); 
        } else { 
            // 頁號越界處理  
            if (currentPage > pageCount) { 
                currentPage = pageCount; 
            } 
            if (currentPage < 1) { 
                currentPage = 1; 
            } 
 
            sb.append("<form method=\"post\" action=\"\" ").append("name=\"qPagerForm\">\r\n"); 
 
            // 把當前頁號設置成請求參數  
            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"); 
            // 輸出統計數據  
            sb.append("<label class=\"all\">共<b>").append(pageCount).append("</b>頁</label>"); 
 
            // 上一頁處理  
            if (currentPage == 1) { 
                sb.append("<span class=\"disabled\">首頁").append("</span>\r\n").append("<span class=\"disabled\">上一頁").append("</span>\r\n"); 
            } else { 
                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((1)).append(")\">首頁</a>\r\n"); 
                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((currentPage - 1)).append(")\">上一頁</a>\r\n"); 
            } 
 
            // 頁面顯示最大頁碼  
            int maxPage = 10; 
            int center = maxPage / 2; 
            int start = 0; 
            int end = 0; 
            // 最大頁數不超過maxPage  
            if (pageCount <= maxPage) { 
                start = 1; 
                end = pageCount; 
            } else { 
                // 如果當前頁超過最大顯示頁碼一半  
                if (currentPage > center) { 
                    // 尾部不夠顯示,總顯示頁碼數量為maxPage  
                    if (currentPage + center > pageCount) { 
                        start = currentPage - (maxPage - (pageCount - currentPage)) + 1; 
                        end = pageCount; 
                    } else { 
                        // 當前頁控制顯示為中間值  
                        start = currentPage - center + 1; 
                        end = currentPage + center; 
                    } 
                } else { 
                    // 當前頁碼不足最大顯示的一半  
                    start = 1; 
                    end = maxPage; 
                } 
            } 
            for (int i = start; i <= end; i++) { 
                if (currentPage == i) { // 當前頁號不需要超鏈接  
                    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"); 
                } 
            } 
 
            // 下一頁處理  
            if (currentPage == pageCount) { 
                sb.append("<span class=\"disabled\">下一頁").append("</span>\r\n"); 
                sb.append("<span class=\"disabled\">尾頁").append("</span>\r\n"); 
            } else { 
                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((currentPage + 1)).append(")\">下一頁</a>\r\n"); 
                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((pageCount)).append(")\">尾頁</a>\r\n"); 
            } 
            sb.append("</form>\r\n"); 
 
            // 生成提交表單的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"); 
            // 獲取自定義屬性  
            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"); 
 
        // 把生成的HTML輸出到響應中  
        try { 
            pageContext.getOut().println(sb.toString()); 
        } catch (IOException e) { 
            throw new JspException(e); 
        } 
        return SKIP_BODY; // 本標簽主體為空,所以直接跳過主體  
    } 
 
    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; 
    } 
 

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 = 5729832874890369508L;
    private String url; // 請求URI
    private int pageSize; // 每頁要顯示的記錄數
    private int currentPage; // 當前頁號
    private int pageRecordCount; // 總記錄數

    @Override
    public int doStartTag() throws JspException {
        int pageCount = (pageRecordCount + pageSize - 1) / pageSize; // 計算總頁數
        RyingLogs.infoLogs("url=" + url + "/pageSize=" + pageSize + "/currentPage=" + currentPage + "/count=" + pageRecordCount);
        // 拼寫要輸出到頁面的HTML文本
        StringBuilder sb = new StringBuilder();
        sb.append("\r\n<span stype=\"align:center\" class=\"pagination\">\r\n");
        if (pageRecordCount == 0) {
            sb.append("<strong>沒有可顯示的數據</strong>\r\n");
        } else {
            // 頁號越界處理
            if (currentPage > pageCount) {
                currentPage = pageCount;
            }
            if (currentPage < 1) {
                currentPage = 1;
            }

            sb.append("<form method=\"post\" action=\"\" ").append("name=\"qPagerForm\">\r\n");

            // 把當前頁號設置成請求參數
            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");
            // 輸出統計數據
            sb.append("<label class=\"all\">共<b>").append(pageCount).append("</b>頁</label>");

            // 上一頁處理
            if (currentPage == 1) {
                sb.append("<span class=\"disabled\">首頁").append("</span>\r\n").append("<span class=\"disabled\">上一頁").append("</span>\r\n");
            } else {
                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((1)).append(")\">首頁</a>\r\n");
                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((currentPage - 1)).append(")\">上一頁</a>\r\n");
            }

            // 頁面顯示最大頁碼
            int maxPage = 10;
            int center = maxPage / 2;
            int start = 0;
            int end = 0;
            // 最大頁數不超過maxPage
            if (pageCount <= maxPage) {
                start = 1;
                end = pageCount;
            } else {
                // 如果當前頁超過最大顯示頁碼一半
                if (currentPage > center) {
                    // 尾部不夠顯示,總顯示頁碼數量為maxPage
                    if (currentPage + center > pageCount) {
                        start = currentPage - (maxPage - (pageCount - currentPage)) + 1;
                        end = pageCount;
                    } else {
                        // 當前頁控制顯示為中間值
                        start = currentPage - center + 1;
                        end = currentPage + center;
                    }
                } else {
                    // 當前頁碼不足最大顯示的一半
                    start = 1;
                    end = maxPage;
                }
            }
            for (int i = start; i <= end; i++) {
                if (currentPage == i) { // 當前頁號不需要超鏈接
                    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");
                }
            }

            // 下一頁處理
            if (currentPage == pageCount) {
                sb.append("<span class=\"disabled\">下一頁").append("</span>\r\n");
                sb.append("<span class=\"disabled\">尾頁").append("</span>\r\n");
            } else {
                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((currentPage + 1)).append(")\">下一頁</a>\r\n");
                sb.append("<a href=\"javascript:void(0)\"").append(" onclick=\"turnOverPage(").append((pageCount)).append(")\">尾頁</a>\r\n");
            }
            sb.append("</form>\r\n");

            // 生成提交表單的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");
            // 獲取自定義屬性
            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");

        // 把生成的HTML輸出到響應中
        try {
            pageContext.getOut().println(sb.toString());
        } catch (IOException e) {
            throw new JspException(e);
        }
        return SKIP_BODY; // 本標簽主體為空,所以直接跳過主體
    }

    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
[html]
<?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> 

<?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>


頁面使用
頭部引入
[html]
<%@taglib prefix="p" uri="/page.tld"  %> 

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


[plain]
<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> 

  <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分頁封裝
[javascript]
/**
 * 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); 
 
            /**
             *計算總頁數
             */ 
            function calculatePages(data){ 
                return ((data.total % opts.pageSize) == 0) ?  Math.floor(data.total / opts.pageSize) : (Math.floor(data.total / opts.pageSize) + 1); 
            } 
 
            /**
             *計算開始結束頁碼
             */ 
            function getInterval(data){ 
                // 頁面顯示最大頁碼  
                var maxPage = 10; 
                var center = maxPage / 2; 
                var start = 0; 
                var end = 0; 
                var pageCount = calculatePages(data); 
                // 最大頁數不超過maxPage  
                if (pageCount <= maxPage) { 
                    start = 1; 
                    end = pageCount; 
                } else { 
                    // 如果當前頁超過最大顯示頁碼一半  
                    if (opts.currentPage > center) { 
                        // 尾部不夠顯示,總顯示頁碼數量為maxPage  
                        if (opts.currentPage + center > pageCount) { 
                            start = opts.currentPage - (maxPage - (pageCount - opts.currentPage)) + 1; 
                            end = pageCount; 
                        } else { 
                            // 當前頁控制顯示為中間值  
                            start = opts.currentPage - center + 1; 
                            end = opts.currentPage + center; 
                        } 
                    } else { 
                        // 當前頁碼不足最大顯示的一半  
                        start = 1; 
                        end = maxPage; 
                    } 
                } 
                return [start,end]; 
            } 
 
            /**
             *選擇頁碼,翻頁
             */ 
            function selectPage(page){ 
                opts.currentPage = page; 
                draw(); 
            } 
 
            /**
             *填充顯示鏈接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{ 
                                //清空  
                                $this.empty(); 
                                if(data.total == 0){ 
                                    return; 
                                }else{ 
                                    //獲取頁碼  
                                    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">共<b>' + pageCount + '</b>頁</label>'); 
 
                                    if(opts.currentPage == 1){ 
                                        $this.append('<span class="disabled">首頁</span><span class="disabled">上一頁</span>'); 
                                    } else { 
                                        $this.append('<a href="javascript:void(0)" class="first">首頁</a><a href="javascript:void(0)" class="pre">上一頁</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">下一頁</span><span class="disabled">尾頁</span>'); 
                                    } else { 
                                        $this.append('<a href="javascript:void(0)" class="next">下一頁</a><a href="javascript:void(0)" class="end">尾頁</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地址  
                data : null, // 數據,必須是對象  
                dataType : 'json', //數據類型  
                type : 'get', //提交類型  
                callback : function(){} //成功回調函數  
            }, 
            pageSize : 5, //每頁顯示數量  
            currentPage : 1 //當前頁  
    }; 
 
})(jQuery); 

/**
 * 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);

            /**
             *計算總頁數
             */
            function calculatePages(data){
                return ((data.total % opts.pageSize) == 0) ?  Math.floor(data.total / opts.pageSize) : (Math.floor(data.total / opts.pageSize) + 1);
            }

            /**
             *計算開始結束頁碼
             */
            function getInterval(data){
                // 頁面顯示最大頁碼
                var maxPage = 10;
                var center = maxPage / 2;
                var start = 0;
                var end = 0;
                var pageCount = calculatePages(data);
                // 最大頁數不超過maxPage
                if (pageCount <= maxPage) {
                    start = 1;
                    end = pageCount;
                } else {
                    // 如果當前頁超過最大顯示頁碼一半
                    if (opts.currentPage > center) {
                        // 尾部不夠顯示,總顯示頁碼數量為maxPage
                        if (opts.currentPage + center > pageCount) {
                            start = opts.currentPage - (maxPage - (pageCount - opts.currentPage)) + 1;
                            end = pageCount;
                        } else {
                            // 當前頁控制顯示為中間值
                            start = opts.currentPage - center + 1;
                            end = opts.currentPage + center;
                        }
                    } else {
                        // 當前頁碼不足最大顯示的一半
                        start = 1;
                        end = maxPage;
                    }
                }
                return [start,end];
            }

            /**
             *選擇頁碼,翻頁
             */
            function selectPage(page){
                opts.currentPage = page;
                draw();
            }

            /**
             *填充顯示鏈接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{
                                //清空
                                $this.empty();
                                if(data.total == 0){
                                    return;
                                }else{
                                    //獲取頁碼
                                    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">共<b>' + pageCount + '</b>頁</label>');

                                    if(opts.currentPage == 1){
                                        $this.append('<span class="disabled">首頁</span><span class="disabled">上一頁</span>');
                                    } else {
                                        $this.append('<a href="javascript:void(0)" class="first">首頁</a><a href="javascript:void(0)" class="pre">上一頁</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">下一頁</span><span class="disabled">尾頁</span>');
                                    } else {
                                        $this.append('<a href="javascript:void(0)" class="next">下一頁</a><a href="javascript:void(0)" class="end">尾頁</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地址
                data : null, // 數據,必須是對象
                dataType : 'json', //數據類型
                type : 'get', //提交類型
                callback : function(){} //成功回調函數
            },
            pageSize : 5, //每頁顯示數量
            currentPage : 1 //當前頁
    };

})(jQuery);

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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved