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.參數說明

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怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！