1.1引入以下几个文件
1.2添加一个分页容器层<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.3初始化插件<div id="smart-paginator" > </div>
$(document).ready(function() { $('#smart-paginator').smartpaginator({ totalrecords: 100, recordsperpage: 10, initval:0 , next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green', onchange: onChange }); function onChange(newPageValue) { alert(newPageValue); }
可以看到想要初始化Smart Paginator,需要配置不少参数,接下来来看下这些主要参数的含义。
2.参数说明
3.自定义颜色模板
.green { background-color: #4f7305; } .green.normal { background-color: #588500; color: White; border: solid 1px #5f9000; } .green.active { background-color: #344C00; color: #F8EB00; border: solid 1px #5f9000; } .green .btn { background-color: #588500; color: White; border: solid 1px #5f9000; }