利用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分页原理 ...
随机推荐
- Spring Boot 2.x 基础案例：整合Dubbo 2.7.3+Nacos1.1.3（配置中心）
本文原创首发于公众号:Java技术干货 1.概述 本文将Nacos作为配置中心,实现配置外部化,动态更新.这样做的优点:不需要重启应用,便可以动态更新应用里的配置信息.在如今流行的微服务应用下,将应用 ...
- Spring Cloud之Zuul
API网关是一个更为智能的应用服务器,它的存在就像是整个微服务架构系统的门面一样,所有的外部客户端访问都需要经过它来进行调度和过滤.它除了要实现请求路由.负载均衡.校验过滤等功能之外,还需要更多能力, ...
- SpringCloud系列-整合Hystrix的两种方式
Hystrix [hɪst'rɪks],中文含义是豪猪,因其背上长满棘刺,从而拥有了自我保护的能力.本文所说的Hystrix是Netflix开源的一款容错框架,同样具有自我保护能力. 本文目录 一.H ...
- 统计字符的个数，能够组成几个acmicpc
Problem F. String Input file: standard input Output file: standard ou ...
- Mac 10.14 安装抓包工具Fiddler
环境安装 第一步: 首先,Mac下需要使用.Net编译后的程序,需要用到跨平台的方案Mono(现阶段微软已推出跨平台的方案.Net Core,不过暂时只支持控制台程序).安装程序可以从http://w ...
- surging 微服务引擎 -协议主机的Behavior特性
1.前言 因为工作的关系,最近很少更新surging,因为surging 一直处在不温不火的状态,而自己每天利用业余时间进行完善,每天都是疲惫的状态,还要应付新手的提问,曾经一度想放弃,但是有些人劝说 ...
- hydra暴力破解
hydra,是一个非常好用的暴力破解工具,而且名字也很cool. 下面是官网上的介绍: AFP, Cisco AAA, Cisco auth, Cisco enable, CVS, Firebird, ...
- Oier们的幸运数字
题目描述 JerryC对数字痴迷到了一种非正常的境界.每天JerryC都有喜欢的一些数字.第 iii 天JerryC就喜欢Ai−BiA_i-B_iAi−Bi中的数字.但是他觉得这样并不是很有趣,于 ...
- Cocos2d-x 学习笔记(15.2) EventDispatcher 事件分发机制 dispatchEvent(event)
1. 事件分发方法 EventDispatcher::dispatchEvent(Event* event) 首先通过_isEnabled标志判断事件分发是否启用. 执行 updateDirtyFla ...
- 我家很管事的猫——mycat初步部署实践与问题排查
mycat,阿里出品的mysql中间件,提供读写分离和分库分表方案.项目中主要使用的是其读写分离功能. [如何部署?] 本文只采用并测试了双主从模式,配置看这一篇足矣: https://www.cnb ...