layui分页（有人知道laypage这个分页插件怎么用吗）

本文目录

• 有人知道laypage这个分页插件怎么用吗
• layui的分页组件在后台怎么更新
• java 怎么使用layer分页插件
• layui的分页组件在后台怎么获取分页php
• layui 分页怎么自己写结构
• 使用layui前端框架，进行分页，php怎样传递数据
• layerpage分页能实现数据交互吗
• 前台用layui框架实现表格分页，后台用asp.net的问题

有人知道laypage这个分页插件怎么用吗

有文档的 

http://www.layui.com/demo/laypage.html

《!DOCTYPE html》
《html》
《head》
  《meta charset=“utf-8“》
  《title》layui《/title》
  《meta name=“renderer“ content=“webkit“》
  《meta http-equiv=“X-UA-Compatible“ content=“IE=edge,chrome=1“》
  《meta name=“viewport“ content=“width=device-width, initial-scale=1, maximum-scale=1“》
  《link rel=“stylesheet“ href=“//res.layui.com/layui/dist/css/layui.css“  media=“all“》
  《!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --》
《/head》
《body》
            
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》总页数低于页码总数《/legend》
《/fieldset》
 
《div id=“demo0“》《/div》
 
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》总页数大于页码总数《/legend》
《/fieldset》
 
《div id=“demo1“》《/div》
 
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》自定义主题 - 颜色随意定义《/legend》
《/fieldset》
 
《div id=“demo2“》《/div》
《div id=“demo2-1“》《/div》
《div id=“demo2-2“》《/div》
 
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》自定义首页、尾页、上一页、下一页文本《/legend》
《/fieldset》
 
《div id=“demo3“》《/div》
 
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》不显示首页尾页《/legend》
《/fieldset》
 
《div id=“demo4“》《/div》
 
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》开启HASH《/legend》
《/fieldset》
 
《div id=“demo5“》《/div》
 
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》只显示上一页、下一页《/legend》
《/fieldset》
 
《div id=“demo6“》《/div》
 
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》显示完整功能《/legend》
《/fieldset》
 
《div id=“demo7“》《/div》
 
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》自定义排版《/legend》
《/fieldset》
 
《div id=“demo8“》《/div》
《div id=“demo9“》《/div》
《div id=“demo10“》《/div》
 
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》自定义每页条数的选择项《/legend》
《/fieldset》
 
《div id=“demo11“》《/div》
 
 
 
《fieldset class=“layui-elem-field layui-field-title“ style=“margin-top: 30px;“》
  《legend》将一段已知数组分页展示《/legend》
《/fieldset》
 
《div id=“demo20“》《/div》
《ul id=“biuuu_city_list“》《/ul》 
 
          
《script src=“//res.layui.com/layui/dist/layui.js“ charset=“utf-8“》《/script》
《!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --》
《script》
layui.use([’laypage’, ’layer’], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
  //总页数低于页码总数
  laypage.render({
    elem: ’demo0’
    ,count: 50 //数据总数
  });
  
  //总页数大于页码总数
  laypage.render({
    elem: ’demo1’
    ,count: 70 //数据总数
    ,jump: function(obj){
      console.log(obj)
    }
  });
  
  //自定义样式
  laypage.render({
    elem: ’demo2’
    ,count: 100
    ,theme: ’#1E9FFF’
  });
  laypage.render({
    elem: ’demo2-1’
    ,count: 100
    ,theme: ’#FF5722’
  });
  laypage.render({
    elem: ’demo2-2’
    ,count: 100
    ,theme: ’#FFB800’
  });
  
  //自定义首页、尾页、上一页、下一页文本
  laypage.render({
    elem: ’demo3’
    ,count: 100
    ,first: ’首页’
    ,last: ’尾页’
    ,prev: ’《em》←《/em》’
    ,next: ’《em》→《/em》’
  });
  
  //不显示首页尾页
  laypage.render({
    elem: ’demo4’
    ,count: 100
    ,first: false
    ,last: false
  });
  
  //开启HASH
  laypage.render({
    elem: ’demo5’
    ,count: 500
    ,curr: location.hash.replace(’#!fenye=’, ’’) //获取hash值为fenye的当前页
    ,hash: ’fenye’ //自定义hash值
  });
  
  //只显示上一页、下一页
  laypage.render({
    elem: ’demo6’
    ,count: 50
    ,layout: [’prev’, ’next’]
    ,jump: function(obj, first){
      if(!first){
        layer.msg(’第 ’+ obj.curr +’ 页’);
      }
    }
  });
  
  //完整功能
  laypage.render({
    elem: ’demo7’
    ,count: 100
    ,layout: [’count’, ’prev’, ’page’, ’next’, ’limit’, ’skip’]
    ,jump: function(obj){
      console.log(obj)
    }
  });
  
  //自定义排版
  laypage.render({
    elem: ’demo8’
    ,count: 1000
    ,layout: [’limit’, ’prev’, ’page’, ’next’]
  });
  laypage.render({
    elem: ’demo9’
    ,count: 1000
    ,layout: [’prev’, ’next’, ’page’]
  });
  laypage.render({
    elem: ’demo10’
    ,count: 1000
    ,layout: [’page’, ’count’]
  });
  
  //自定义每页条数的选择项
  laypage.render({
    elem: ’demo11’
    ,count: 1000
    ,limit: 100
    ,limits: [100, 300, 500]
  });
  
  
  //将一段数组分页展示
  
  //测试数据
  var data = [
    ’北京’,
    ’上海’,
    ’广州’,
    ’深圳’,
    ’杭州’,
    ’长沙’,
    ’合肥’,
    ’宁夏’,
    ’成都’,
    ’西安’,
    ’南昌’,
    ’上饶’,
    ’沈阳’,
    ’济南’,
    ’厦门’,
    ’福州’,
    ’九江’,
    ’宜春’,
    ’赣州’,
    ’宁波’,
    ’绍兴’,
    ’无锡’,
    ’苏州’,
    ’徐州’,
    ’东莞’,
    ’佛山’,
    ’中山’,
    ’成都’,
    ’武汉’,
    ’青岛’,
    ’天津’,
    ’重庆’,
    ’南京’,
    ’九江’,
    ’香港’,
    ’澳门’,
    ’台北’
  ];
  
  //调用分页
  laypage.render({
    elem: ’demo20’
    ,count: data.length
    ,jump: function(obj){
      //模拟渲染
      document.getElementById(’biuuu_city_list’).innerHTML = function(){
        var arr = 
        ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
        layui.each(thisData, function(index, item){
          arr.push(’《li》’+ item +’《/li》’);
        });
        return arr.join(’’);
      }();
    }
  });
  
});
《/script》
《/body》
《/html》

layui的分页组件在后台怎么更新

点“文件”——“页面设置”——“工作表”——光标放入“顶端标题行”后的方框——选中工作表中的共有部分所在 的行（如第一行），如图：——“确定”即可。

java 怎么使用layer分页插件

本文实例为大家分享了laypage前端分页插件，ajax异步分页，获取json数据实现无刷新分页，供大家参考，具体内容如下：
function GetList(pageIndex) {
var _this = ““
var clone_this = ““;
_this = $(“.BindDataList“);//数据列表容器，
clone_this = _this.clone(true);
var pageSize = 25;//每页展示的条数
$.ajax({
type: “get“,
async: false,//异步锁定，默认为true
url: “../ashx/System/DefaultAjax.ashx“,//后端处理数据，返回json格式
data: {“pageIndex“: pageIndex, “pageSize“: pageSize, },
contentType: “application/json; charset=utf-8“,
success: function (data) {
var json = eval(“(“ + data + “)“);
if (json.PageCount 》 0) //数据总条数
{
_this.html(““);
for (var i = 0; i 《 json.rows.length ; i++) {
var html = “《li》json数据《/li》“;
_this.append(html);
}
jsonpage(json, pageIndex, pageSize);
}
else {
_this.html(““);
_this.append(““);
}
}
});
}
function jsonpage(json, pageIndex, pageSize) {
var coun = json.PageCount;//总数据条数
var pagecount = coun % pageSize == 0 ? coun / pageSize : coun / pageSize + 1;//计算多少页
var laypageindex = laypage({
cont: ’project_page’, //容器。值支持id名、原生dom对象，jquery对象。
skin: ’#fb771f’,
pages: pagecount, //通过后台拿到的总页数
curr: pageIndex, //初始化当前页
first: ’|《’, //将首页显示为数字1,。若不显示，设置false即可
last: ’》|’, //将尾页显示为总页数。若不显示，设置false即可
prev: ’《’, //若不显示，设置false即可
next: ’》’, //若不显示，设置false即可
jump: function (obj, first) { //触发分页后的回调
if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
SearchHotTag(obj.curr);
}
}
});
}

layui的分页组件在后台怎么获取分页php

$.getJSON( )的使用方法简介
$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )
url是必选参数，表示json数据的地址；
data是可选参数，用于请求数据时发送数据参数；
success是可参数，这是一个回调函数，用于处理请求到的数据。
　　 //内容页面
　　 《div id=“notice_div“》《/div》
　　 //分页控件 《div id=“notice_pages“》《/div》 《script》 var roolurl = “【如该容器为】：《div id=“page1“》《/div》 pages: datajson.pages,//总页数 groups: 5, //连续显示分页数 skip: false, //是否开启跳页 skin: ’#AF0000’, curr: curr || 1, //当前页, jump: function (obj, first) {//触发分页后的回调 if (!first) {//点击跳页触发函数自身，并传递当前页：obj.curr GetNoticeList(obj.curr, cid); } } }) } }); } $(document).ready(function () { GetNoticeList(0, ’《%=_courseid%》’) }); 《/script》

layui 分页怎么自己写结构

0代表开始的下标，比如一页显示10条的话，那么第一页就是0,10，第二页就是（2-1）*10，10，第三页就是（3-1）*10，10所以你那个0就是写limit($page-1)*$pagenum,$pagenum

使用layui前端框架，进行分页，php怎样传递数据

//以下将以jquery.ajax为例，演示一个异步分页
function demo(curr){
  $.getJSON(’test/demo1.json’, {
    page: curr || 1 //向服务端传的参数，此处只是演示
  }, function(res){
    //此处仅仅是为了演示变化的内容
    var demoContent = (new Date().getTime()/Math.random()/1000)|0;
    document.getElementById(’view1’).innerHTML = res.content + demoContent;
    //显示分页
    laypage({
      cont: ’page1’, //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：《div id=“page1“》《/div》
      pages: res.pages, //通过后台拿到的总页数
      curr: curr || 1, //当前页
      jump: function(obj, first){ //触发分页后的回调
        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
          demo(obj.curr);
        }
      }
    });
  });
};
//运行
demo();

layerpage分页能实现数据交互吗

《span style=“font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);“》 《/span》《span style=“font-family: Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);“》在开发的时候经常遇到分页比较麻烦，尤其对于一个后端程序猿来说，但是这个问题不能不解决，于是找了一个分页的控件用用，记录在下，以便以后使用。《/span》
首先看下laypage网站的简介，然后你就发现很简单的使用了。
以下是网站中使用的简单例子：
//以下将以jquery.ajax为例，演示一个异步分页
$.getJSON(’test/demo1.json’, {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义
laypage({
cont: ’page1’, //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：《div id=“page1“》《/div》
pages: res.pages, //通过后台拿到的总页数
curr: 6, //初始化当前页
jump: function(e){ //触发分页后的回调
$.getJSON(’test/demo1.json’, {curr: e.curr}, function(res){
e.pages = e.last = res.pages; //重新获取总页数，一般不用写
//渲染
var view = document.getElementById(’view1’); //你也可以直接使用jquery
var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此处仅仅是为了演示
view.innerHTML = res.content + demoContent;
});
}
});
});
一个基本的分页效果也就出来了。
如果你需要其他更加绚丽的效果请修改源代码。
先来说下，如果呈现出来一个分页的效果的。
首先呢，引用下控件laypage.js
《script type=“text/javascript“ src=“/lib/laypage/laypage.js“》《/script》
插件下载地址：

前台用layui框架实现表格分页，后台用asp.net的问题

layui的分页会把limit和page（也就是每页条数和当前页，大概是这个名字，具体看layui的数据表格说明）传到后台，你需要在后台接收这两个参数然后展示相应的内容。你可以在运行网页的时候，在网页里按f12，在网络监控中点下第2页，看看是否正确的向后台发送了请求，如果传参正确那就是后台的问题，这个没啥简单办法一说，要看你后台分页代码了。