jquery-pagination分页插件使用记录

分页是做javaweb项目时，不可或缺的功能，一款好的分页插件能够节省程序员开发实践，下面就是本人使用此插件的一次实践

jquery-pagination分页插件，默认是不具备首页，尾页的展示，如果需要首页和尾页的功能，需要手动扩展插件，扩展方式如下

首先用编辑工具打开jquery.pagination.js文件，找到getLinks:function(current_page, eventHandler)函数，在里面添加首页尾页的配置如下：

getLinks:function(current_page, eventHandler) {
	var begin, end,
		interval = this.pc.getInterval(current_page),
		np = this.pc.numPages(),
		fragment = $("<div class='pagination'></div>");

	//首页配置开始
    if (this.opts.first_text && (current_page > 0 || this.opts.prev_show_always)) {
        fragment.append(this.createLink(0, 1,{text: this.opts.first_text,classes: "first",rel:"first"}));
            }
            //首页配置结束

    // Generate "Previous"-Link
	if(this.opts.prev_text && (current_page > 0 || this.opts.prev_show_always)){
		fragment.append(this.createLink(current_page-1, current_page, {text:this.opts.prev_text, classes:"prev",rel:"prev"}));
			}
	// Generate starting points
	if (interval.start > 0 && this.opts.num_edge_entries > 0)
		{
			end = Math.min(this.opts.num_edge_entries, interval.start);
			this.appendRange(fragment, current_page, 0, end, {classes:'sp'});
			if(this.opts.num_edge_entries < interval.start && this.opts.ellipse_text)
			{
				$("<span>"+this.opts.ellipse_text+"</span>").appendTo(fragment);
			}
		}
		// Generate interval links
		this.appendRange(fragment, current_page, interval.start, interval.end);
		// Generate ending points
		if (interval.end < np && this.opts.num_edge_entries > 0)
		{
			if(np-this.opts.num_edge_entries > interval.end && this.opts.ellipse_text)
			{
				$("<span>"+this.opts.ellipse_text+"</span>").appendTo(fragment);
			}
			begin = Math.max(np-this.opts.num_edge_entries, interval.end);
			this.appendRange(fragment, current_page, begin, np, {classes:'ep'});
				
			}
		// Generate "Next"-Link
		if(this.opts.next_text && (current_page < np-1 || this.opts.next_show_always)){
			fragment.append(this.createLink(current_page+1, current_page, {text:this.opts.next_text, classes:"next",rel:"next"}));
			}
        //尾页配置开始
        if(this.opts.last_text && (current_page < np-1 ||
this.opts.next_show_always)){
                fragment.append(this.createLink(np-1, np, { text: this.opts.last_text, classes: "last",rel:"last" }));
            }
        //尾页配置结束
		$('a', fragment).click(eventHandler);

		return fragment;
	}

实现的样式如下：

下面就是如何使用这款jquery分页插件：

第一步：首先引入js，以及分页插件js，以及样式

第二步：添加分页占位容器，直接写在要分页的表格之后就可以了

<!-- 分页插件 -->
<div class="col-md-12">
  <div id="Pagination-Base"></div>
</div>

第三步：使用js初始化分页插件

<script type="text/javascript">
    $(function(){
    //初始化分页插件（60为后台传过来的总页数）
	$("#Pagination-Base").pagination(60, {
		items_per_page:5,  //每页显示的条数 result.pageSize
		current_page:0,     //当前页 result.currentPage-1
		first_text:'首页',  //首页
		prev_text:'<<上一页', //上一页
		next_text:'下一页>>', //下一页
		last_text:'尾页',    //尾页
		next_show_always:true, //最后页时显示分页按钮：true
		num_display_entries:5,//主体显示的页数
		//link_to:"#",
		load_first_page:false,   //初始化时执行回调函数，默认是true
		callback:handlePaginationClick
	});
    })
//分页回调函数
function handlePaginationClick(new_page_index,pagination_container){
	$("#submitForm").attr("action","#?pageNum="+(new_page_index+1));
	$("#submitForm").submit();
	return false;
 }
</script>

因为此插件当前页索引是从0开始的，所以从后台传过来的当前页要减去1，添加好上述这么多配置一个分页插件的功能就能够基本实现，添加上访问链接就能够实现动态数据分页。

jquery-pagination分页插件使用记录

猜你喜欢