Layui的分页操作

我在开发的过程中用layui去实现前端页码的分页操作，但是在部署的过程中，发现我前端的数据是分页来读取数据的，所以这个layui的方法不能满足需求，我需要使用分页操作的js代码去读取数据，并且在这里记录一下开发中走的弯路。

<!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="../../../../nresource/comp/js/layui/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="demo8"></div><div id="demo7"></div><script src="../../../../nresource/comp/private/module/cutover/js/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>//将一段数组分页展示var data = ['1','10','11','111','1111','1524','2','3','4','6','1','10','11','111','1111','1524','2','3','4','6','1','10','11','111','1111','1524','2','3','4','6','1','10','11','111','1111','1524','2','3','4','6',];console.log("typeofdata--------------"+typeof (data))var pageNum=5;console.log("typeofdata--------------"+typeof (data))layui.use(['laypage', 'layer'], function(){var laypage = layui.laypage,layer = layui.layer;//完整功能laypage.render({elem: 'demo7',count: data.length,pages: Math.ceil(data.length/pageNum)//得到总页数,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],jump: function(obj){//模拟渲染document.getElementById('demo8').innerHTML = function(){var arr = [],thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);console.log("thisData--------------"+thisData)layui.each(thisData, function(index, item){arr.push('<li>'+ item +'</li>');});return arr.join('');}();}});});
</script></body>
</html>

Layui的分页操作相关推荐

java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖主要是jquery-1.11. ...
layui的分页功能
1.首先在layui中布局好数据表格创建一个table实例最简单的方式是,在页面放置一个元素 ,然后通过 table.render() 方法指定该容器,如下所示: 1. <link rel=& ...
Layui列表分页功能前后台实现（傻瓜式教程）
Layui列表分页功能前后台实现 layui一直备受国内web开发者的喜欢.使用简单,样式也较为好看.本次说一下layui分页的实例,首先先引入layui,那是肯定的. 效果图: 引入一个maven依 ...
layui table 分页序号始终从”1“开始解决方法
layui table 分页序号始终从"1"开始解决方法参考文章: (1)layui table 分页序号始终从"1"开始解决方法 (2)https:// ...
适合千万数据查询分页操作的一个通用存储过程
适合千万数据查询分页操作的一个通用存储过程一.引言最近上班比较忙,所以就很少写东西了,MongoDB系列的文章也要拖后了,没办法,工作第一,没工作就没饭吃了.今天正好 ...
lucene的两种分页操作
2019独角兽企业重金招聘Python工程师标准>>> lucene的两种分页操作博客分类: 搜索引擎,爬虫 java 基于lucene的分页有两种: lucene3.5之前分页提 ...
ajax实现分页操作
利用ajax请求数据的特点,来实现分页操作. 主要是利用ajax进行后端分页,当点击对应的页数,ajax请求数据库对应的数据,后端分页可以降低前端请求数据的压力,页面渲染起来比较流畅. 根据后台请求的 ...
ele-ui 里面的分页操作
html: <pagination class="pagination" :pages="pages" @changePage="changeP ...
html中div分页操作
//栏目分页操作,js代码var allPages;var cnt;var indexs;var boxes;$(function() {var $div = $("#rdjggs" ...

Layui的分页操作

Layui的分页操作相关推荐

最新文章

热门文章