#mricode.pagination jQuery 分页插件
##Get Started 引入文件:
<link href="mricode.pagination.css" rel="stylesheet" />
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="mricode.pagination.js"></script>创建分页显示标签
<div id="page" class="m-pagination"></div>初始化插件
$("#page").pagination({
pageSize: 10,
total: 1000
});##Ajax分页
初始化
$("#page").pagination({
pageSize: 10,
remote: {
url: 'data.json',
success: function (data) {
// data为ajax返回数据
},
totalName:'total'
}
});remote默认配置
注：pageIndexName和pageSizeName，将在之后版本中移除，请使用pageParams修改请求参数名称
remote: {
url: null, //[String]:ajax请求地址
params: null, //[Object]:参数
pageParams: null, //[Function]:自定义请求参数
success: null, //[Function]:请求成功回调函数
beforeSend: null, //[Function]:请求之前回调函数（同jQuery）
complete: null, //[Function]:请求完成回调函数（同jQuery）
pageIndexName: 'pageIndex', //(已过时）[String]:自定义请求参数的当前页名称
pageSizeName: 'pageSize', //(已过时）[String]:自定义请求参数的每页数量名称
totalName: 'total', //[String]:自定义返回的总页数名称，对象属性可写成'data.total'
traditional: false //[Boolean]:参数序列化方式（同jQuery）
}自定义page请求参数（默认为pageIndex, pageSize） 请求地址：www.google.com/search?index=0&size=10
remote: {
url: 'www.google.com/search'
pageParams: function(data){
return {
index:data.pageIndex,
size:data.pageSize
};
}
}##Options
####pageIndex
- Type:
Number - Default:
0
指定当前页数，索引从0开始，默认第1页
####pageSize
- Type:
Number - Default:
10
每页显示数据数
####total
- Type:
Number - Default:
0
总数据数，生成分页则必须配置该属性以生成分页。Ajax分页无需配置该属性。
####pageBtnCount
- Type:
Number - Default:
11
显示分页按钮数，包括首页页和上一页下一个按钮，推荐设置为基数
####showFirstLastBtn
- Type:
Boolean - Default:
true
是否显示首尾页
####firstBtnText
- Type:
String - Default:
null
首页按钮显示文字，不填则显示数字。该属性需设置showFirstLastBtn为true
####lastBtnText
- Type:
String - Default:
null
未页按钮显示文字，不填则显示数字。该属性需设置showFirstLastBtn为true
####prevBtnText
- Type:
String - Default:
«
上一页按钮显示文字，默认为«
####nextBtnText
- Type:
String - Default:
»
下一页按钮显示文字，默认为»
####loadFirstPage
- Type:
Boolean - Default:
true
是否加载第一页，页面第一次打开可设置不加载首页数据，首页数据是页面直接返回，之后点击分页按钮自动加载数据
####pageElementSort
- Type:
Array - Default:
['$page', '$size', '$jump', '$info']
page元素排序
'$page':分页按钮
'$size':分页大小
'$jump':跳转按钮
'info':分页信息（1到20条, 共216条数据 ）
####showInfo
- Type:
Boolean - Default:
false
是否显示分页信息
####infoFormat
- Type:
String - Default:
{start} ~ {end} of {total} entires
显示分页信息 {start}：每页显示的第一条数据，{end}:每页显示的最后一条数据，{total}：总数据数
####noInfoText
- Type:
String - Default:
0 entires
没有数据时显示信息
####showJump
- Type:
Boolean - Default:
false
是否显示跳转页
####jumpBtnText
- Type:
String - Default:
Go
跳转按钮显示文字
####showPageSizes
- Type:
Boolean - Default:
false
是否显示选择每页数量
####pageSizeItems
- Type:
Array - Default:
[5, 10, 15, 20]
配置可选每页数量
##Methods
####setPageIndex
$("#page").pagination('setPageIndex', pageIndex);- pageIndex:
Number
####setPageSize
$("#page").pagination('setPageSize', pageSize);- pageSize:
Number
####setRemoteUrl
$("#page").pagination('setRemoteUrl', url);- url:
String
####setParams
$("#page").pagination('setParams', params);- params:
Object
####destroy
$("#page").pagination('destroy');####重新生成分页
$("#page").pagination('render', [total]);- total:
Number
####重新发起Ajax请求
$("#page").pagination('remote');####判断是否初始化
$("#page").pagination();return:Boolean
####获取当前pageIndex
$("#page").pagination('getPageIndex');return:Number
##Events
####pageClicked
$("#page").on("pageClicked", function (event, data) {
//分页按钮点击事件
}####jumpClicked
$("#page").on("jumpClicked", function (event, data) {
//跳转按钮点击事件
}####pageSizeChanged
$("#page").on("pageSizeChanged", function (event, data) {
//页面大小切换事件
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent