jQuery实现的分页插件完整示例

2024-12-10 22:18:57

本文实例讲述了jQuery实现的分页插件。分享给大家供大家参考，具体如下：

呈现

html文件

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script src="引入一个jquery文件，这里就不提供了"></script>
        <link rel="stylesheet" href="引入下边提供的css文件" rel="external nofollow" >
    </head>
    <body>
        <div id="pages" class="devidePage" ></div>
    </body>
        <script>
            var pages=10; //计算出总页数(一定要是5的倍数)

            function getData(num){
                /*当前页数*/
                var currentPageNum = num;
                /*取数据*/
                $.ajax({
                type: "post",
                url: url, /*请求的servlet的地址*/
                data: {"currentPageNum":currentPageNum},
                cache: false,
                async : false,
                dataType: "json",
                success: function (data ,textStatus, jqXHR)
                {
                  if("true"==data.flag){
                      setData(data.data);
                  }else{
                    console.log("不合法！错误信息如下："+data.errorMsg);
                  }
                },
                error:function (XMLHttpRequest, textStatus, errorThrown) {
                  console.log("请求失败！");
                }
                });
            }
            function setData(data){
                /*放数据*/
            }
        </script>
        <script src="引入下边提供的js文件"></script>
</html>

css文件

@charset "UTF-8";
/*分页所在的div*/
.devidePage{
    margin-top:300px;
    margin-left: 400px;
    height: 50px;
    width: 800px;
    /* background: gray; */
}
/*显示页数的div*/
.pages{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*首页*/
.theFirstPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*末页*/
.theLastPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*上一页*/
.prePage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*下一页*/
.nextPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*当前页数*/
.currentPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:100px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
}
/*总页数*/
.pageNums{
    float:left;
    margin-left:2px;
    height:50px;
    width:100px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
}
/*输入页数*/
.jump{
    float:left;
    margin-left:2px;
    height:48px;
    width:50px;
    border:0.5px solid #EEEEEE;
}
/*跳转*/
.jumpClick{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}

js文件

/**
 * 侠 2018-8-15
 */

function loadAll() {
    var theFirstPage = "<div class=\"theFirstPage\" οnclick=\"theFirstPage()\">首页</div>";
    var prePage = "<div class=\"prePage\" οnclick=\"prePage()\">上一页</div>";
    var pagess = "<div id=\"page_1\" class=\"pages\" οnclick=\"changePage(this.id)\">1</div>"
            + "<div id=\"page_2\" class=\"pages\" οnclick=\"changePage(this.id)\">2</div>"
            + "<div id=\"page_3\" class=\"pages\" οnclick=\"changePage(this.id)\">3</div>"
            + "<div id=\"page_4\" class=\"pages\" οnclick=\"changePage(this.id)\">4</div>"
            + "<div id=\"page_5\" class=\"pages\" οnclick=\"changePage(this.id)\">5</div>";
    var nextPage = "<div class=\"nextPage\" οnclick=\"nextPage()\">下一页</div>";
    var theLastPage = "<div class=\"theLastPage\" οnclick=\"theLastPage()\">末页</div>";
    var currentPages = "<div id=\"currentPage\" class=\"currentPage\">第1页</div>";
    var pageNums = "<div id=\"pageNums\" class=\"pageNums\">共" + pages
            + "页</div>";
    var jump = "<input id=\"jump\" type=\"text\" class=\"jump\" "
            +"οnkeyup=\"(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)\""
            +" οnblur=\"this.v();\">";
    var jumpClick = "<div class=\"jumpClick\" οnclick=\"jump()\">跳转</div>";
    $("#pages").html(theFirstPage +
            prePage + pagess + nextPage + theLastPage + currentPages + pageNums + jump
                    + jumpClick);
}
loadAll();
function defultBackground() {
    $("#page_1").css("background", "#66b2ff"); //配置选中颜色
}
defultBackground();
function changeBackground() {
    $(".pages").css("background", "#EEEEEE");  //配置默认颜色
    for (var i = 0; i < 5; i++) {
        if ($("#page_" + (i + 1)).text() == $("#currentPage").text().split("第")[1]
                .split("页")[0]) {
            $("#page_" + (i + 1)).css("background", "#66b2ff"); //配置选中颜色
            break;
        }
    }
}
function theFirstPage(){
    $('#currentPage').html("第" + 1 + "页");
    $("#page_1").html(1);
    $("#page_2").html(2);
    $("#page_3").html(3);
    $("#page_4").html(4);
    $("#page_5").html(5);
    changeBackground();
    getData(getCurrentPageNum());
}
function theLastPage(){
    $('#currentPage').html("第" + pages + "页");
    $("#page_1").html(pages-4);
    $("#page_2").html(pages-3);
    $("#page_3").html(pages-2);
    $("#page_4").html(pages-1);
    $("#page_5").html(pages);
    changeBackground();
    getData(getCurrentPageNum());
}
function changePage(id) {
    var pagenum = parseInt($("#" + id).text()) - 1;
    $('#currentPage').html("第" + $("#" + id).text() + "页");
    if ((id.split("_")[1] == 1) && (parseInt($("#" + id).text()) > 1)) {
        $("#page_1").html(parseInt($("#page_1").text()) - 1);
        $("#page_2").html(parseInt($("#page_2").text()) - 1);
        $("#page_3").html(parseInt($("#page_3").text()) - 1);
        $("#page_4").html(parseInt($("#page_4").text()) - 1);
        $("#page_5").html(parseInt($("#page_5").text()) - 1);
    }
    if ((id.split("_")[1] == 5) && (parseInt($("#" + id).text()) < pages)) {
        $("#page_1").html(parseInt($("#page_1").text()) + 1);
        $("#page_2").html(parseInt($("#page_2").text()) + 1);
        $("#page_3").html(parseInt($("#page_3").text()) + 1);
        $("#page_4").html(parseInt($("#page_4").text()) + 1);
        $("#page_5").html(parseInt($("#page_5").text()) + 1);
    }
    changeBackground();
    getData(getCurrentPageNum());
}
function prePage() {
    var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0];
    var currentPageNum = parseInt(currentPageNumStr);
    if (currentPageNum > 1) {
        var toPageNum = currentPageNum - 1;
        $("#currentPage").html("第" + toPageNum + "页");
        if ((currentPageNum > 1) && ($("#page_1").text() != 1)) {
            $("#page_1").html(parseInt($("#page_1").text()) - 1);
            $("#page_2").html(parseInt($("#page_2").text()) - 1);
            $("#page_3").html(parseInt($("#page_3").text()) - 1);
            $("#page_4").html(parseInt($("#page_4").text()) - 1);
            $("#page_5").html(parseInt($("#page_5").text()) - 1);
        }
        changeBackground();
        getData(getCurrentPageNum());
    } else {
    }
}
function nextPage() {
    var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0];
    var currentPageNum = parseInt(currentPageNumStr);
    if (currentPageNum < pages) {
        var toPageNum = currentPageNum + 1;
        $("#currentPage").html("第" + toPageNum + "页");
        if (currentPageNum >= 5 && ($("#page_5").text() != pages)) {
            $("#page_1").html(parseInt($("#page_1").text()) + 1);
            $("#page_2").html(parseInt($("#page_2").text()) + 1);
            $("#page_3").html(parseInt($("#page_3").text()) + 1);
            $("#page_4").html(parseInt($("#page_4").text()) + 1);
            $("#page_5").html(parseInt($("#page_5").text()) + 1);
        }
        changeBackground();
        getData(getCurrentPageNum());
    } else {
    }
}
function jump() {
    var numstr = $("#jump").val();
    var num = parseInt(numstr);
    if ((num < 1) || (num > pages)) {
        alert("输入不合法");
        $("#jump").val(1);
    } else {
        $("#currentPage").html("第" + num + "页");
        if (num >= 5) {
            $("#page_5").html(num);
            $("#page_4").html(num - 1);
            $("#page_3").html(num - 2);
            $("#page_2").html(num - 3);
            $("#page_1").html(num - 4);
        } else {
            if (num = 4) {
                $("#page_5").html(num + 1);
                $("#page_4").html(num);
                $("#page_3").html(num - 1);
                $("#page_2").html(num - 2);
                $("#page_1").html(num - 3);
            }
            if (num = 3) {
                $("#page_5").html(num + 2);
                $("#page_4").html(num + 1);
                $("#page_3").html(num);
                $("#page_2").html(num - 1);
                $("#page_1").html(num - 2);
            }
            if (num = 2) {
                $("#page_5").html(num + 3);
                $("#page_4").html(num + 2);
                $("#page_3").html(num + 1);
                $("#page_2").html(num);
                $("#page_1").html(num - 1);
            }
            if (num = 1) {
                $("#page_5").html(num + 4);
                $("#page_4").html(num + 3);
                $("#page_3").html(num + 2);
                $("#page_2").html(num + 1);
                $("#page_1").html(num);
            }
        }
        changeBackground();
        getData(getCurrentPageNum());
    }
}
function getCurrentPageNum(){
    return parseInt( $("#currentPage").text().split("第")[1].split("页")[0] );
}

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu
jquery插件懒加载的示例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="jquery-1.11.1.min.js&q
JQuery插件tablesorter表格排序实现过程解析

简介 Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值.字符串.日期和自定义排序. 使用说明引入jquery.tablesorter 所用文件下载: jquery-2.0.2.min.js jquery.tablesorter.min.js tablesorert官网 http://tablesorter.com 修改表格 html如下: <table class="table table-strip
详解jQuery lazyload 懒加载

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项淡入效果对不支持JavaScript浏览器的降级处理水平滚动容器内水平滚动容器内垂直滚动
jQuery插件实现图片轮播效果

使用插件实现图片轮播效果: 通过设置传入的参数autoScroll,numControl和arrowControl的值可以显示不同的效果图片轮播效果一:设置autoScroll=true,numControl=false,arrowControl=false,图片自动轮播,当鼠标进入时停止轮播,当鼠标移出时继续轮播: 图片轮播效果二:设置autoScroll=true,numControl=ture,arrowControl=false,图片自动轮播,同时当鼠标指向导航数字时显示相应的图片:
基于jquery的图片懒加载js

以下是实现代码(基于jquery): 复制代码代码如下: function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img
深入研究jQuery图片懒加载 lazyload.js使用方法

lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置. 跟bootstrap一样,lazyload.js也是依赖于jQuery <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/jquery.lazyload.min
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保) 支持缩略图支持标题显示支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载纯JS版本: 下载地址:https://github.com/fengyuanchen/
jquery实现异步加载图片（懒加载图片一种方式）

首先将插件在jq后面引入 (function($) { // alert($.fn.scrollLoading); $.fn.scrollLoading = function(options) { var defaults = { attr: "data-url" }; var params = $.extend({}, defaults, options || {}); params.cache = []; $(this).each(function() { var node = t
jQuery弹框插件使用方法详解

本文实例为大家分享了jQuery弹框插件使用的具体代码,供大家参考,具体内容如下要点 : 1.匿名函数包裹器(可搜索一下) 2.面向对象的编程 3.插件的要素(扩展jQuery本身的方法,$.extend : 给jQuery对象添加方法,对jQuery.prototype进行扩展 :添加一个函数到jQuery.fn(jQuery.prototype)对象,该函数的名称就是你的插件名称) 4.代码部分: 注意html中 a 标签的内容 , js中格式的注意 , css的话嫌麻烦你可以自己定义 5

jQuery实现的分页插件完整示例

相关推荐

随机推荐