重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jquery中分页插件smartpaginator怎么用

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

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

一个分页工具条插件:Smart Paginator,这个插件用途还是很广的,而且可定制性相当不错,目前内置三种颜色,有需要的话,可以自己改css定制颜色

jquery中分页插件smartpaginator怎么用

1.如何使用Smart Paginator?
1.1引入以下几个文件
          
1.2添加一个分页容器层
 
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怎么用
网站路径:http://cqcxhl.cn/article/gppcie.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP