利用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分页原理 ...
随机推荐
- Egret资源跨域问题
在服务器上配置了允许跨域还不够,还需要在引擎配置允许跨域,不然texture无法在webgl上下文中渲染 会报一个类似于The cross-origin image at 的错误, 只需要在egret ...
- WebGL简易教程(十)：光照
目录 1. 概述 2. 原理 2.1. 光源类型 2.2. 反射类型 2.2.1. 环境反射(enviroment/ambient reflection) 2.2.2. 漫反射(diffuse ref ...
- java中的String是不可变类
String s = "hello "; s += "world"; 这两行代码执行后,原始的String对象中的内容没有变 在这段代码中,s原先指向一个Str ...
- MySQL 视图（合并多表数据）引发的严重性能问题
问题背景: 一.客户环境连续多次出现性能问题,系统登入异常,数据库CPU告警. 处理过程: 1>协助排查数据库性能问题时发现如下两个较频繁的SQL导致严重的性能问题(均使用了视图合并多表数据): ...
- 超详细的FreeRTOS移植全教程——基于srm32
### 准备 在移植之前,我们首先要获取到FreeRTOS的官方的源码包.这里我们提供两个下载链接: > 一个是官网:http://www.freertos.org/ > 另外一个是代码托 ...
- 从输入URL到页面渲染完成 -戈多编程
1.输入URL地址 2.浏览器根据域名查询IP地址 3.浏览器发送HTTP请求到web服务器 4.服务器返回一个永久重定向响应 5.浏览器会跟踪重定向地址 6.服务器处理请求 7.服务器返回一个HTM ...
- 【NOIP模拟赛】小奇挖矿 2
[题目背景] 小奇飞船的钻头开启了无限耐久+精准采集模式!这次它要将原矿运到泛光之源的矿石交易市场,以便为飞船升级无限非概率引擎. [问题描述] 现在有m+1个星球,从左到右标号为0到m,小奇最初在0 ...
- 微信小程序登入流程
微信小程序登入流程 一.首先前端先传code去后端 wx.login({ success(res) { if (res.code) { //发起网络请求 wx.request({ url: app.g ...
- nginx::升级到最新nginx
ubuntu16. 升级nginx到最新版本 wget http://nginx.org/keys/nginx_signing.key sudo apt-key add nginx_signing.k ...
- sql注入100种姿势过waf(二)：过安全狗
仅供学习交流如果你有更好的思路可以一起分享,想一起学习的进我主页 先去安全狗网站下载最新的安全狗版本 从官网下载 windwos apache版 v4.0.2395 最新版 数据库是mysql ...