一个简单的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 ...
随机推荐
- Ionic2实战——按模块划分app 创建多module
http://www.jianshu.com/p/d94324b722af 背景 用ionic2开发过一两个小功能的朋友都会发现,每新建一个页面都需要在\src\app\app.module.ts中添 ...
- js中的valueOf与toString
所有对象继承了两个转换方法: 第一个是toString(),它的作用是返回一个反映这个对象的字符串 第二个是valueOf(),它的作用是返回它相应的原始值 一般来说,对象到字符串的转换经过了如下步骤 ...
- django 后台格式化数据库查询出的日期
在项目中,我遇到这样的情况,使用ajax获取查询出来的数据,而这些数据中某个字段是日期datetime格式,在模板中显示的样式很怪异.由于前端使用了js控件,也不能使用django的模板过滤器. 所以 ...
- Codeforces - 规律题 [占坑]
发现自己容易被卡水题,需要强行苟一下规律题 CF上并没有对应的tag,所以本题集大部分对应百毒搜索按顺序刷 本题集侧重于找规律的过程(不然做这些垃圾题有什么用) Codeforces - 1008C ...
- js高级程序设计 笔记 --- 面向对象的程序设计
1,理解对象 通过对象字面量的方式,创建一个对象,为它添加属性和方法: var obj = { a: 1, b:2, sayA(){ console.log(this.a)}} 1,属性类型: 数据属 ...
- Linux串口驱动程序设计
1. 在Linux系统中,终端是一类字符型设备,它包括多种类型,通常使用tty来简称各种类型的终端设备. (1)串口终端(/dev/ttyS*):串口终端是使用计算机串口连接的终端设备.Linux把每 ...
- python函数参数类型及其顺序
根据inspect模块官文文档中关于函数参数类型的相关说明,python函数参数共有五种类型,按顺序分别为:POSITIONAL_ONLY.POSITIONAL_OR_KEYWORD.VAR_POSI ...
- 转 $.ajax()方法详解
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- 用vue建新项目的过程---在工作中
1.git clone 项目地址 2.如果没装vue-cli,就先装下vue-cli (如果报错可能是没按管理员身份安装) 3.vue init webpack 项目名 4.安装项目依赖 npm i ...
- (转)bash条件判断之if语句
http://blog.51cto.com/64314491/1629175---------bash条件判断之if语句(一) http://blog.51cto.com/64314491/16292 ...