布衣之谈
所谓插件，大概就是项目中可插可拔的比较小功能化的组件；这些功能组件若能力可及，自己也可以完成——也即自己造*，但翻看各种技术社区，相关领域的神人们往往会有更好的实现方案贡献出来，这个时候你只需要满怀崇敬之心、感激之情，在遵循别人的使用约定的前提下拿过来应用在自己的项目中即可，省却了很多自造车轮的成本。就像苹果造机，虽名苹果，但其零部件全都是世界各地各个功能厂商共同贡献的结果。编程亦是此理，博主入编程的坑稍晚，但也越发的感觉到，在各种功能组件以及技术框架越来越普遍且适用的今天，正是依靠技术互助共享的精神力量，编程才变得越来越简单、快捷的。瞎哔哔了这么多，博主只想说，我虽没有造*的能力，但力所能及的，就是尽量将自己的技术积累以博客的形式记录、分享，自己成长为大菜鸟的同时，也期望能帮到更多的小菜鸟——造车*咱不会，但告诉别人如何使用，也算是功德一件。
layPage分页插件使用
分页是项目中比价常见的功能，所以网上分页插件也很多，功能都大同小异，也都很好用，只是页面风格不同而已，在实际项目中根据自己项目的界面风格选择合适的一款就好。本篇主要介绍前端框架Layui中众多功能组件之一的分页组件——layPage的使用。废话已多说完毕，直接进入正题。页面插件的使用离不开js和css的支持，所以先去官网下载压缩包，解压获取其中的js和css导入自己的前端页面。博主测试的页面因为同时引用了bootstrap的样式，和layui的样式有些冲突，会对插件的渲染效果有些微的影响。我们在使用第三方插件时，肯定先要根据官方文档结合demo去学习,这些样例包含有各种样式可供选择，总有一款适合你——
结合官方的示例代码，我们就可以根据自己的界面效果来应用插件了。先上简单的前端页面——
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="${BASE_PATH}/Plugins/layui/css/layui.css">
<link rel="stylesheet" href="${BASE_PATH}/Plugins/bootstrap/css/bootstrap.min.css" type="text/css"></link>
<script type="text/javascript" src="${BASE_PATH}/Plugins/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="${BASE_PATH}/Plugins/layui/js/layui.all.js"></script>
<script type="text/javascript" src="${BASE_PATH}/js/test.js"></script>
<style type="text/css">
.table th, .table td{
text-align : center;
vertical-align : middle!improtant;
}
.container {
width : 60%;
}
</style>
</head>
<body>
<div class="container content">
<div class="row">
<div>
<div class="panel panel-green margin-bottom-40">
<div class="panel-heading">
<h1 class="panel-title">layPage测试</h1>
</div>
<div class="panel-body">
<div>
<div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<!-- 表格数据加载 -->
<tbody id="tab_list">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 存放分页的容器 -->
<div id="layui"></div>
</div>
</body>
</html>
上面的前端页面很简单，根据官方文档，我们需在合适的位置提供一个存放分页控件的 div 容器。然后是 js 页面——
$(function () {
initLayPage();
});
/**
* 初始化layui分页
*/
function initLayPage(pageConf) {
if (!pageConf) {
pageConf = {};
pageConf.pageSize = 10;
pageConf.currentPage = 1;
}
$.post("/test/query", pageConf, function (data) {
layui.use(['laypage', 'layer'], function () {
var page = layui.laypage;
page.render({
elem: 'layui',
count: data.total,
curr: pageConf.currentPage,
limit: pageConf.pageSize,
first: "首页",
last: "尾页",
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
jump: function (obj, first) {
if (!first) {
pageConf.currentPage = obj.curr;
pageConf.pageSize = obj.limit;
initLayPage(pageConf);
}
}
});
fillTable(data.list, (pageConf.currentPage - 1) * pageConf.pageSize); //页面填充
})
});
}
//填充表格数据
function fillTable(data, num) {
$("#tab_list").html('');
$.each(data, function (index, obj) {
// id 很多时候并不是连续的，如果为了显示比较连续的记录数，可以这样根据当前页和每页条数动态的计算记录序号
index = index + num + 1;
var info = '';
info += '<tr>';
info += '<td>' + index + '</td>';
info += '<td>' + obj.name + '</td>';
info += '<td>' + obj.age + '</td>';
info += '<td style="text-align: center;"><button name="btnModify" type="button" class="btn btn-success btn-xs" >修改</button><button name="btnDelete" type="button" class="btn btn-danger btn-xs" onclick="remove(' + obj.id + ')">删除</button></td>';
info += '</tr>';
$("#tab_list").append(info);
});
}
对于上面的 js,咋一看有点懵，但我们看一下官方给出的基础参数选项就比较好理解了——
上面js 中要重点利用的就是切换分页的回调函数 jump ,该函数在分页或者每页显示条数发生改变时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）。当分页发生改变时，可以根据obj获取到改变后的当前页或者每页显示条数，带着这些参数便可以继续发送ajax请求后台获取数据。对于一些溢出情况，layPage已经做了很好的封装，比如，每页显示20条时当前正在最后一页（5），当切换到每页40条的时候，总共只有3页了，那么layPage会自动计算并切换到当前的最后一页第3页，无需我们自己再去判断处理。下面就是博主做好的分页效果：
一切，就是这么简单，就像初恋般的感觉。。。
拿来主义：layPage分页插件的使用的更多相关文章
-
基于layPage分页插件浅析两种分页方式
最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验 在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示 ...
-
Thinkphp5之laypage分页插件的实现
//一下是laypage所用到的 js <script type="text/javascript" src="__STATIC__/lib/laypage/1.2 ...
-
Flask学习之旅--分页功能：分别使用 flask--pagination 和分页插件 layPage
一.前言 现在开发一个网站,分页是一个很常见的功能了,尤其是当数据达到一定量的时候,如果都显示在页面上,会造成页面过长而影响用户体验,除此之外,还可能出现加载过慢等问题.因此,分页就很有必要了. 分页 ...
-
LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...
-
layui 通过laytpl模板，以及laypage分页实现
一.引用js依赖 jquery-1.11.3.min.js , layui.all.js, json2.js 二.js分页方法封装(分页使用模板laytpl) 1.模板渲染 /** * 分页模板的渲 ...
-
MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
-
分页插件--根据Bootstrap Paginator改写的js插件
刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...
-
[原创]jquery+css3打造一款ajax分页插件
最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...
-
一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
随机推荐
-
Java之this关键字的用法
Java 中的 this 关键字指当前的对象,可以直接用其调用当前对象的成员变量,也可以直接用其调用当前对象的成员方法,这是我们常见的场景,那么有没有其它的情况呢! this 还可以在无参的构造方法中 ...
-
<;a href=”#”>;与 <;a href=”javascript:void(0)” 的区别
<a href=”#”>中的“#”其实是锚点的意思,默认为#top,所以当页面比较长的时候,使用这种方式会让页面刷新到页首(页面的最上部) javascript:void(0)其实是一个死 ...
-
excel快捷键设置
Excel技能 按键 结果 序号 Alt+1 合并后居中 1 ALT+2 边框 2 ALT+3 边框线型 3 ALT+4 格式刷 4 ALT+5 清除格式 5 CTRL+SHIFT+P 设置字体 6 ...
-
C#格式化小数位的方法
C#格式化字符串还是很方便的,之前一直没用过,也就没有缘分了解 Double dValue = 95.12345; int iValue = 10000; string strValue = &quo ...
-
Extension Methods
Oftentimes you’ll find yourself using classes you can’t modify. Whether they’re basic data types or ...
-
I.MX6 android 移除shutdown功能
/************************************************************************ * I.MX6 android 移除shutdown ...
-
vim配置python编程环境及YouCompleteMe的安装教程
python号称人工智能语言,现在可算大热,这篇博客将介绍如何用vim打造一款自己专属的python编程环境. step1 由于安装YouCompleteMe需要vim8.0及以上版本,所以得安装使用 ...
-
RPC远程过程调用实例
什么是RPC RPC 的全称是 Remote Procedure Call 是一种进程间通信方式.它允许程序调用另一个地址空间(通常是共享网络的另一台机器上)的过程或函数,而不用程序员显式编码这个远程 ...
-
2016年3月11日Android学习日记
1.调试技巧:当一次调试过后,可以在App重新返回当前的状态,然后再调试,而不用再点击Android studio的Debug按钮. 参考:http://www.2cto.com/kf/201506/ ...
-
选择 Python3.6 还是 Python 3.7
转自:白月黑羽在线教程:http://www.python3.vip/doc/blog/python/home/ 选择 Python3.6 还是 Python 3.7 Python 3.7 已经发布了 ...