laypage.js分页插件使用方法详解

2024-09-29 11:02:54

本文实例为大家分享了laypage.js分页插件的使用方法，供大家参考，具体内容如下

1、引用依赖

a.layui.js

b.layui.css

c.laypage.js

2、HTML代码部分

<div id="page-nav" style="float: right"></div>

3、js代码部分

<script>

  $(function(){
    //加载菜单列表数据
    menuPageData();
  });

  function menuPageData() {

    //以下将以jquery.ajax为例，演示一个异步分页
    $.getJSON('../../menu/page/1', {
        rows : 10 //每页显示的数据条数
      },
      function (res) { //从第1页开始请求。返回的json格式可以任意定义
        laypage({
          cont: 'page-nav', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
          pages: res.pageCount, //通过后台拿到的总页数
          curr: 1, //初始化当前页
          skin: '#5a98de',//皮肤颜色
          groups: 5, //连续显示分页数
          skip: true, //是否开启跳页
          count:res.total, //数据总数
          limit: 10, //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数
          limits:[10, 20, 30, 40, 50], //每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
          first: '首页', //若不显示，设置false即可
          last: '尾页', //若不显示，设置false即可
          prev: '上一页', //若不显示，设置false即可
          next: '下一页', //若不显示，设置false即可
          jump: function (e) { //触发分页后的回调
            $.getJSON('../../menu/page/' + e.curr, {
              rows : 10 //每页显示的数据条数
            }, function (res) {

              console.log(res.rows);
              var data = res.rows;
              $("#total-text").html(res.total);
              /*解析表格分页数据*/
              analysisTableData(data);

            });
          }
        });
      });
  }

</script>

4、效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

laypage前端分页插件实现ajax异步分页

本文实例为大家分享了laypage前端分页插件,ajax异步分页,获取json数据实现无刷新分页,供大家参考,具体内容如下 function GetList(pageIndex) { var _this = "" var clone_this = ""; _this = $(".BindDataList");//数据列表容器, clone_this = _this.clone(true); var pageSize = 25;//每页展示的条数
laypage分页控件使用实例详解

在开发的时候经常遇到分页比较麻烦,尤其对于一个后端程序猿来说,但是这个问题不能不解决,于是找了一个分页的控件用用,记录在下,以便以后使用. 以下是官网中使用的简单例子: //以下将以jquery.ajax为例,演示一个异步分页 $.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求.返回的json格式可以任意定义 laypage({ cont: 'page1', //容器.值支持id名.原生dom对象,jquery对象.
js多功能分页组件layPage使用方法详解

本文的主要目的就是为大家分享layPage 多功能的js分页组件具体操作方法,供大家参考,具体内容如下 php 部分 function index(){ header('Content-Type:text/html;charset=utf-8'); // 获取当前页码,默认第一页,设置每页默认显示条数 $nowpage = I('get.page', 1, 'intval'); $limits = 8; // 获取总条数 $count = M('Article') -> where(array(
VUEJS实战之利用laypage插件实现分页（3）

前言在上两章的工作中,我们顺利的实现了首页的渲染,但是,只是渲染了一页数据而已.我们可能需要渲染更多的数据,这时候,我们就有必要考虑分页了. 分页有很多种方式,比如异步加载的分页方式.然而对于没有太多使用前端模版框架的朋友来说,一上来就使用这种方式,可能稍微有点难度.因此,我们这章的分页实现,是基于普通的链接分页的方式完成的. 在我们有了更多的前端框架的使用经验之后,我们可以使用更加丰富的分页方法. 事实上,我们自己构建一个分页组件也不是不可以,在移动端我都是自己的代码实现的.但是,我这里要推
基于LayUI分页和LayUI laypage分页的使用示例

本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.m
基于layPage插件实现两种分页方式浅析

最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示又显得过长,看起来很不舒服.一种则是因为数据量太过于庞大,无法一次性去数据库将数据读取出来,于是采用分页的形式去将数据分页显示出来. 前者即所谓的前端分页,而后者就是服务端分页. 两者的区别在于:前端分页是将所有数据取出,为方便用户查看,合理展示数据.在前端js上对数据进行分页.而服务端分页是根据当
layui2.0使用table+laypage实现真分页

前言:最近项目上使用layui做前端页面,发现layui的table本身的分页不能根据屏幕生成每页行数,所以研究了下文档,更改分页简单解释: 1.最开始是根据屏幕计算加载的每页行数 2.framework可以糊了,由于是老项目还使用了sea.js 3.getUrlParam()是用于其他页面带参数跳转的也可以忽略 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&
laypage.js分页插件使用方法详解

本文实例为大家分享了laypage.js分页插件的使用方法,供大家参考,具体内容如下 1.引用依赖 a.layui.js b.layui.css c.laypage.js 2.HTML代码部分 <div id="page-nav" style="float: right"></div> 3.js代码部分 <script> $(function(){ //加载菜单列表数据 menuPageData(); }); function m
Bootstrap Paginator分页插件使用方法详解

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,下载地址:Bootstrap Paginator分页插件首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator
jQuery Pagination分页插件使用方法详解

本文实例为大家分享了jQuery Pagination分页插件的具体代码,供大家参考,具体内容如下一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src=&quo
Mybatis分页插件使用方法详解

本文实例为大家分享了Mybatis分页插件使用的具体代码,供大家参考,具体内容如下 1.分页插件简介 pagehelper源码都说这是史上最好用的分页插件,支持多种数据库以多种方式分页. 2.分页插件的使用 2.1导入maven依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>最新
Mybatis分页插件的实例详解

Mybatis分页插件的实例详解 1.前言: 我们知道,在MySQL中,分页的sql是使用limit来做,如果我们自己写sql,那分页肯定是没有任何问题的.但是一旦model多了起来,复杂了起来,我们很自然的想到使用mybatis的逆向工程来生成相应的po和mapper,但是同时也会带来弊端,比如这里的分页问题就不好解决了. 可能有人会说,我可以修改生成的文件,没错,这是可行的,但是一般我们通过逆向工程生成的文件,都不会去动它,所以这个时候,就需要使用分页插件来解决了. 如果你也在用Mybati
MyBatisPlus PaginationInterceptor分页插件的使用详解

实现配置插件来到项目下的applicationContext.xml中配置sqlSessionFactoryBean的地方.  <bean id="sqlSessionFac
微信小程序实现下拉刷新和上拉分页效果的方法详解

目录下拉刷新上拉分页下拉刷新下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2
MyBatisPlus+Lombok实现分页功能的方法详解

目录一.Lombok 1.添加Lombok依赖 2.安装Lombok插件 3.模型类上添加注解二.分页功能 1.调用方法传入参数获取返回值 2.设置分页拦截器 3.运行测试程序一.Lombok 从上一篇博客可看出,DAO接口类的编写变得简单,反过来看模型,编写还需要(私有属性.setter...getter...方法.toString方法.构造函数等内容),对于模型类有什么优化方法,可以用Lombok. 概念:Lombok,一个Java类库,提供了一组注解,简化POJO实体类开发. 使用步
js控制台输出的方法(详解)

console.log(object[, object, ...]) 在控制台输出一条消息.如果有多个参数,输出时会用空格隔开这些参数. 第一个参数可以是一个包含格式化占位符输出的字符串,例如: console.log("The %s jumped over %d tall buildings", animal, count); 上面的例子可以用下面的无格式化占位符输出的代码替换: console.log("The", animal, "jumped ov
IDEA下使用MyBatisCodeHelper插件的方法详解

一:IDEA下使用MyBatisCodeHelper插件.(IDEA的版本 2018 2.5亲测可用) 1.1 IDEA安装MyBatisCodeHelper插件. MyBatisCodeHelper插件现在要付费了,有条件可以买激活码激活的,支持正版,这里演示安装硬盘下载的插件的方式来介绍安装. 下载链接: 链接: https://pan.baidu.com/s/1I-XlrPPVAuzsu9_XY0eEUQ 提取码: bqvn ,内含多个版本的.下载解压查看. Mybatis-Plugin

laypage.js分页插件使用方法详解

相关推荐

随机推荐