利用bootstrap3的分页样式和jq实现分页功能
1源码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
</head> <body>
<div style="width:45%;height:45%;margin-left:30%;">
<table class="table table-hover" id="pageShow">
<tr>
<th>name</th>
<th>age</th>
<th>phone</th>
</tr>
</table>
<nav aria-label="Page navigation">
<ul class="pagination" id="page">
<li class="prePage">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</ul>
</nav>
</div>
<script>
$(function() {
var data = Mock.mock({
'list|10-40': [{
'id|+1': 1,
'name|3-5': 'zx',
'age|10-30': 1,
'phone|10000-15000': 1
}]
});
data = data.list
var pageSize = 5; //每页的条数
var totalPage = Math.ceil(data.length / pageSize); //总页数
var currentPage; //当前页数
var startData; //开始的数据
var endData; //结尾的数
for (let i = 1; i <= totalPage; i++) {
$('#page').append('<li class="page-item"><a href="#">' + i + '</a></li>');
}
$('#page').append(
`<li class="nextPage">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>`); function pageination(i) {
currentPage = i;
console.log('第' + currentPage + '页...');
startData = (currentPage - 1) * pageSize;
endData = currentPage * pageSize - 1;
if (endData > data.length) {
endData = data.length;
}
$('.tr-item').remove(); //移除列表显示的数据
for (let i = startData; i < endData; i++) { //添加列表显示的数据
$('#pageShow').append('<tr class="tr-item">' +
'<td>' + data[i].name + '</td>' +
'<td>' + data[i].age + '</td>' +
'<td>' + data[i].phone + '</td>' +
'</tr>')
}
}
//初始化
$('.page-item').eq(0).addClass('active');
pageination(1);
//对每个页数的点击事件的绑定
$('.page-item').on('click', function() {
let index = $(this).index(); //获取点击的页数
$(this).addClass('active').siblings().removeClass('active');
pageination(index);
})
//向前按钮事件绑定
$('.prePage').click(function() {
$('.page-item').find(function() {
let index = $('.active').index() - 1;
if (index < 1) {
index = 1;
}
$('.page-item').eq(index - 1).addClass('active').siblings().removeClass('active');
pageination(index);
})
})
//向后按钮事件绑定
$('.nextPage').click(function() {
$('.page-item').find(function() {
let index = $('.active').index() + 1;
if (index > totalPage) {
index = totalPage;
}
$('.page-item').eq(index - 1).addClass('active').siblings().removeClass('active');
pageination(index);
})
})
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body> </html>
js
思路：
利用事件绑定来使页面显示我们要显示的
利用bootstrap3的分页样式和jq实现分页功能的更多相关文章
- 帝国cms分页样式修改文件-注意事项
帝国cms分页样式主要有:内容页分页样式.列表页分页样式以及默认搜索模板使用的搜索样式等几种. 要改这些样式其实也很简单,在网站目录中找到相应的.css文件修改empages属性就行了,但是这样比较麻 ...
- tp5.0分页样式调控
基础的分页调用 /** * 控制器部分代码 */ //实例化模型 $areasModel=new Areas(); //分页数据集 $listarea=$areasModel->paginate ...
- bootstrap导航条+模态对话框+分页样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq.paginator分页插件稍加修改
样式一: 样式二: 此分页功能在jq.paginator分页插件上稍加修改. 必加模板html: <div id="jqPaginator"> <div id=& ...
- jquery 利用CSS 控制打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
- JQuery巧妙利用CSS操作打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
- C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- DataPager 分页样式（css）
<asp:DataPager ID="> <Fields> <asp:NextPreviousPagerField ShowFirstPageButton=&q ...
- php分页类代码带分页样式效果(转)
php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...
随机推荐
- 588 div2 C. Anadi and Domino
C. Anadi and Domino 题目链接:https://codeforces.com/contest/1230/problem/C Anadi has a set of dominoes. ...
- Nginx常用命令，解决你日常运维的烦恼
前面,跟大家简单地介绍了负载均衡和Nginx的一些基础配置(Nginx负载均衡配置实例),接下来,跟大家介绍一下Nginx的常用命令,便于日常的运维. 查看原文 停止Nginx的方法 通过之前的学习, ...
- 富文编辑器和bs4简单实用
目录 使用方法 官方网址 图片上传下载实例 菜单栏功能筛选 bs4 导入 提取标签内的文本内容 目录 使用方法 直接给输入框绑定事件即可,注意引入js方式有点不一样,多加编码方式 <script ...
- A-05 前向选择法和前向梯度法
目录 前向选择法和前向梯度法 一.前向选择法 1.1 余弦相似度求投影 1.2 举例 1.3 前向选择法优缺点 1.3.1 优点 1.3.2 缺点 二.前向梯度法 2.1 举例 2.2 前向梯度法优缺 ...
- Java字符串课后作业
[实验任务] 1.实验题目:字串加密 2.实验内容:古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:
- MacOS 导入MySQLdb 报错解决思路（解决ImportError: this is MySQLdb version (1, 2, 3, 'beta', 1), but _mysql is version (1, 2, 5, 'final', 1)）
cd /Library/Python/2.7/site-packages ls rm -rf MySQL_python-1.2.5-py2.7.egg-info 然后重新import 即可
- python学习（数据类型）
基本数据类型 (1)numbers 数字 %d 整型 int 长整型 Long 布尔型 boor True False %f 浮点型 float 3.1415926 4.2E-10 复数 comple ...
- 初学 Spring MVC(基于 Spring in Action)
Spring MVC(Model-View-Controller) 当你看到本博文时,我猜你可能正面临着我已探索过的问题. 同其他博主一样,我先按照书上详细的介绍一下 Spring MVC,也是为了自 ...
- Potato土豆win综合提权
0x01 NBNS和WDAP NBNS: 在 Windows 系统中的另外一种名称就是 NetBIOS 名称,准确的说 NetBIOS 名称并非是一种名字系统,而是 Windows 操作系统网络的一个 ...
- Python：的web爬虫实现及原理(BeautifulSoup工具)
最近一直在学习python,学习完了基本语法就练习了一个爬虫demo,下面总结下. 主要逻辑是 1)初始化url管理器,也就是将rooturl加入到url管理器中 2)在url管理器中得到新的new_ ...