//前端分页
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)的更多相关文章

  1. 分享非常好用的前端分页js工具类 灵活 简单易懂

    分享自己封装的前端分页js工具类  下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...

  2. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  3. 锋利的js前端分页之jQuery

    大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. /** * pageSi ...

  4. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  5. js 前端分页空间控件

    现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查 ...

  6. Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

    Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...

  7. 纯JS前端分页方法(JS分页)

    1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...

  8. Extjs中grid前端分页使用PagingMemoryProxy【二】

        在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...

  9. 基于vue2.0实现仿百度前端分页效果(一)

    前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的boots ...

随机推荐

  1. Linux帮助命令man详解

    命令man详解 命令man,可以获得命令(使用whatis命令可以得到一个命令的简短介绍,可以使用:命令 --help 来获得命令的选项说明)或配置文件的帮助信息(可以使用apropos命令仅查看配置 ...

  2. ClickHouse基本操作(一)

    常用SQL 创建表 1 2 3 4 5 6 7 CREATE TABLE b6logs( eventDate Date, impid UInt64, uid String, idfa String, ...

  3. SSM-maven 简单整合

    记一次简单的整合了一次SSM框架过程,因为好久不用了在过程中发生了一些问题. 后续我会在继续在此基础上整合其他框架进来. 本次整合用到的框架有: spring & springmvc myba ...

  4. 将MySQL库的表转入到MSSQL中的某个库中(Employees下的Employees表 → pubs库下)_2

    将MySQL库的表转入到MSSQL中的某个库中(Employees下的Employees表 → pubs库下, 此pubs下的表名是employee,不冲突),方法大致以下几个(另有其他方法待补充), ...

  5. 一文读懂Redis的四种模式,单机、主从、哨兵、集群

    少点代码,多点头发 本文已经被GitHub收录,欢迎大家踊跃star 和 issues. https://github.com/midou-tech/articles 入职第一周,我被坑了 最近刚入职 ...

  6. 快捷符号输入小tip(option,alt键的妙用)

    我们知道特殊符号的输入可以通过上档键(shift)加数字来完成.如!@#$%... -> (shift + 1 2 3 4 5...) 但是少有人知道windows中的alt键,或是macos中 ...

  7. [apue] 一个快速确定新系统上各类限制值的工具

    对于在不同 Unix 系统之间移植程序,最重要的事情就是确定新系统的一些编译时.运行时固定或不固定的限制值了.例如文件路径最大长度 PATH_MAX.进程最大可打开文件句柄数 OPEN_MAX.用户可 ...

  8. Linux切换超级管理员root用户

    Ubuntu用$标志表示你现在处于普通用户,#表示超级用户. 普通用户会有限制,想从普通变成超级用户,可以输入 su 或 su - 命令,要求你输入密码, 你如记得密码就可以直接输入,再Enter即可 ...

  9. git 本机链接多库配置

    git config --list 查看所有配置 // 提交时读取用户名称及邮箱优先级 --local > --global > --system // 全局配置用户名称及邮箱 git c ...

  10. cb42a_c++_STL_算法_替换_replace

    cb42a_c++_STL_算法_替换_replacereplace(b,e,ov,nv),ov,old value, nv,new valuereplace_if(b,e,p,v) 根据p的条件,全 ...