jquery中分页插件smartpaginator怎么用

这篇文章主要为大家展示了“jquery中分页插件smartpaginator怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jquery中分页插件smartpaginator怎么用”这篇文章吧。

创新互联公司专注于长安企业网站建设,响应式网站,购物商城网站建设。长安网站建设公司,为长安等地区提供建站服务。全流程按需求定制制作，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务

一个分页工具条插件：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中分页插件smartpaginator怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

新闻名称：jquery中分页插件smartpaginator怎么用
链接地址：https://www.cdcxhl.com/article4/gppcie.html

成都网站建设公司_创新互联，为您提供网站维护、域名注册、外贸网站建设、响应式网站、移动网站建设、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联