利用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分页原理 ...
随机推荐
- 【Java】web实现图片在线预览
一.场景还原 用户上传了一张图片,已有服务器保存路径,现由于系统配置无法直接通过图片URL打开预览图片,需实现点击预览将图片显示在浏览器上. 二.实现方法 html: <a href=" ...
- 卷积神经网络CNN识别MNIST数据集
这次我们将建立一个卷积神经网络,它可以把MNIST手写字符的识别准确率提升到99%,读者可能需要一些卷积神经网络的基础知识才能更好的理解本节的内容. 程序的开头是导入TensorFlow: impor ...
- 04、JDBC范例
范例:JDBC查询 package com.hsp; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...
- Jenkins 管道 工作流 自动化部署
jenkins Jenkins是一个用Java编写的开源的持续集成工具.在与Oracle发生争执后,项目从Hudson项目复刻. Jenkins提供了软件开发的持续集成服务.它运行在Servlet容器 ...
- MIPI CSI2-TX接口基于FPGA实现
MIPI CSI2-TX用途: 跟海思的3559A芯片进行图像数据传输: MIPI CSI2-TX接口特性: xilinx 7系列芯片最大支持1.25Gbps: 最大支持lanes数量为4: 支持的图 ...
- java生成32位UUID
java生成32位UUID,具体代码如下: package com.fxsen.uuid; import java.util.UUID; /** * Copyright: Copyright (c) ...
- SQL SERVER数据库基本语法汇总，仅代表个人整理，仅供参考
以下SQL基本语法皆由本人整理,以下做一个汇总,关于游标,可作为了解,不要求掌握,其他查询.修改.删除操作等基本语法必须会使用.select * from [dbo].[TBICJE]select m ...
- Linux C++轻量级开发指南
作为一名产品开发,一套顺手的集成开发环境必不可少.大多数时候,开发经理将精力投入在产品需求分析上而忽视了研发质量甚至连基本的集成开发环境都没有统一.当然,如果你们的项目仅仅需要部署在单一的环境中或没有 ...
- ABAP实现Blowfish加密算法
看到SAP社区中有人问是否存在ABAP实现的Blowfish加密算法,无人回答.于是动手实现了一个blowfish-abap.通过blowfish-abap可以在SAP系统中使用Blowfish对数据 ...
- vue事件获取当前对象
一.事件传参 如点击事件 <div @click='click'> <div> <div @click='click_1('msg')'> <div> ...