一个简单的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 ...
随机推荐
- python 入门级教你如何拿到小姐姐微信
第一题: 首先错误的思路,首先找出 707829217/2+1 里面的所有奇数,然后再利用两个for,来判断 import math def func_get_prime(n): return ...
- 使用Pytesseract+Tesseract-OCR识别图片的简单步骤
1.首先安装Pytesseract,这个很简单,直接输入命令 pip install pytesseract即可 2.Tesseract-OCR https://pan.baidu.com/s/1sV ...
- 你不可不知的数据库northwind
说起northwind,40左右的大年一定不会陌生,它是著名的northwind示例库,在SQL Server 是标配. 它有8张表,涉及客户.商品.订单. 如果你是有志从事企业级应用开发,或有志从事 ...
- git克隆和上传项目
软件环境: 1. VS2017 2. Git ver 2.17.0.1 3. gitee.com 目的: 已有的本地项目(新建)上传到码云,使本地可以和码云同步 尝试: 先在码云上建立项目,项目名称和 ...
- POJ_3368 Frequent values 【线段树+区间查询】
一.题面 POJ3368 二.分析 仍然是一道只需要区间查询不需要区间修改的线段树题. 这题的题面比较特别,它是一组非减的数组.当需要去找一段区间内出现次数最多的数字时,这些数字必然是连续的,那么就可 ...
- POJ_3468 A Simple Problem with Integers 【线段树区间查询+修改】
一.题目 POJ3468 二.分析 裸的线段树区间查询+修改. 三.AC代码 #include <cstdio> #include <iostream> #include &l ...
- CentOS7 firewalld打开关闭防火墙 开放端口
firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status fir ...
- zero-copy总结
基本概念 零拷贝,通常在java NIO编程中会使用,比如netty网络工具包. 其真实意思是: 网卡或者其他外设进行io操作时不经过CPU, 而是直接和主memory交互,不经过CPU寄存器,这样可 ...
- TR-069_Amendment-4:附录G.穿越NAT网关的连接请求方式
注意:这种机制只适用于RFC 3489[21]中定义的经典STUN,RFC 5389引入后,这个机制已经过时.这个机制不是设计用于RFC 5389中定义的STUN.IPv6部署要么不使用NAT,要么以 ...
- goledengate重新投递和目标端跳过过事务
日常在goledengate的维护中,最大的问题莫过于进程ABENDING.在我的维护生涯中,主要的有两个原因,第一个是网络中断造成的造成的文件损坏,一个是大事务(相关操作人员在进行操作的时候事务过大 ...