为了实现内容丰富的分页页面，这里采用了jqpaginator和artTemplate结合的方式实现了自定义分页。

前期准备

jqpaginator简介

基本使用

• 定义存放分页内容的标签

<div id="paginator" ></div>

• 初始化分页配置

$('#paginator').jqPaginator({
    totalPages: 100,
    visiblePages: 10,
    currentPage: 1,
    onPageChange: function (num, type) {
        //执行具体的分页逻辑
        $('#text').html('当前第' + num + '页');
    }
});

paginator与页面上对应的存放分页内容的标签的id相一致

扩展方法

jqPaginator提供了两个扩展方法，方便初始化后对组件进行操作。

• 初始化后，动态修改配置

$('#id').jqPaginator('option', {
    currentPage: 1
});

销毁jqPaginator

$('#id').jqPaginator('destroy');

artTemplate简介

这里为了使页面内容更加灵活，实现方式更加简单，采用了artTemplate。下面简单介绍一下artTemplate的用法。详情可参见artTemplate官网

编写模板

使用一个type=”text/html”的script标签存放模板：

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

渲染模板

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

具体示例

引入相关文件

• 首先下载对应的jqpaginator.js 以及artTemplate.js。
• 然后再对应的页面中引入：

<%--分页插件--%>
<script type='text/javascript'
	src="${appPath}/plugins/jqPaginator/dist/jqpaginator.min.js">
</script>
<%--模板页面--%>
<script type='text/javascript'
	src="${appPath}/common/olt/js/template.js">
</script>

编写页面

• 首页需要编写页面的内容，这里需要进行分页显示的内容采用artTemplate的方式实现。

<!-- 课程中心的显示内容 -->
<div id="fpap0010_wrapper" class="tz-gallery" >
     <div class="row">
     	 <div id="courseListHtml"></div>
     </div>
</div>
<!-- 分页 -->
<footer>
	<div class="dataTables_paginate paging_simple_numbers" id="fcoz0060pages" style="display: ">
		<ul class="pagination" id="pagination1"></ul>
	</div>
</footer>

• 课程的模板页面：

<script id="coursesTemaple" type="text/html">
    {{if courseList}}
	    {{each courseList as value }}
			<div class="col-xs-3 col-md-3" >
               <div class="thumbnail">
				    {{if  value.photoPath}}			  
						<div class="lightbox">
							<img alt="文件"
								src="${appPath}/files/olt/{{value.photoPath}}"
								 onclick="findTask1('{{value.courseId}}');"
								style="width: 100%; height: 140px; cursor: pointer;" />
						</div>
					{{else if (!value.photoPath)}}
						<div class="lightbox">
							<img alt="文件" src="${appPath}/common/olt/images/default.jpg"
								 onclick="findTask1('{{value.courseId}}');"
								style="width: 100%; height: 140px; cursor: pointer;" />
						</div>
					{{/if}}
					<div class="caption">
						{{if (!value.countPeople)}}
							<p>{{value.courseName}}&nbsp;(0人在学)<p>
						{{else if (value.countPeople)}}
							<p>{{value.courseName}}&nbsp;({{value.countPeople}}人在学)<p>
						{{/if}}
						{{if (!value.courseNum)}}
							<div class="progress progress-striped active tz-progress-bar">
								<div class="progress-bar progress-bar-success" role="progressbar"
									aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
									style="width: 0%;">
								</div>
							</div>
						{{else if (value.courseNum)}}
							<div class="progress progress-striped active tz-progress-bar" >
								<div class="progress-bar progress-bar-success" role="progressbar"
									aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
									style="width: {{value.courseNum}}%;">
									<span class="tz-progress-span"> {{value.courseNum}}%  </span>
								</div>
							</div>
						{{/if}}
					</div>
					
                </div>
			</div>
        {{/each}}
    {{else if !courseList}}
                    没有数据
    {{/if}}
</script>

编写对应JS

分页初始化

var total; //表示总页数
$.jqPaginator(
	'#pagination1',
	{
		totalPages : 1,
		visiblePages : 10,
		currentPage : 1,
		prev : '<li class="prev"><a href="javascript:;">上页</a></li>',
		next : '<li class="next"><a href="javascript:;">下页</a></li>',
		page : '<li class="page"><a href="javascript:;">{{page}}</a></li>',
		onPageChange : function(num, type) {
		    //请求课程数据
			getCouserListData(num);
		}
	});

请求课程数据

function getCouserListData(page) {
	$.ajax( {
		data : {page:page},
		url : '${appPath}/olt/coz/fcoz0060_query.st?wtpage='+wtpage,
		type : 'POST',
		success : function(data) {
			data = JSON.parse(data.resultStr);
			total = Math.ceil(data.recordCount / data.pageSize);
			$('#pagination1').jqPaginator('option', {
			    totalPages:total
			});
			courseList = data.list;
			showCourseListData(courseList);
		}
	});
}

选模板

/**
 * 展示课程数据
 * @param {Object} courseList
 */
function showCourseListData(courseList) {
     var courseListData = {
		 courseList: courseList
	 }
		var html = template('coursesTemaple', courseListData);
		document.getElementById('courseListHtml').innerHTML = html;
}

结果展示