Bootstrap分页插件--Bootstrap Paginator
开源中国有一篇介绍的很详细,链接:https://my.oschina.net/shunshun/blog/204587
使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件:
<link href="css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.8.1.js"></script> <script type="text/javascript" src="js/bootstrap-paginator.js"></script>
使用实例:
jsp代码
<div class="padlr" align="right">
<ul id="data-pagination" class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
js代码
var pageNumber = 1;
var pageSiza = 10;
function getData() {
$.post("url", {
dataId : dataId,
currentPage: pageNumber,
pageSize : pageSize
}, function(data) {
if (data.totalRow > 0) {
var options = {
currentPage : data.pageNumber, //变量名必须为currentPage
totalPages : data.totalPage, //变量名必须为totalPages
ajaxOption: {
url: 'url',
pageSize: pageSize,
dataId : dataId,
appendElement: 'data-list',
templateId: 'tpl-data-list',
otherParams:{ }
},
}
$('#data-pagination').bootstrapPaginator(options);
var html = template("tpl-data-list", data);
$('#data-list').html(html);
} else {
$('#data-list').html("");
}
});
}
$('#data-pagination').bootstrapPaginator(options)就是将id为'data-pagination'的dom元素设置为分页组件,同时传入一些定制参数,currentPage设置当前页码,totalPages设置总页数。
Bootstrap分页插件--Bootstrap Paginator的更多相关文章
- bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)
html部分: <ul class="pagination"></ul> <!--bootstrap3版本用ul包裹--> <div cl ...
- Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...
- bootstrap分页插件的使用
项目中需要实现文章列表的分页显示,由于使用了bootstrap框架,所以我们选择bootstrap的分页实现方法.网上有一些这方面的介绍文章,并且也有相关的示例程序.这里结合我们的项目,介绍一下使用b ...
- Bootstrap分页插件ajax返回数据,工具类的编写
使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...
- 分页插件 Bootstrap Paginator
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
- Bootstrap分页插件:bootstrap-paginator
今天和大家分享一个Bootstrap的分页插件:bootstrap-paginator. 插件地址: https://github.com/lyonlai/bootstrap-paginator 先看 ...
- JSP分页之结合Bootstrap分页插件进行简单分页
结合Bootstrap的分页插件实现分页,其中策略是每次显示5个按钮,然后根据当前页的不同来进行不同的显示: 1. 当前页<3,如果当前页大于5页就显示前五页,不然就显示1~totalPage. ...
- 用bootstrap 分页插件问题
如果页面加载js 一定要记得引入分页的东西 ,不然不会有数据, <script src="${path}/js/bootstrap-paginator.min.js"> ...
- bootstrap评分插件 Bootstrap Star Rating Examples
http://www.jq22.com/demo/bootstrap-star-rating-master201708041812/
随机推荐
- 30天C#基础巩固------集合,File(文件操作 ),Encoding处理字符集
一:泛型 关于泛型我自己也不是很好的理解,但是具体的运用还是可以的,可以这样的理解,我们定义一个数组,但是不知道将来它是保存什么类型的值,很是矛盾,这个时候泛型就出现了,它可以解决这个场景,li ...
- Ubuntu Server 16.04下ASP.NET Core Web Api + MySql + Dapper在 Jexus、nginx 下的简单测试
一.环境及工具 1.服务器 VirtualBox5.1.4 安装 Ubuntu Server 16.04 amd64 MySql Ver 14.14 Distrib 5.6.21 Jexus 5.8. ...
- 新学C#的List<T>总结
所属命名空间:using System.Collections.Generic; List<T>类是 ArrayList 类的泛型等效类. 该类使用大小可按需动态增加的数组实现 IList ...
- Calling startActivity() from outside of an Activity
在Activity中使用startActivity()方法不会有任何限制,因为Activity重载了Context的startActivity()方法.但是如果是在其他地方(如Widget或Servi ...
- mysql存储过程中的异常处理
http://www.cnblogs.com/cookiehu/p/4994278.html 定义异常捕获类型及处理方法: DECLARE handler_action HANDLER FOR con ...
- GUID全局唯一标识符
全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中. ...
- Java集合源码分析(七)HashMap<K, V>
一.HashMap概述 HashMap基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了不同步和允许使用 null 之外,HashMap ...
- 使用Spring的@Scheduled实现定时任务
Spring配置文件xmlns加入xmlns:task="http://www.springframework.org/schema/task"xsi:schemaLocation ...
- GJM : Unity3D 常用网络框架与实战解析 【笔记】
Unity常用网络框架与实战解析 1.Http协议 Http协议 存在TCP 之上 有时候 TLS\SSL 之上 默认端口80 https 默认端口 ...
- 代理模式的java实现
1. 简介 代理模式(Proxy Pattern)是常用设计模式之一.代理模式的定义:Provide a surrogate or placeholder for another object to ...