laypage组件常见用法总结

laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。核心方法: laypage.render(options) 来设置基础参数。

一、laypage的常用基础参数

layui.use(['laypage'], function () {
    laypage = layui.laypage
    laypage.render({
        elem: 'pageTest'                 //这是元素的id,不能写成"#pageTest"
        , count: data.length             //数据总数
        , limit: 10                      //每页显示条数
        , limits: [10, 20, 30]
        , curr: 1                        //起始页
        , groups: 5                      //连续页码个数
        , prev: '上一页'                 //上一页文本
        , netx: '下一页'                 //下一页文本
        , first: 1                      //首页文本
        , last: 100                     //尾页文本
        , layout: ['prev', 'page', 'next','limit','refresh','skip']
       
        //跳转页码时调用
        , jump: function (obj, first) { //obj为当前页的属性和方法,第一次加载first为true
                     //         do something
            if (!first) {
                     //非首次加载 do something  
            }
        }
    })
});

二、使用方式

在layui中的table中包含了laypage,这里就不再说明laytable中的分页用法,主要写一个后台分页,前端加载列表(非table中的列表)的栗子,具体为点击分类栏,主体部分显示对应的新闻列表。

<div class="category">
  <ul id="newsTypeList">
        <li class="hover" id="hyzxNews" data-typeId="1">新闻分类1</li>
        <li data-typeId="2">新闻分类2</li>
        <li data-typeId="3">新闻分类3</li>
        <li data-typeId="4">新闻分类4</li>
  </ul>
</div>
<h2 id="newsType">新闻分类1</h2>
<div class="list_box">
      <ul id="newsList" class="list_ul"></ul>
      <div id="demo7" style="text-align:center"></div>
</div>


<script>
layui.use(['laypage'], function () {
    var laypage = layui.laypage
        , layer = layui.layer;

//---------------------------点击侧边类型,加载新闻列表
    $('#newsTypeList li').click(function () {
        var typeId = $(this).attr("data-typeId");
        $.post('/News/GetNewsByPage', { page: 1, limit: 3, typeId: typeId }, 
        function (result) {
            res = result.data;
            setHtml(res);
            setStyle(typeId)
            pages(result.count, typeId)//切换分类时候,调用页码,重新渲染
        });
    }).eq(0).click();

//--------------------------------分页组件渲染
    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);
                          });
                    }
                }
            })
        }
//--------------------------------写入后台内容  
    function setHtml(data) {
        var strHtml = "";
        $.each(data, function (index, item) {
            strHtml += ('<li>${item.Title}</li>');
        });
        document.getElementById('newsList').innerHTML = strHtml;
    }
//--------------------------------改变样式
    function setStyle(typeId) {
        $('ul.newsTypeList li').removeClass('hover');
        $('ul.newsTypeList li[data-typeId=' + typeId + ']').addClass('hover');
        $('#newsType').text($('ul#newsTypeList li[data-typeId=' + typeId + ']').text())
    }
});
</script>

推荐文章
layui怎么设置时间选择框?

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()

layui 开源吗?

layui开源吗?layui是免费开源的。layui是一款开源和免费的前端UI框架,可随意使用;不过为了维持发展,在其生态下,也会推出一些基于layui的收费产品,比如:layuiAdmin和layI

浅谈layui中table.render的使用(附代码)

layui框架提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,其中包括:layer、layDate、layPage、laytpl、table等。本篇文章给大家浅谈一下layui中table.r

layui如何自定义字体图标?(图文介绍)

layui的图标取自于阿里巴巴的矢量图标库Iconfont第一步,通过浏览器打开http://iconfont.cn/,访问阿里巴巴矢量图标库。第二步,通过右上角的用户图标,授权登陆一个账号,在此我选

详解layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

如何让layui支持es5?写法介绍

写js的时候会写一些es5的代码,但是打包到dist时,发现不支持语法,怎么办呢。两步添加es5支持:一、使用npm下载安装babel,进入gulpfile.js所在目录。$npminstall--s

layui如何获取table某一行的值?

layui中可以使用table.checkStatus('ID')方法获取table某一行的值,其中ID为基础参数。【自动化渲染】……【方法渲染】table.render({//其它参数省略 id:'

layui和layer的区别是什么?

layui是之前layerlaydate等独立组件的超集合;layui是一个完整的前端框架,和Bootstrap是同一类事务;引入了layui之后layer就不用单独引入了。layer至今仍作为lay

layui有什么功能?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

详解layui.layer独立组件

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,laye

layui input只读属性是什么?

layuiinput只读属性是什么?layuiinput只读属性是readonly。readonly属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用tab键切换到该字段,还可以选中

layui的模块是什么意思?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

layui中怎么设置select下拉框自动选中某项?

1、需求场景分析用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A。在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值。2、Layui的select

layui如何刷新当前tab?

layui中可以使用reload()方法刷新当前tab,reload()方法用于刷新当前文档。reload()方法类似于你浏览器上的刷新页面按钮。如果把该方法的参数设置为true,那么无论文档的最后修

浅谈layui前端遇到的难点(集合)

一、表格中插入下拉框的情况问题:表格遇到下拉框表单的情况,下拉框在表格中没办法显示出来,效果:1、表格中下拉框被隐藏----方法1这种方法解决了表格中下拉框被隐藏的状态了,但是显示并不是很美观,距离最

layui如何使用open属性隐藏按钮?

layui中可以在layer.open方法中添加closeBtn:0样式来隐藏按钮。closeBtn-关闭按钮类型:String/Boolean,默认:1layer提供了两种风格的关闭按钮,可通过配置

layui弹窗如何禁止拉伸?

弹层组件文档-layui.layerayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务

浅谈layui弹出层(open)的属性

layui.open属性如:打开一个弹出层核心方法varindex=layer.open({ type:2, title:title, maxmin:true, offset:'100px', are

layui开源么?

layui是免费开源的,layui是开源的模块化前端UI框架,而layAdmin和layIm是付费授权的。layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织