zoukankan      html  css  js  c++  java

  • 前端分页

    来源地址：http://tool.oschina.net/jquery?type=1

    文件结构：

    效果：

    paging.html代码：

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/page.css"/>
<style>
    .h5{font-weight:bold;text-align:center;margin:10px 0;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/page.js"></script>

</head>
<body>
    <div class="h5">默认样式</div>
    <div id="demo1"></div>
    <div class="h5">yahoo样式</div>
    <div id="demo2"></div>
    <div class="h5">digg样式</div>
    <div id="demo3"></div>
    <div class="h5">meneame样式</div>
    <div id="demo4"></div>
    <div class="h5">flickr样式</div>
    <div id="demo5"></div>
    <div class="h5">sabrosus样式</div>
    <div id="demo6"></div>
    <div class="h5">scott样式</div>
    <div id="demo7"></div>
    <div class="h5">quotes样式</div>
    <div id="demo8"></div>
    <div class="h5">black样式</div>
    <div id="demo9"></div>
</body>

<script type="text/javascript">
$(function() {
    $("#demo1").myPagination({
      currPage: 1,
      pageCount: 100,
      pageSize: 5,
    });
    $("#demo2").myPagination({
      currPage: 1,
      pageCount: 100,
      pageSize: 5,
      cssStyle:'yahoo'
    });
    $("#demo3").myPagination({
      currPage: 1,
      pageCount: 100,
      pageSize: 5,
      cssStyle:'digg'
    });
    $("#demo4").myPagination({
      currPage: 1,
      pageCount: 100,
      pageSize: 5,
      cssStyle:'meneame'
    });
    $("#demo5").myPagination({
      currPage: 1,
      pageCount: 100,
      pageSize: 5,
      cssStyle:'flickr'
    });
    $("#demo6").myPagination({
      currPage: 1,
      pageCount: 100,
      pageSize: 5,
      cssStyle:'sabrosus'
    });
    $("#demo7").myPagination({
      currPage: 1,
      pageCount: 100,
      pageSize: 5,
      cssStyle:'scott'
    });
    $("#demo8").myPagination({
      currPage: 1,
      pageCount: 100,
      pageSize: 5,
      cssStyle:'quotes'
    });
    $("#demo9").myPagination({
      currPage: 1,
      pageCount: 100,
      pageSize: 5,
      cssStyle:'black'
    });
});
</script>

</html>

    page.js代码：

    /*!
 * myPagination Jquery Pagination Plug-in Library v4.0
 * 
 * http://linapex.blog.163.com/blog/static/1892375162011523101954885/ 
 *
 * Date: 2011/7/18 19:47
 */
(function($) {
    $.fn.myPagination = function(param) {
        init(param, $(this));
        return $(this)
    };
    function init(param, obj) {
        if (param && param instanceof Object) {
            var options;
            var currPage;
            var pageCount;
            var pageSize;
            var tempPage;
            var defaults = new Object({
                currPage: 1,
                pageCount: 10,
                pageSize: 5,
                cssStyle: 'badoo',
                ajax: {
                    on: false,
                    pageCountId: 'pageCount',
                    param: {
                        on: false,
                        page: 1
                    },
                    ajaxStart: function() {
                        return false
                    }
                },
                info: {
                    first: '首页',
                    last: '尾页',
                    next: '下一页',
                    prev: '上一页',
                    first_on: true,
                    last_on: true,
                    next_on: true,
                    prev_on: true,
                    msg_on: true,
                    link: '#',
                    msg: '<span>&nbsp;&nbsp;跳{currText}/{sumPage}页</span>',
                    text: {
                         '22px'
                    }
                }
            });
            function getCurrPage() {
                if (options.info && options.info.cookie_currPageKey && options.info.cookie_currPage) {
                    var cookie_currPage = $.cookie(options.info.cookie_currPageKey + "_currPage");
                    if (cookie_currPage != "" && cookie_currPage != null) {
                        return cookie_currPage
                    }
                }
                if (options.currPage) {
                    return options.currPage
                } else {
                    return defaults.currPage
                }
            }
            function getPageCount() {
                if (options.pageCount) {
                    return options.pageCount
                } else {
                    return defaults.pageCount
                }
            }
            function getPageSize() {
                if (options.pageSize) {
                    return options.pageSize
                } else {
                    return defaults.pageSize
                }
            }
            function getCssStyle() {
                if (options.cssStyle) {
                    return options.cssStyle
                } else {
                    return defaults.cssStyle
                }
            }
            function getAjax() {
                if (options.ajax && options.ajax.on) {
                    return options.ajax
                } else {
                    return defaults.ajax
                }
            }
            function getParam() {
                if (options.ajax.param && options.ajax.param.on) {
                    options.ajax.param.page = currPage;
                    return options.ajax.param
                } else {
                    defaults.ajax.param.page = currPage;
                    return defaults.ajax.param
                }
            }
            function getFirst() {
                if (options.info && options.info.first_on == false) {
                    return ""
                }
                if (options.info && options.info.first_on && options.info.first) {
                    var str = "<a href='" + getLink() + "' title='1'>" + options.info.first + "</a>";
                    return str
                } else {
                    var str = "<a href='" + getLink() + "' title='1'>" + defaults.info.first + "</a>";
                    return str
                }
            }
            function getLast(pageCount) {
                if (options.info && options.info.last_on == false) {
                    return ""
                }
                if (options.info && options.info.last_on && options.info.last) {
                    var str = "<a href='" + getLink() + "' title='" + pageCount + "'>" + options.info.last + "</a>";
                    return str
                } else {
                    var str = "<a href='" + getLink() + "' title='" + pageCount + "'>" + defaults.info.last + "</a>";
                    return str
                }
            }
            function getPrev() {
                if (options.info && options.info.prev_on == false) {
                    return ""
                }
                if (options.info && options.info.prev) {
                    return options.info.prev
                } else {
                    return defaults.info.prev
                }
            }
            function getNext() {
                if (options.info && options.info.next_on == false) {
                    return ""
                }
                if (options.info && options.info.next) {
                    return options.info.next
                } else {
                    return defaults.info.next
                }
            }
            function getLink() {
                if (options.info && options.info.link) {
                    return options.info.link
                } else {
                    return defaults.info.link
                }
            }
            function getMsg() {
                var input = "<input type='text' value='" + currPage + "' >";
                if (options.info && options.info.msg_on == false) {
                    return false
                }
                if (options.info && options.info.msg) {
                    var str = options.info.msg;
                    str = str.replace("{currText}", input);
                    str = str.replace("{currPage}", currPage);
                    str = str.replace("{sumPage}", pageCount);
                    return str
                } else {
                    var str = defaults.info.msg;
                    str = str.replace("{currText}", input);
                    str = str.replace("{currPage}", currPage);
                    str = str.replace("{sumPage}", pageCount);
                    return str
                }
            }
            function getText() {
                var msg = getMsg();
                if (msg) {
                    msg = $(msg)
                } else {
                    return ""
                }
                var input = msg.children(":text");
                if (options.info && options.info.text) {
                    var css = options.info.text;
                    for (temp in css) {
                        var val = eval("css." + temp);
                        input.css(temp, val)
                    }
                    return msg.html()
                } else {
                    var css = defaults.info.text;
                    for (temp in css) {
                        var val = eval("css." + temp);
                        input.css(temp, val)
                    }
                    return msg.html()
                }
            }
            function getPageCountId() {
                if (options.ajax && options.ajax.pageCountId) {
                    return options.ajax.pageCountId
                } else {
                    return defaults.ajax.pageCountId
                }
            }
            function getAjaxStart() {
                if (options.ajax && options.ajax.ajaxStart) {
                    options.ajax.ajaxStart()
                } else {
                    defaults.ajax.ajaxStart
                }
            }
            function saveCurrPage(page) {
                if (options.info && options.info.cookie_currPageKey && options.info.cookie_currPage) {
                    var key = options.info.cookie_currPageKey + "_currPage";
                    $.cookie(key, page)
                }
            }
            function getInt(val) {
                return parseInt(val)
            }
            function isCode(val) {
                if (val < 1) {
                    alert("输入值不能小于1");
                    return false
                }
                var patrn = /^[0-9]{1,8}$/;
                if (!patrn.exec(val)) {
                    alert("请输入正确的数字");
                    return false
                }
                if (val > pageCount) {
                    alert("输入值不能大于总页数");
                    return false
                }
                return true
            }
            function updateView() {
                currPage = getInt(currPage);
                pageCount = getInt(pageCount);
                var link = getLink();
                var firstPage = lastPage = 1;
                if (currPage - tempPage > 0) {
                    firstPage = currPage - tempPage
                } else {
                    firstPage = 1
                }
                if (firstPage + pageSize > pageCount) {
                    lastPage = pageCount + 1;
                    firstPage = lastPage - pageSize
                } else {
                    lastPage = firstPage + pageSize
                }
                var content = "";
                content += getFirst();
                if (currPage == 1) {
                    content += "<span class="disabled" title="" + getPrev() + "">" + getPrev() + " </span>"
                } else {
                    content += "<a href='" + link + "' title='" + (currPage - 1) + "'>" + getPrev() + " </a>"
                }
                if (firstPage <= 0) {
                    firstPage = 1
                }
                for (firstPage; firstPage < lastPage; firstPage++) {
                    if (firstPage == currPage) {
                        content += "<span class="current" title="" + firstPage + "">" + firstPage + "</span>"
                    } else {
                        content += "<a href='" + link + "' title='" + firstPage + "'>" + firstPage + "</a>"
                    }
                }
                if (currPage == pageCount) {
                    content += "<span class="disabled" title="" + getNext() + "">" + getNext() + " </span>"
                } else {
                    content += "<a href='" + link + "' title='" + (currPage + 1) + "'>" + getNext() + " </a>"
                }
                content += getLast(pageCount);
                content += getText();
                obj.html(content);
                obj.children(":text").keypress(function(event) {
                    var keycode = event.which;
                    if (keycode == 13) {
                        var page = $(this).val();
                        if (isCode(page)) {
                            obj.children("a").unbind("click");
                            obj.children("a").each(function() {
                                $(this).click(function() {
                                    return false
                                })
                            });
                            createView(page)
                        }
                    }
                });
                obj.children("a").each(function(i) {
                    var page = this.title;
                    $(this).click(function() {
                        obj.children("a").unbind("click");
                        obj.children("a").each(function() {
                            $(this).click(function() {
                                return false
                            })
                        });
                        createView(page);
                        $(this).focus();
                        return false
                    })
                })
            };
            function createView(page) {
                currPage = page;
                saveCurrPage(page);
                var ajax = getAjax();
                if (ajax.on) {
                    getAjaxStart();
                    var varUrl = ajax.url;
                    var param = getParam();
                    $.ajax({
                        url: varUrl,
                        type: 'GET',
                        data: param,
                        contentType: "application/x-www-form-urlencoded;utf-8",
                        async: true,
                        cache: false,
                        timeout: 60000,
                        error: function() {
                            alert("访问服务器超时，请重试，谢谢！")
                        },
                        success: function(data) {
                            loadPageCount({
                                dataType: ajax.dataType,
                                callback: ajax.callback,
                                data: data
                            });
                            updateView()
                        }
                    })
                } else {
                    updateView()
                }
            }
            function checkParam() {
                if (currPage < 1) {
                    alert("配置参数错误
错误代码:-1");
                    return false
                }
                if (currPage > pageCount) {
                    alert("配置参数错误
错误代码:-2");
                    return false
                }
                if (pageSize < 2) {
                    alert("配置参数错误
错误代码:-3");
                    return false
                }
                return true
            }
            function loadPageCount(options) {
                if (options.dataType) {
                    var data = options.data;
                    var resultPageCount = false;
                    var isB = true;
                    var pageCountId = getPageCountId();
                    switch (options.dataType) {
                    case "json":
                        data = eval("(" + data + ")");
                        resultPageCount = eval("data." + pageCountId);
                        break;
                    case "xml":
                        resultPageCount = $(data).find(pageCountId).text();
                        break;
                    default:
                        isB = false;
                        var callback = options.callback + "(data)";
                        eval(callback);
                        resultPageCount = $("#" + pageCountId).val();
                        break
                    }
                    if (resultPageCount) {
                        pageCount = resultPageCount
                    }
                    if (isB) {
                        var callback = options.callback + "(data)";
                        eval(callback)
                    }
                }
            }
            options = param;
            currPage = getCurrPage();
            pageCount = getPageCount();
            pageSize = getPageSize();
            tempPage = getInt(pageSize / 2);
            var cssStyle = getCssStyle();
            obj.addClass(cssStyle);
            if (checkParam()) {
                updateView();
                createView(currPage)
            }
        }
    }
})(jQuery);

    page.css代码：

    /*!
 * myPagination Jquery Pagination Plug-in Library v4.0
 * 
 * http://linapex.blog.163.com/blog/static/1892375162011523101954885/ 
 *
 * Date: 2011/7/18 19:47
 */
(function($) {
    $.fn.myPagination = function(param) {
        init(param, $(this));
        return $(this)
    };
    function init(param, obj) {
        if (param && param instanceof Object) {
            var options;
            var currPage;
            var pageCount;
            var pageSize;
            var tempPage;
            var defaults = new Object({
                currPage: 1,
                pageCount: 10,
                pageSize: 5,
                cssStyle: 'badoo',
                ajax: {
                    on: false,
                    pageCountId: 'pageCount',
                    param: {
                        on: false,
                        page: 1
                    },
                    ajaxStart: function() {
                        return false
                    }
                },
                info: {
                    first: '首页',
                    last: '尾页',
                    next: '下一页',
                    prev: '上一页',
                    first_on: true,
                    last_on: true,
                    next_on: true,
                    prev_on: true,
                    msg_on: true,
                    link: '#',
                    msg: '<span>&nbsp;&nbsp;跳{currText}/{sumPage}页</span>',
                    text: {
                        width: '22px'
                    }
                }
            });
            function getCurrPage() {
                if (options.info && options.info.cookie_currPageKey && options.info.cookie_currPage) {
                    var cookie_currPage = $.cookie(options.info.cookie_currPageKey + "_currPage");
                    if (cookie_currPage != "" && cookie_currPage != null) {
                        return cookie_currPage
                    }
                }
                if (options.currPage) {
                    return options.currPage
                } else {
                    return defaults.currPage
                }
            }
            function getPageCount() {
                if (options.pageCount) {
                    return options.pageCount
                } else {
                    return defaults.pageCount
                }
            }
            function getPageSize() {
                if (options.pageSize) {
                    return options.pageSize
                } else {
                    return defaults.pageSize
                }
            }
            function getCssStyle() {
                if (options.cssStyle) {
                    return options.cssStyle
                } else {
                    return defaults.cssStyle
                }
            }
            function getAjax() {
                if (options.ajax && options.ajax.on) {
                    return options.ajax
                } else {
                    return defaults.ajax
                }
            }
            function getParam() {
                if (options.ajax.param && options.ajax.param.on) {
                    options.ajax.param.page = currPage;
                    return options.ajax.param
                } else {
                    defaults.ajax.param.page = currPage;
                    return defaults.ajax.param
                }
            }
            function getFirst() {
                if (options.info && options.info.first_on == false) {
                    return ""
                }
                if (options.info && options.info.first_on && options.info.first) {
                    var str = "<a href='" + getLink() + "' title='1'>" + options.info.first + "</a>";
                    return str
                } else {
                    var str = "<a href='" + getLink() + "' title='1'>" + defaults.info.first + "</a>";
                    return str
                }
            }
            function getLast(pageCount) {
                if (options.info && options.info.last_on == false) {
                    return ""
                }
                if (options.info && options.info.last_on && options.info.last) {
                    var str = "<a href='" + getLink() + "' title='" + pageCount + "'>" + options.info.last + "</a>";
                    return str
                } else {
                    var str = "<a href='" + getLink() + "' title='" + pageCount + "'>" + defaults.info.last + "</a>";
                    return str
                }
            }
            function getPrev() {
                if (options.info && options.info.prev_on == false) {
                    return ""
                }
                if (options.info && options.info.prev) {
                    return options.info.prev
                } else {
                    return defaults.info.prev
                }
            }
            function getNext() {
                if (options.info && options.info.next_on == false) {
                    return ""
                }
                if (options.info && options.info.next) {
                    return options.info.next
                } else {
                    return defaults.info.next
                }
            }
            function getLink() {
                if (options.info && options.info.link) {
                    return options.info.link
                } else {
                    return defaults.info.link
                }
            }
            function getMsg() {
                var input = "<input type='text' value='" + currPage + "' >";
                if (options.info && options.info.msg_on == false) {
                    return false
                }
                if (options.info && options.info.msg) {
                    var str = options.info.msg;
                    str = str.replace("{currText}", input);
                    str = str.replace("{currPage}", currPage);
                    str = str.replace("{sumPage}", pageCount);
                    return str
                } else {
                    var str = defaults.info.msg;
                    str = str.replace("{currText}", input);
                    str = str.replace("{currPage}", currPage);
                    str = str.replace("{sumPage}", pageCount);
                    return str
                }
            }
            function getText() {
                var msg = getMsg();
                if (msg) {
                    msg = $(msg)
                } else {
                    return ""
                }
                var input = msg.children(":text");
                if (options.info && options.info.text) {
                    var css = options.info.text;
                    for (temp in css) {
                        var val = eval("css." + temp);
                        input.css(temp, val)
                    }
                    return msg.html()
                } else {
                    var css = defaults.info.text;
                    for (temp in css) {
                        var val = eval("css." + temp);
                        input.css(temp, val)
                    }
                    return msg.html()
                }
            }
            function getPageCountId() {
                if (options.ajax && options.ajax.pageCountId) {
                    return options.ajax.pageCountId
                } else {
                    return defaults.ajax.pageCountId
                }
            }
            function getAjaxStart() {
                if (options.ajax && options.ajax.ajaxStart) {
                    options.ajax.ajaxStart()
                } else {
                    defaults.ajax.ajaxStart
                }
            }
            function saveCurrPage(page) {
                if (options.info && options.info.cookie_currPageKey && options.info.cookie_currPage) {
                    var key = options.info.cookie_currPageKey + "_currPage";
                    $.cookie(key, page)
                }
            }
            function getInt(val) {
                return parseInt(val)
            }
            function isCode(val) {
                if (val < 1) {
                    alert("输入值不能小于1");
                    return false
                }
                var patrn = /^[0-9]{1,8}$/;
                if (!patrn.exec(val)) {
                    alert("请输入正确的数字");
                    return false
                }
                if (val > pageCount) {
                    alert("输入值不能大于总页数");
                    return false
                }
                return true
            }
            function updateView() {
                currPage = getInt(currPage);
                pageCount = getInt(pageCount);
                var link = getLink();
                var firstPage = lastPage = 1;
                if (currPage - tempPage > 0) {
                    firstPage = currPage - tempPage
                } else {
                    firstPage = 1
                }
                if (firstPage + pageSize > pageCount) {
                    lastPage = pageCount + 1;
                    firstPage = lastPage - pageSize
                } else {
                    lastPage = firstPage + pageSize
                }
                var content = "";
                content += getFirst();
                if (currPage == 1) {
                    content += "<span class="disabled" title="" + getPrev() + "">" + getPrev() + " </span>"
                } else {
                    content += "<a href='" + link + "' title='" + (currPage - 1) + "'>" + getPrev() + " </a>"
                }
                if (firstPage <= 0) {
                    firstPage = 1
                }
                for (firstPage; firstPage < lastPage; firstPage++) {
                    if (firstPage == currPage) {
                        content += "<span class="current" title="" + firstPage + "">" + firstPage + "</span>"
                    } else {
                        content += "<a href='" + link + "' title='" + firstPage + "'>" + firstPage + "</a>"
                    }
                }
                if (currPage == pageCount) {
                    content += "<span class="disabled" title="" + getNext() + "">" + getNext() + " </span>"
                } else {
                    content += "<a href='" + link + "' title='" + (currPage + 1) + "'>" + getNext() + " </a>"
                }
                content += getLast(pageCount);
                content += getText();
                obj.html(content);
                obj.children(":text").keypress(function(event) {
                    var keycode = event.which;
                    if (keycode == 13) {
                        var page = $(this).val();
                        if (isCode(page)) {
                            obj.children("a").unbind("click");
                            obj.children("a").each(function() {
                                $(this).click(function() {
                                    return false
                                })
                            });
                            createView(page)
                        }
                    }
                });
                obj.children("a").each(function(i) {
                    var page = this.title;
                    $(this).click(function() {
                        obj.children("a").unbind("click");
                        obj.children("a").each(function() {
                            $(this).click(function() {
                                return false
                            })
                        });
                        createView(page);
                        $(this).focus();
                        return false
                    })
                })
            };
            function createView(page) {
                currPage = page;
                saveCurrPage(page);
                var ajax = getAjax();
                if (ajax.on) {
                    getAjaxStart();
                    var varUrl = ajax.url;
                    var param = getParam();
                    $.ajax({
                        url: varUrl,
                        type: 'GET',
                        data: param,
                        contentType: "application/x-www-form-urlencoded;utf-8",
                        async: true,
                        cache: false,
                        timeout: 60000,
                        error: function() {
                            alert("访问服务器超时，请重试，谢谢！")
                        },
                        success: function(data) {
                            loadPageCount({
                                dataType: ajax.dataType,
                                callback: ajax.callback,
                                data: data
                            });
                            updateView()
                        }
                    })
                } else {
                    updateView()
                }
            }
            function checkParam() {
                if (currPage < 1) {
                    alert("配置参数错误
错误代码:-1");
                    return false
                }
                if (currPage > pageCount) {
                    alert("配置参数错误
错误代码:-2");
                    return false
                }
                if (pageSize < 2) {
                    alert("配置参数错误
错误代码:-3");
                    return false
                }
                return true
            }
            function loadPageCount(options) {
                if (options.dataType) {
                    var data = options.data;
                    var resultPageCount = false;
                    var isB = true;
                    var pageCountId = getPageCountId();
                    switch (options.dataType) {
                    case "json":
                        data = eval("(" + data + ")");
                        resultPageCount = eval("data." + pageCountId);
                        break;
                    case "xml":
                        resultPageCount = $(data).find(pageCountId).text();
                        break;
                    default:
                        isB = false;
                        var callback = options.callback + "(data)";
                        eval(callback);
                        resultPageCount = $("#" + pageCountId).val();
                        break
                    }
                    if (resultPageCount) {
                        pageCount = resultPageCount
                    }
                    if (isB) {
                        var callback = options.callback + "(data)";
                        eval(callback)
                    }
                }
            }
            options = param;
            currPage = getCurrPage();
            pageCount = getPageCount();
            pageSize = getPageSize();
            tempPage = getInt(pageSize / 2);
            var cssStyle = getCssStyle();
            obj.addClass(cssStyle);
            if (checkParam()) {
                updateView();
                createView(currPage)
            }
        }
    }
})(jQuery);
  • 相关阅读:
    linux如何查看端口或服务被占用情况
    linux网络查看及配置相关命令
    linux查看程序运行相关命令
    shell脚本编写一个用真实用户去访问的vsftpd服务器
    shell脚本监控CPU和内存利用率
    小白的个人技能树（基于自动化软件测试开发实习和软件开发实习）
    MySQL 8.0.12 基于Windows 安装教程（超级详细）
    C语言 0x7fffffff是多少（也就是INT_MAX，首位是 0，其余都是1，f代表1111）
    数通知识点
    数据结构之算法基础
  • 原文地址：https://www.cnblogs.com/zcjyzh/p/10302675.html
Copyright © 2011-2022 走看看