发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
今天推荐一个分页工具条插件:Smart Paginator,这个插件用途还是很广的,而且可定制性相当不错,目前内置三种颜色,有需要的话,可以自己改css定制颜色
<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" />
<div id="smart-paginator" > </div>
$(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,需要配置不少参数,接下来来看下这些主要参数的含义。
参数
默认值
类型
描述
totalrecords
0
Number
总的分页数
recordsperpage
单页数据量
length
10
这个参数很特殊,上一页、下一页、第一页、最后一页的显示控制依赖于这个参数,当length的值大于totalrecords/recordsperpage时,是不显示上一页、下一页、第一页、最后一页的
first
First
String
第一页文本
last
Last
最后一页文本
go
Go
跳转文本
theme
green
Stirng
模板
display
double
initval
1
默认显示第几页
datacontainer
”
数据容器id,请看demo3
dataelement
数据元素,指的是容器下的对应的子元素的选择器,请看demo2
onchange
null
Function
分页改变后触发的函数
.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; }
来自: 昵称10504424 > 《Jquery》
0条评论
发表
请遵守用户 评论公约
jQuery实现一个学生成绩单录入系统
jQuery带分页搜索跳转功能代码
jQuery带分页搜索跳转功能代码。.pageListTab.pageRt input{border:1px solid #ddd;.pageListTab.pageLt .active{background:#44B549;<divclass="pageLt" id="pageLt">$(&qu...
jquery+json实现数据列表分页示例代码
padding: 12px 20px 2px 20px;style="color: #FFF; margin: 5px; text-decoration: none; cursor: pointer;" href="index.jsp">返回首页</a> </div> </div>...
千眼玉米雕刻教程
\u52a0\u6cb9\u5427\u9a9a\u5e74","post_no":16,"type":"0","comment_num":0,"prop...
【自制绘本】《山兽来啦》——南山经之首鹊山山系
","post_no":6,"type":"0","comment_num":0,"props":null,"post_index&q...
【根本团】根本的价格表(纯露)
","post_no":3,"type":"0","comment_num":0,"props":null,"post_index&q...
ASP.NET 数据列表控件的分页总结(三):Asp.Net 可定制分页用户控件
ASP.NET 数据列表控件的分页总结(三):Asp.Net 可定制分页用户控件。AspNetPager除提供默认的类似于DataGrid和GridView的PostBack分页方式外,还支持通过Url进行分页,象大多数asp程序中分页一样, U...
thinkphp 分页
.pagination ul li a, .pagination ul li span { float: left;padding: 4px 12px;.pagination ul li.first-child a, .pagination ul li.first-child span { border-left-width: 1px;.pagination ...
一篇文章带你了解CSS 分页实例
微信扫码,在手机上查看选中内容