下载地址: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. iOS开发之动画中的时间(概况)

    一.引言 在iOS开发中使用动画时,可以通过设置动画的duration.speed.begintime.offset属性,来设置动画的时长.速度.起始时间及起始偏移. 用一个简单的例子来说明各个参数的 ...

  2. javascript 动态脚本添加

    异步加载js文件或者异步加载js模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createScript方法用于创建一个script标签并添加到body标签中 2.create ...

  3. Linux 包管理器

    RPM: rpm(Red-Hat Package Manager) 为 Redhat 提出的包管理器, 用于在 Redhat 及其衍生版本中安装 rpm 格式的软件包 rpm 的优点: 1.简化了源码 ...

  4. 2016级算法第一次练习赛-D.AlvinZH的儿时回忆——跳房子

    864 AlvinZH的儿时回忆----跳房子 题目链接:https://buaacoding.cn/problem/864/index 思路 这是一道简单题,但是同样有人想复杂了,DP?大模拟?. ...

  5. abp部署端口和域名映射配置

    前引 apb部署 后端服务9900端口,域名访问地址是:http://nihao-api.hellow.com: 前端4200端口,域名访问地址是:http://nihao.hellow.com: 前 ...

  6. pymysql 各种坑总结

    pymysql各种坑只针对自己的项目1.关于关闭连接,报错为:pymysql.err.InterfaceError: (0, '') 这个错误原因:对已经关闭的链接再次进行操作,参考MySQL.err ...

  7. django 中的聚合和分组 F查询 Q查询 事务cookies和sessions 066

    1 聚合和分组 聚合:对一些数据进行整理分析 进而得到结果(mysql中的聚合函数) 1aggregate(*args,**kwargs) : 通过对QuerySet进行计算 ,返回一个聚合值的字典. ...

  8. mysql 设置默认时间为now()

    TIMESTAMP的变体1,TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP在创建新记录和修改现有记录的时候都对这个数据列 ...

  9. easyUI----纵向合并单元格

    使用Easyui-DataGrid过程用.做统计/报表等时经常会使用到合并单元格,原生态Easyui-DataGrid没有合并单元格的属性或方法. 解决方案: 代码一 onLoadSuccess: f ...

  10. Request.QueryString 的用法

    比如常见的URL网页地址都有 xxx.asp?type=reLogin   ?号后面的就是querystring querystring是asp中获取数据的一个方法. 那么就可以用request.qu ...