//前端分页
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. java实现第六届蓝桥杯空心菱形

    空心菱形 标题:空心菱形 小明刚刚开发了一个小程序,可以打印出任意规模的空心菱形,规模为6时,如下图: ****** ****** ***** ***** **** **** *** *** ** * ...

  2. 【CSS】常用色值

    常用颜色: 嫣红(red):#e54d42 桔橙(orange):#f37b1d 明黄(yellow):#fbbd08 橄榄(olive):#8dc63f 森绿(green):#39b54a 天青(c ...

  3. 性能测试中TPS上不去的原因

    TPS(Transaction Per Second):每秒事务数,指服务器在单位时间内(秒)可以处理的事务数量,一般以request/second为单位. 压测中为什么TPS上不去的原因: .网络带 ...

  4. BFART算法

    参考:https://zhuanlan.zhihu.com/p/31498036 https://www.jianshu.com/p/83bb10ad1d32

  5. 调优 | Apache Hudi应用调优指南

    通过Spark作业将数据写入Hudi时,Spark应用的调优技巧也适用于此.如果要提高性能或可靠性,请牢记以下几点. 输入并行性:Hudi对输入进行分区默认并发度为1500,以确保每个Spark分区都 ...

  6. 诸葛亮vs司马懿,排序算法大战谁能笑到最后?

    阵前对峙 公元234年,蜀汉丞相诸葛孔明再次北伐. 一日,与司马仲达所率魏军两军相峙,二人阵前舌战. 司马曰:"诸葛村夫,吾与汝相斗数年,斗兵斗阵斗谋略,均已疲乏.今日,何不一改陈规,斗点新 ...

  7. Hbase的基本架构以及对应的读写流程

    一.HBase简介 1,定义: HBase 是一种分布式.可扩展.支持海量数据存储的 NoSQL 数据库. 2,HBase的架构图: 架构角色: 1)Master Master是所有Region Se ...

  8. Python 抓取网页tag操作

    1. 获取操作tag 获取操作tag的接种方式: soup.find_all(name=None, attrs={}, recursive=True, text=None, limit=None, * ...

  9. 解决:Error:java: 无效的源发行版: 12

    一. spring cloud项目启动.遇到问题: 二. 解决,共两个地方. 第一个位置: Shift/Ctrl/Alt/S 快捷键一起按 Modules选择你的项目(以及父级项目,如果有的话)-&g ...

  10. [xDebug] 服务器端的配置参数

    [Xdebug] ;load xdebug extensionzend_extension_ts = path/tp/xdebug;是否开启自动跟踪xdebug.auto_trace = On;是否开 ...