前端分页(js)
//前端分页
var limit = 10; //每页显示数据条数
var total = $('#host_table').find('tr').length;
var allPage = total%limit>0?parseInt(total/limit)+1:parseInt(total/limit); function doPage(n){
if(allPage>1){
var prevPage='',nextPage='',pageHtml=''; if (n===1) {
prevPage = '<li class="disabled"><a href="javascript:;">上一页</a></li>';
nextPage = '<li data-page="'+ (n+1) +'"><a href="javascript:;">下一页</a></li>';
} else if(n===allPage){
prevPage = '<li data-page="'+ (n-1) +'"><a href="javascript:;">上一页</a></li>';
nextPage = '<li class="disabled"><a href="javascript:;">下一页</a></li>';
} else {
prevPage = '<li data-page="'+ (n-1) +'"><a href="javascript:;">上一页</a></li>';
nextPage = '<li data-page="'+ (n+1) +'"><a href="javascript:;">下一页</a></li>';
} if (n<=5){
for(var i=1;i<=5;i++){
if (n===i) {
pageHtml += '<li class="active"><a href="javascript:;">'+ i +'</a></li>';
}else{
if(i<=allPage) {
pageHtml += '<li data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>';
}
} }
}else{
for(var i=1;i<=5;i++){ cur_page = parseInt(parseInt((n-1)/5)*5); if (n===(cur_page+i)){
pageHtml += '<li class="active"><a href="javascript:;">'+ (cur_page+i) +'</a></li>';
}else{
if((i+cur_page)<=allPage){
pageHtml += '<li data-page="'+ (i+cur_page) +'"><a href="javascript:;">'+ (i+cur_page) +'</a></li>';
}
} } } $('#pagination').html(prevPage+pageHtml+nextPage);
} $('#host_table').find('tr').hide();
if(n===1){
$('#host_table').find('tr:lt('+ limit +')').show();
}else{
$('#host_table').find('tr:gt('+ ((n-1)*limit-1) +'):lt('+ limit +')').show();
} } doPage(1); $('#pagination').on('click', 'li a', function(event) {
event.preventDefault();
var curr = parseInt($(this).parent().data('page')); if (!isNaN(curr)) {
doPage(curr);
}
});
<div class="text-right" style="margin-top:-30px;padding-right:9%">
<ul class="pagination" id="pagination"></ul>
</div>
前端分页(js)的更多相关文章
- 分享非常好用的前端分页js工具类 灵活 简单易懂
分享自己封装的前端分页js工具类 下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...
- js实现前端分页页码管理
用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...
- 锋利的js前端分页之jQuery
大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. /** * pageSi ...
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
- js 前端分页空间控件
现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查 ...
- Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能
Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...
- 纯JS前端分页方法(JS分页)
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
- Extjs中grid前端分页使用PagingMemoryProxy【二】
在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...
- 基于vue2.0实现仿百度前端分页效果(一)
前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的boots ...
随机推荐
- Github 创建SSH密钥克隆仓库详解
1.登录Github主页,点击任意一个repository,点击Clone or download,点击Use SSH 2.点击add a new pulbic key,创建公钥 3.下面图中的Tit ...
- LocalDateTime在项目中的使用(LocalDateTime对接前端通过时间戳互转、LocalDateTime对接数据库)
目录 1. 博客编写背景 2. LocalDateTime 前端交互 2.1 LocalDateTime 向前端写入时间戳 2.1.1 fastJson 默认的写入格式 2.1.2 更改 fastJs ...
- Netty源码学习系列之1-netty的串行无锁化
前言 最近趁着跟老东家提离职之后.到新公司报道之前的这段空闲时期,着力研究了一番netty框架,对其有了一些浅薄的认识,后续的几篇文章会以netty为主,将近期所学记录一二,也争取能帮未对netty有 ...
- EasyARM-iMX257 linux两年前的笔记
我依然清晰的记得刚拿到Imx283 257的情景,兴奋中充满忧虑,对操作系统的概念只知一二,不知三四!!周立功出品的资料我一直觉得是比较精品的,同样这款iMX283配套的文档资料(v1.04)也是比较 ...
- Grafana6.4.4 + zabbix 4.2
环境简介 OS:Centos 7.4 zabbix:4.2.6 Grafana:6.4.4 一.yum 直接安装的方式 官方推荐有几种安装方式我采用yum 直接安装的方式 官方doc: https:/ ...
- 02.快捷键及基本dos命令
无论是使用Windows.Linux操作系统,还是在IDE中,快捷键都是系统本身的标配,事实上,Ctrl+C.V这样的操作,可以帮我们节省大量的时间,如果在IDE中编写代码,除了代码本身,将其余所有的 ...
- <VCC笔记> Assumption
接下来是第二种注释语句类型Assumption.语法_(Assume E), 这个表达式是让VCC在接下来的额推理中,无视表达式E, 直接认可表达式E. 例: int x, y; _(assume x ...
- GoldenDict和AutoHotKey的安装和使用
GoldenDict 下载地址:http://sourceforge.net/projects/goldendict/files/early%20access%20builds/ 官网提供的版本很老, ...
- webdriver中的等待
强制等待:sleep() 设置固定休眠时间,单位为秒. 由python的time包提供, 导入 time 包后就可以使用. 缺点:不智能,使用太多的sleep会影响脚本运行速度. 隐式等待:impli ...
- python基础--程序交互、格式化输出、流程控制、break、continue
在此申明一下,博客参照了https://www.cnblogs.com/jin-xin/,自己做了部分的改动 (1) 程序交互 #!/usr/bin/env python # -*- coding: ...