一个简单的JQuery自适应分页插件twbsPagination
下载地址: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的更多相关文章
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 编写一个简单的Jquery插件
1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...
- jQuery Pagination分页插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- Jquery前端分页插件pagination使用
插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...
- 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
- jPaginate 一个非常好用的分页插件
之前报馆项目用的前端框架easyui,还是用不太习惯,因此换了一个框架,最近为此找分页插件,偶然间看见一个非常好用的分页插件JPaginate Paginate是基于jquery的分页插件,非常轻量, ...
- 12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
随机推荐
- Deeplearning学习
Deeplearning 概念 Deep Learning: 观点: 认为AI是最新的电力,大约在一百年前,我们社会的电气化改变了每个主要行业,从交通运输行业到制造业.医疗保健.通讯等方面,我认为 ...
- linux用到的命令
命令行下利用别名打开ss以及设置相关代理(写到~/.bashrc中使永久有效) #open proxy alias proxystart='gsettings set org.gnome.system ...
- Oracle WebLogic Server 12c 新特性
美国时间2011年 12月9日,Oracle公司正式发布WebLogic 12c版本,c是cloud的缩写.截止当前(2013年8月)最新版本为Oracle WebLogic Server 12c ( ...
- Linux I2C驱动程序设计
1. Linux I2C子系统架构 (1)I2C核心(I2C-Core):I2C 总线和I2C 设备驱动的中间枢纽,它提供了I2C 总线驱动和设备驱动的注册.注销方法等 (2)I2C控制器驱动(ada ...
- MonggoDB学习笔记
MongoDB MongoDB介绍:非关系型的文档数据库.MongoDB的数据模型是面向文档的,文档是一种类似于JSON的结构.简单理解MongoDB这个数据库中存的是各种各样的JSON.(BSON) ...
- 文献综述二十:基于UML技术的客户关系管理系统实现
一.基本信息 标题:基于UML技术的客户关系管理系统实现 时间:2015 出版源:电子设计工程 文件分类:uml技术的研究 二.研究背景 设计出可应用与银行和储户之间沟通的客户关系管理系统,从而实现对 ...
- selenium 之Ran 0 tests in 0.000s
from selenium import webdriverfrom time import ctime,sleepimport unittestclass TestLogin(unittest.Te ...
- 描边shader(法线外拓)
描边的思路是需要两个pass.第一个pass让顶点沿着法线方向延伸出去,使得模型变大一圈.第二个pass正常渲染,让正常渲染的模型挡在第一个pass之上,这样就会露出延伸出去的部分,延伸出去的就是我们 ...
- List与IList的区别
在我看一个源程序的时候看到这个例子使用了IList<T>返回类型,因为上午刚刚总结过List<T>的详细用法,突然出现了IList<T>,感觉很奇怪,于是上网搜集了 ...
- Kubernetes单机安装部署
系统环境: Ubuntu 16.04.2 LTS 软件环境: Docker 1.12.6 Go 1.8.3 Etcd 3.1.8 Flannel 0.7.1 Kubernetes master 1.7 ...