前端分页(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 ...
随机推荐
- Linux帮助命令man详解
命令man详解 命令man,可以获得命令(使用whatis命令可以得到一个命令的简短介绍,可以使用:命令 --help 来获得命令的选项说明)或配置文件的帮助信息(可以使用apropos命令仅查看配置 ...
- ClickHouse基本操作(一)
常用SQL 创建表 1 2 3 4 5 6 7 CREATE TABLE b6logs( eventDate Date, impid UInt64, uid String, idfa String, ...
- SSM-maven 简单整合
记一次简单的整合了一次SSM框架过程,因为好久不用了在过程中发生了一些问题. 后续我会在继续在此基础上整合其他框架进来. 本次整合用到的框架有: spring & springmvc myba ...
- 将MySQL库的表转入到MSSQL中的某个库中(Employees下的Employees表 → pubs库下)_2
将MySQL库的表转入到MSSQL中的某个库中(Employees下的Employees表 → pubs库下, 此pubs下的表名是employee,不冲突),方法大致以下几个(另有其他方法待补充), ...
- 一文读懂Redis的四种模式,单机、主从、哨兵、集群
少点代码,多点头发 本文已经被GitHub收录,欢迎大家踊跃star 和 issues. https://github.com/midou-tech/articles 入职第一周,我被坑了 最近刚入职 ...
- 快捷符号输入小tip(option,alt键的妙用)
我们知道特殊符号的输入可以通过上档键(shift)加数字来完成.如!@#$%... -> (shift + 1 2 3 4 5...) 但是少有人知道windows中的alt键,或是macos中 ...
- [apue] 一个快速确定新系统上各类限制值的工具
对于在不同 Unix 系统之间移植程序,最重要的事情就是确定新系统的一些编译时.运行时固定或不固定的限制值了.例如文件路径最大长度 PATH_MAX.进程最大可打开文件句柄数 OPEN_MAX.用户可 ...
- Linux切换超级管理员root用户
Ubuntu用$标志表示你现在处于普通用户,#表示超级用户. 普通用户会有限制,想从普通变成超级用户,可以输入 su 或 su - 命令,要求你输入密码, 你如记得密码就可以直接输入,再Enter即可 ...
- git 本机链接多库配置
git config --list 查看所有配置 // 提交时读取用户名称及邮箱优先级 --local > --global > --system // 全局配置用户名称及邮箱 git c ...
- cb42a_c++_STL_算法_替换_replace
cb42a_c++_STL_算法_替换_replacereplace(b,e,ov,nv),ov,old value, nv,new valuereplace_if(b,e,p,v) 根据p的条件,全 ...