bootstrap-paginator分页插件的两种使用方式
分页有两种方式:
1. 前台分页:ajax一次请求获取全部数据,适合少量数据(万条数据以下);
$.ajax({
type: "GET",
url: "",//后台接口地址
dataType: "json",
success: function (msg) {
var pages = Math.ceil(msg.data / 5);//data是数据总量
var element = $('#id');//对应ul的id
element.bootstrapPaginator({
bootstrapMajorVersion: 3,//bootstrap版本
currentPage: page,//当前页面
numberOfPages: 5,//一页显示几个按钮(在ul里面生成5个li)
totalPages: pages //总页数
});
}
});
注意:1. bootstrap3中分页的HTML部分要求使用ul标签;2. 前台写分页算法。
2. 后台分页:发送多次ajax,每次获取指定页数的数据(万条数据以上)。
$('#id').bootstrapPaginator({
bootstrapMajorVersion: 3,//bootstrap版本
currentPage: 1,//当前页码
totalPages: data.cn,//总页数(后台传过来的数据)
numberOfPages: 5,//一页显示几个按钮
itemTexts: function (type, page, current) {
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
},//改写分页按钮字样
onPageClicked: function (event, originalEvent, type, page) {
$.ajax({
url: '../../interface/xw_zxdt_list.php',
type: 'post',
data: {page: page},
dataType: 'json',
success: function (data) {
tplData(data);//处理成功返回的数据
}
});
}
});
注意:1. bootstrap3中分页的HTML部分要求使用ul标签;2. 后台写分页算法。
bootstrap-paginator分页插件的两种使用方式的更多相关文章
- Bootstrap Paginator分页插件
Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- Bootstrap Paginator分页插件(mark)
Bootstrap Paginator分页插件
- 基于layPage分页插件浅析两种分页方式
最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验 在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示 ...
- Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
- Bootstrap Paginator分页插件使用示例
最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体 ...
- Bootstrap Paginator分页插件的使用
今天,我为大家带来的一款做得非常优秀的分页插件BootStrap Paginator,他是一款js插件,由于本人也是才刚刚搞出来的,所以暂时对它也不是特别了解,只能大楖告诉大家怎么使用.我这里使用的是 ...
- jquery插件的两种形式
这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...
随机推荐
- 【java】内存流:java.io.ByteArrayInputStream、java.io.ByteArrayOutputStream、java.io.CharArrayReader、java.io.CharArrayWriter
package 内存流; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java. ...
- GitLab配置ssh key
一.背景 当前很多公司都选择git作为代码版本控制工具,然后自己公司搭建私有的gitlab来管理代码,我们在clone代码的时候可以选择http协议,当然我们亦可以选择ssh协议来拉取代码.但是网上很 ...
- vs code调试console程序报错--preLaunchTask“build”
网上有其他大神给出的建议是注释掉launch.json中的 "preLaunchTask": "build", 但是这种方式也会造成一个问题,就是再使用F5调试 ...
- 使用requests爬取猫眼电影TOP100榜单
Requests是一个很方便的python网络编程库,用官方的话是"非转基因,可以安全食用".里面封装了很多的方法,避免了urllib/urllib2的繁琐. 这一节使用reque ...
- bzoj 3143: [Hnoi2013]游走
Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点, ...
- Java Error : type parameters of <T>T cannot be determined during Maven Install
遇到了一个问题如下: Caused by the combination of generics and autoboxing. 这是由于泛型和自动装箱联合使用引起的. 可以查看以下两个回答: 1 ...
- Qt数据库集成应用封装
平时的大大小小的项目中,基本上都需要与数据库打交道,会遇到各种各样的应用场景,本人主要遇到四种场景1:数据库自动重连,例如mysql数据库中经常遇到服务器挂掉的情况,需要自动检测并重新连接数据库.2: ...
- Oracle学习笔记_07_模糊查询
附录:参考资料 1.Oracle sql语言模糊查询--like后面的通配符 2.oracle sql语言模糊查询--通配符like的使用教程
- jQuery 文档操作方法
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
- Webpack 2 视频教程 009 - 配置 ESLint 实现代码规范自动测试 (上)
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...