公用分页模块之knockout

最新推荐文章于 2021-08-06 15:42:02 发布

程序员会武功

最新推荐文章于 2021-08-06 15:42:02 发布

阅读量1.8k

点赞数

分类专栏： knockout require jquery html-css javascript 文章标签：前端分页 java java web springmvc

本文链接：https://blog.csdn.net/qq_27099139/article/details/50895884

版权

本文介绍如何在时间紧迫的情况下，利用Require和Knockout快速构建一个前端分页组件。虽然分页底部栏是从网上借鉴而来，但整体思路和实现方式展示了自定义公用分页模块的思想。

摘要由CSDN通过智能技术生成

因为工程中使用了require,knockout,所以就自己琢磨着写一个公用的分页模块来用,格式上可能不太正规,我传递个思想

1.分页底部栏没有自己去写,毕竟赶时间,就借鉴了一个网上的（对于作者表示很抱歉,找不到你了）

在require的path里我配置为 paging

/*
 * Contact: 55342775@qq.com
 */
(function(root, factory) {
	// amd
	if (typeof define === 'function' && define.amd) {
		define([ 'query' ], factory);
	} else if (typeof exports === 'object') { // umd
		module.exports = factory();
	} else {
		root.Paging = factory(window.Zepto || window.jQuery || Query);
	}
})
		(
				this,
				function(Query) {
					$.fn.Paging = function(settings) {
						var arr = [];
						$(this).each(function() {
							var options = $.extend({
								target : $(this)
							}, settings);
							var lz = new Paging();
							lz.init(options);
							arr.push(lz);
						});
						return arr;
					};

					function Paging() {
						var rnd = Math.random().toString().replace('.', '');
						this.id = 'Paging_' + rnd;
					}
					Paging.prototype = {
						init : function(settings) {
							this.settings = $.extend({
								callback : null,
								pagesize : 10,
								current : 1,
								prevTpl : "上一页",
								nextTpl : "下一页",
								firstTpl : "首页",
								lastTpl : "末页",
								ellipseTpl : "...",
								toolbar : false,
								hash : true,
								pageSizeList : [ 5, 10, 15, 20 ]
							}, settings);
							this.target = $(this.settings.target);
							this.container = $('<div id="' + this.id
									+ '" class="ui-paging-container"/>');
							this.target.append(this.container);
							this.render(this.settings);
							this.format();
							this.bindEvent();
						},
						render : function(ops) {
							this.count = ops.count || this.settings.count;
							this.pagesize = ops.pagesize
									|| this.settings.pagesize;
							this.current = ops.current || this.settings.current;
							this.pagecount = Math.ceil(this.count
									/ this.pagesize);
							this.format();
						},
						bindEvent : function() {
							var _this = this;
							this.container
									.on(
											'click',
											'li.js-page-action,li.ui-pager',
											function(e) {
												if ($(this).hasClass(
														'ui-pager-disabled')
														|| $(th