下载地址:http://esimakin.github.io/twbs-pagination/

1 解决totalPages不更新的问题  (先移除然后重新加入DOM树中)在使用twbsPagination之前做。
$('#visible-pages-example').remove();
$("#pagination_box").append('<ul id="visible-pages-example" class="pagination"></ul>'); 2 实现ajax分页
$('#visible-pages-example').twbsPagination({
currentPage: currentPage,
totalPages:totalPages,
first: "首页",
last: "未页",
prev: '上一页',
next: '下一页',
startPage: 1,
visiblePages:totalPages>10?10:totalPages,解决当totalPages小于visiblePages页码变负值的bug
version: '1.1',
onPageClick: function (event, page) {
// 点击页码发起ajax请求
//点击首页ajax异步请求
$(this).addClass("active").siblings().removeClass("active");
var aj = $.ajax({
url: "http://10.248.26.212:8090/v1/logParseRule/select/" + (page - 1) * $(".select").val() + "/" + $(".select").val() + "",
//url: "http://localhost:8090/v1/logParseTool/parseCSV",
contentType: "application/json",
data: strJson,
type: 'post',
cache: false,
dataType: 'json',
success: function (json) {
console.log(json.data);
totalPages = json.data.totalPages;
currentPage = json.data.currentPage;
totalRows = json.data.totalRows;
oTbody = document.getElementById("tbody");
oTrs = oTbody.getElementsByTagName("tr");
result = json.data.datas;
$("#currentPage").html(currentPage);
$("#totalPages").html(totalPages);
$("#totalRows").html(totalRows);
$(oTrs).children().remove();
var result = json.data.datas;
for (var i = 0; i < result.length; i++) {
$("#tbody").append("<tr><th scope='row'>" + result[i].id + "</th><td>" + result[i].name + "</td><td>" + result[i].mode + "</td> <td>" + result[i].descs + "</td><td> <span class='btn btn-default'>查看</span> <span class='btn btn-primary'>编辑</span> <span class='delete btn btn-danger'>删除</span> </td></tr");
}
//点击删除删除本行并ajax请求删除数据
$(".delete").click(function(){
$.ajax({
url: "http://10.248.26.212:8090/v1/logParseRule/delete/"+$(this).parents("tr").children().eq(0).text()+"",
contentType: "application/json",
type: 'post',
cache: false,
dataType: 'json',
success: function (json) {
}
});
$(this).parents("tr").remove();
});
},
error: function () {
return;
}
});
}
});

一个简单的JQuery自适应分页插件twbsPagination的更多相关文章

  1. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  2. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  3. jQuery Pagination分页插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  5. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  6. 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

  7. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  8. jPaginate 一个非常好用的分页插件

    之前报馆项目用的前端框架easyui,还是用不太习惯,因此换了一个框架,最近为此找分页插件,偶然间看见一个非常好用的分页插件JPaginate Paginate是基于jquery的分页插件,非常轻量, ...

  9. 12款优秀 jQuery Ajax 分页插件和教程

    12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...

随机推荐

  1. JAVA将秒的总和转换成时分秒的格式

    public static void main(String[] args) { String str = "221"; int seconds = Integer.parseIn ...

  2. JQ的ready()方法与window.onload()的区别与联系

    JQ的ready()与window.onload()方法都是在文档加载完毕之后才会被触发的方法,但它们之间的区别也是很明显的. 1.区别与联系:   $(document).ready() windo ...

  3. 进阶篇:3.9)3d打印件设计

    本章目的:了解3d打印,购买3d打印机. 1.3d打印基础知识: 现在主流的3d打印技术有4种:①FDM:②SLA:③SLS:④3DP.具体如下: ①熔融沉积造型(Fused deposition m ...

  4. selectComponent是ok的,小程序组件 component方式,让子页面重绘

    this.selectComponent('#news').init(); 其中news是父级xml文件引用子组件的时给子组件的id. 当父级传给子级的数据有变化时,需要子页面重绘,所以就用上面那行代 ...

  5. kamctl start

    尽管没有吃饭,胃酸,九点半,,,还是挺高兴的.只截图不说话. 这个问题弄得我好烦啊.几个小时...网罗了国外几个论坛都没有解.我还没有想到这就不是问题,,,多试多试 再看看moni 也没什么意思,就是 ...

  6. golang (2) package

    综述 golang package是基本的管理单元,package是golang最基本的分发单位和工程管理中依赖关系的体现. 每个golang源代码文件开头都拥有一个package声明,表示该gola ...

  7. makedown学习笔记(以后可能会用makedown写博客)

    学习手册 https://www.zybuluo.com/mdeditor?url=https%3A%2F%2Fwww.zybuluo.com%2Fstatic%2Feditor%2Fmd-help. ...

  8. 【爬虫】-爬取猫眼TOP100

    原文崔庆才<python3网络爬虫实战> 本文为自学记录,如有侵权,请联系删除 目标: 熟悉正则表达式,以及爬虫流程 获取猫眼TOP100榜单 1.网站分析 目标站点为http://www ...

  9. vue中遇到的坑keep-alive、vue-router相关

    在进入详情页之后,然后返回到首页,报错如下.  虽说是报错了,但是对我最后的页面并没有什么影响,但是出现了一堆红色的报错,作为一个前端工程师,看着还是十分难受的!! 一旦出现问题,我的解决思路一般是, ...

  10. JAVA学习4:用Maven创建Struts2项目

    采用struts版本:struts-2.3.8 一.创建一个web项目 参考前面文章,项目名:maven-struts-demo. 二.配置pom.xml文件添加struts2依赖   <pro ...