今天推荐一个分页工具条插件:Smart Paginator,这个插件用途还是很广的,而且可定制性相当不错,目前内置三种颜色,有需要的话,可以自己改css定制颜色
1.如何使用Smart Paginator?
1.1引入以下几个文件
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="smartpaginator.js" type="text/javascript"></script>
<link href="smartpaginator.css" rel="stylesheet" type="text/css" />
1.2添加一个分页容器层
<div id="smart-paginator" > </div>
1.3初始化插件
$(document).ready(function() {
$('#smart-paginator').smartpaginator({
totalrecords: total,
recordsperpage: items_per_page,
next: '下一页',
prev: '上一页',
first: '首页',
last: '末页',
go: '前往',
theme: 'docloud-pagi',
initval: current_page,
onchange: onPageChange
});
});
function onPageChange(newPageValue) {
current_page = newPageValue;
//根据新的页码做一些改变,比如说页面更新操作
getImageList(newPageValue);
}
可以看到想要初始化Smart Paginator,需要配置不少参数,接下来来看下这些主要参数的含义。
2.参数说明
参数
|
默认值
|
类型
|
描述
|
totalrecords
|
0
|
Number
|
总的分页数
|
recordsperpage
|
0
|
Number
|
单页数据量
|
length
|
10
|
Number
|
这个参数很特殊,上一页、下一页、第一页、最后一页的显示控制依赖于这个参数,当length的值大于totalrecords/recordsperpage时,是不显示上一页、下一页、第一页、最后一页的
|
next
|
Next
|
String
|
下一页文本
|
prev
|
Prev
|
String
|
上一页文本
|
first
|
First
|
String
|
第一页文本
|
last
|
Last
|
String
|
最后一页文本
|
go
|
Go
|
String
|
跳转文本
|
theme
|
green
|
Stirng
|
模板
|
display
|
double
|
String
|
|
initval
|
1
|
Number
|
默认显示第几页
|
datacontainer
|
”
|
String
|
数据容器id,请看demo3
|
dataelement
|
”
|
String
|
数据元素,指的是容器下的对应的子元素的选择器,请看demo2
|
onchange
|
null
|
Function
|
分页改变后触发的函数
|
3.自定义颜色模板
.docloud-pagi
{
background-color: #F0F5FF;
}
.docloud-pagi.normal
{
background-color: #588500;
color: White;
border: solid 1px #5f9000;
}
.docloud-pagi.active
{
background-color: #344C00;
color: #F8EB00;
border: solid 1px #5f9000;
}
.docloud-pagi .btn
{
background-color: #588500;
color: White;
border: solid 1px #5f9000;
}
分享到:
相关推荐
jquery ajax分页插件 jquery ajax分页插件 jquery ajax分页插件
jQuery的分页插件Page代码,有html页面示例提示如何使用这个插件
jQuery分页插件,代码少兼容性好,好用简单,快速集成。
jQuery SimplePagination分页插件,可自定义基本的参数,有4套分页样式可选择!
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
Paginathing.js是一款简单的jquery前台分页插件。该jquery分页插件可以对页面中的列表和表格数据进行分页。它使用简单,兼容ie8,兼容Bootstrap框架。
jquery分页插件结合jsp实例 有什么不晓得的加Q 359709421
jQuery Pagination,分页插件
此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改...
代码简介:一款基于jQuery实现的强大的静态分页插件。 适用浏览器:IE8 、FireFox、Chrome、Safari、Opera。
jQuery分页插件设置分页内容显示数量的分页代码 jQuery分页插件设置分页内容显示数量的分页代码
jquery分页插件带总数分页代码 jquery分页插件带总数分页代码
JQuery做静态分页
jquery mobile分页显示插件
插件描述:基于jQuery的分页插件,配置比较详细。 参考实例:http://www.jq22.com/jquery-info5697
jquery pagination 分页组件 jquery pagination 分页组件 jquery pagination 分页组件 官网 https://pagination.js.org/index.html 文档 https://pagination.js.org/docs/index.html
简单实用的jquery分页插件,不会分页的人入门教程!
jQuery基于Bootstrap分页插件是一款分页插件设置固定列表分页显示,支持动态分页数据代码。
小巧的jquery文章分页插件,用得到就拿去吧!