layui的分页插件laypage

发表于
前言

数据列表分页是很常见的一项功能，而要想把分页做的简介，清晰，一个好的分页插件就显得非常重要了。而laypage就是这么一款简单，易上手的分页插件。既可轻松胜任异步分页，也可作为页面刷新式分页。

使用

  1. 具体参数详见官方API

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    layui.use('laypage', function(){
      var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
        elem: 'test1'
        ,count: 70 //数据总数，从服务端得到
        ,jump: function(obj, first){
            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数
            //首次不执行
            if(!first){
              //do something
            }
        	}
      	});
    });

  2. 配合ajax使用的话

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    layui.use('laypage', function(){
      var laypage = layui.laypage;
      
      $.post('/News/GetNewsByPage', { page: 1, limit: 3, typeId: typeId }, function (result) {
            res = result.data;
        		setHtml(res);
        		pages(result.count, typeId)//切换分类时候，调用页码，重新渲染
      });
      
      function pages(count, typeId) {
        laypage.render({
          elem: 'demo7'
          , count: count
          , theme: '#4A90E2'
          , layout: ['prev', 'page', 'next']
          , limit: 3
          , jump: function (obj, first) {
            if (!first) {
              $.post('/News/GetNewsByPage'
                     , { page: obj.curr, limit: obj.limit, typeId: typeId }
                     , function (result) {
                res = result.data;
                setHtml(res);
              });
            }
          }
        })
      }
    });
    总结

    可以看出laypage用起来很方便，而且可以自定义样式，非常的实用