封装了bootstrap的分页组件-白红宇

封装了bootstrap的分页组件

阅读量：7200 次

发布时间：2019-06-29

本文共 2785 字，大约阅读时间需要 9 分钟。

模块代码

pagebar.js/** * 分页组件 */define(function(require, exports, module) {	var pageBarTpl = require("tpl/pagebar.html"), pageBarTplCom = juicer(pageBarTpl);	var defaultOpts = {};	var PageBar = function(options) {		if (!options.totalCount) {			return;		}		this.container = $(options.container);		this.options = $.extend({}, defaultOpts, options);		this.init();	};	PageBar.prototype = {		constructor : PageBar,		init : function() {			this.initUI();			this.initEvents();		},		initUI : function() {			var opts = this.options;			this.pageCount = parseInt((opts.totalCount + opts.pageSize - 1) / opts.pageSize);			this.container.html(pageBarTplCom.render({				pagecount : this.pageCount			}));			this.pageCount == 1 ? this.container.hide() : this.container.show();			this.currPage = 1;			this.pages = this.container.find(".page-nav");		},		initEvents : function() {			var that = this;			var opts = that.options;			that.container.on("click", "li a", function() {				var index = $(this).data("index"), page;				if (index == "previous") {					index = that.currPage - 1;				} else if (index == "next") {					index = that.currPage + 1;				}				if (index < 1 || index > that.pageCount) {					return;				}				if (index === that.currPage) {					return;				}				for (var i = 0; i < that.pages.length; i++) {					page = $(that.pages[i]);					page.removeClass("active");					if (page.find("a:first-child").data("index") === index) {						page.addClass("active");					}				}				that.currPage = index;				opts.onCallback && opts.onCallback(index);			});		},		destroy : function() {			this.container.off("click", "li a");		}	};	module.exports = PageBar;});

模板代码

/** * 分页组件 */define(function(require, exports, module){	return '
    
     '+	'
     
      '+	'	
      '+	'		«'+	'	
'+	'	{@each i in range(1, pagecount+1)}'+	'	
      !{i}
'+	'	{@/each}'+	'	
      '+	'		»'+	'	
'+	'
     
'+	'
    
';});

调用代码

initPageBar : function(imgcount) {			var that = this;			var imgdg = $(that.dialog.node);			var opts = that.options;			that.pagebar && that.pagebar.destroy();			if (opts.pageSize >= imgcount) {				$("#img-pagebar").empty();				$("#img-pagebar").hide();			} else {				that.pagebar = new PageBar({					container : "#img-pagebar",					totalCount : imgcount,					pageSize : opts.pageSize,					onCallback : function(index) {						imgdg.find("#img-pagebar").hide();						imgdg.find(".js_loading").show();						that.getImageList({							begin : (index - 1) * opts.pageSize,							count : opts.pageSize						}, function(data) {							var images = data.images;							that.renderImageList(images, that.imgArr);							imgdg.find("#img-pagebar").show();							imgdg.find(".js_loading").hide();						});						imgdg.find(".imgdg-main").scrollTop(0);					}				});			}		},