//前端分页
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 服务管理-服务分类

    Linux中的服务根据安装方法的不同可以分为RPM包默认安装的服务和源码包安装的服务,而RPM包安装的服务又依据启动和自启动的不同分为独立服务和基于xinetd服务. 查看已经安装的服务 查看所有RP ...

  2. arduino 的analogRead() 和analogWrite()

    模拟输入analogRead()函数的返回值范围是0 到1023; 而模拟输出analogWrite()函数的输出值范围是0 到255; 所以: val = analogRead(potpin); / ...

  3. 本地配置gitee

    一 下载工具 Git-2.62.0-64-bit.exe 以上工具版本号不需要一样,安装完前两个后重新启动系统,再安装第3个. 二 码云网站注册 https://gitee.com/ 使用邮箱注册 注 ...

  4. 我去,你竟然还不会用 Java final 关键字

    写一篇文章容易吗?太不容易了,首先,需要一个安静的环境,这一点就非常不容易.很多小伙伴的办公室都是开放式的,非常吵,况且上班时间写的话,领导就不高兴了:只能抽时间写.其次,环境有了,还要有一颗安静的心 ...

  5. 附022.Kubernetes_v1.18.3高可用部署架构一

    kubeadm介绍 kubeadm概述 参考附003.Kubeadm部署Kubernetes. kubeadm功能 参考附003.Kubeadm部署Kubernetes. 本方案描述 本方案采用kub ...

  6. Github上可以涨薪30k的Java教程和实战项目终于可以免费下载了

    写在前面 大家都知道 Github 是一个程序员福地,这里有各种厉害的开源框架.软件或者教程.这些东西对于我们学习和进步有着莫大的进步,所以我有了这个将 Github 上非常棒的 Java 开源项目整 ...

  7. Seafile的配置

    如果部署在apache或nginx后面,就是访问默认80或443.反向代理会帮你转到8000和8082上. 我使用443,我在路由器上设定了转发,比如 对外网12323这个端口会转到内网地址443上 ...

  8. Iterable对象

    ''' 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的ge ...

  9. range用法(倒序取值)

    range(4,-1,-1) #倒数取值 ''' start: 计数从 start 开始.默认是从 0 开始.例如range(5)等价于range(0, 5); stop: 计数到 stop 结束,但 ...

  10. Java对象转换Json的细节处理

    一.fastJson 1.fastJson在转换java对象为json的时候,默认是不序列化null值对应的key的 也就是说当对象里面的属性为空的时候,在转换成json时,不序列化那些为null值的 ...