jquery-pager的基本使用及与ajax结合使用实战演示

最新推荐文章于 2023-03-08 10:35:04 发布

king-w

最新推荐文章于 2023-03-08 10:35:04 发布

阅读量8.5k

点赞数 1

分类专栏：常用插件文章标签： ajax 分页前端 pager 插件

本文链接：https://blog.csdn.net/qq_33401924/article/details/53286043

版权

常用插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

很多前端工程师都做过分页显示，如果不使用插件，往往需要手写动态生成的页码以及对页码进行操作的js。而做分页的时候我们一般都会使用ajax请求数据生成页码。如果这样写下来，可能需要写很长的代码，并且发费大量时间，可能还有莫名其妙的bug。所以，jquery.pager.js就为我们解决了这一问题，我们只需要简单的几句代码，就能实现完美的分页显示了。

参考网址：https://github.com/jonpauldavies/jquery-pager-plugin

从以上网址下载使用

一：引入jquery-pager.js

    <link href="Pager.css" rel="stylesheet" type="text/css" />
    <script src="../jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.pager.js" type="text/javascript"></script>

自带的样式很丑，所以建议同学们根据自己的需要改pager的样式。

二：基础使用

jquery.pager.js已经将方法封装好了，我们只需要调用pager()函数，并传入相应的参数即可，下面是官方的简单demo:

<!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">
<head>
    <title>jQuery.pager.js Test</title>
    <link href="Pager.css" rel="stylesheet" type="text/css" />
    <script src="../jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.pager.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">

        $(document).ready(function() {
            $("#pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick });
        });

        PageClick = function(pageclickednumber) {
            $("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick });
            $("#result").html("Clicked Page " + pageclickednumber);
        }

    </script>
</head>
<body>
<h1 id="result">Click the pager below.</h1>
<div id="pager" ></div>
</body>
</html>

展现效果：

这里写图片描述

pager的参数：

pagenumber：当前页码
pagecount：页码总数
buttonClickCallback：回调函数

以上便是pager的基本样式，我们可以更改pager的样式和文字，改样式我们只需要添加或者覆盖其原有样式就行，而改文字，则需要我们去jquery.pager.js文件里改，比如更改first为第一页：

找到first
这里写图片描述

三：与ajax结合使用

上面只是基本的使用方法，真正在项目中，我们会经常配合ajax使用，下面是我做的一个两者结合的项目

项目展示：

这里写图片描述

经过我修改样式的pager是不是看起来已经很不错了呢，但实际上，他在ajax里的表现才是我们选择它的真正理由。

下面是我用node写的测试接口：

router.get('/userList',function (req,res,next) {
  var index=parseInt(req.query.index); //页码
  var size=parseInt(req.query.size);   //每页多少条数据
  var type=req.query.type;
  var value=req.query.value;

  var s=mainUser.user.filter(function (item) {
    var reg=new RegExp('.*'+value+'.*','i');
    var a=reg.test(item.ID)||reg.test(item.level)||reg.test(item.name)||reg.test(item.phone)||reg.test(item.number)||reg.test(item.date);
    var b=true;
    if(type){
      b=item.level==type;
    }
    return a&&b;
  });
  count=Math.ceil(s.length/size);  //页码总数
  pageData=s.slice((index-1)*size,index*size);  //当前页的数据
  res.contentType('application/json');
  res.send({data:pageData,count:count});
  res.end();
});

由于我还做了筛选，所以有些代码可能会影响理解，分页一般都是在后台进行分页，前端传给后台页码index和一页显示的数据量size,后台计算出页码总数count和当前页数据pageData,然后发送给前端。

而在前端我们的代码是：

function getData(index) {
        var text=$('.user-lev').text().replace(/\s/gm,'');
        type=text=='全部'?'':text;
        var value=$('#search-box').val();
        $.ajax({
            url: "/userList",
            datatType: "json",
            data: {"size": size, "index": index, "type": type,"value":value},
            type: "GET",
            success: function (data) {
                $('.user-list .ul-list').html('');
                $('.user-list .ul-list').append(template('temp', data));
                $('#pager').pager({pagenumber: index, pagecount: data.count, buttonClickCallback: getData})
            }
        })
    }

我们可以发现，我们只用了一句代码便实现了整个分页显示的js，结合我写的JS模板引擎-腾讯artTemplate的使用
http://blog.csdn.net/qq_33401924/article/details/53259631

我们在ajax里使用了两句代码，便实现了页面的显示和分页，是不是超级简单，好用？

king-w

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery-pager的基本使用及与ajax结合使用实战演示

很多前端工程师都做过分页显示，如果不使用插件，往往需要手写动态生成的页码以及对页码进行操作的js。而做分页的时候我们一般都会使用ajax请求数据生成页码。如果这样写下来，可能需要写很长的代码，并且发费大量时间，可能还有莫名其妙的bug。所以，jquery.pager.js就为我们解决了这一问题，我们只需要简单的几句代码，就能实现完美的分页显示了。参考网址：https://github.com/jon
复制链接

扫一扫