公用分页模块之knockout

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

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

   在require的path里我配置为 paging

/* * Contact: [e-mail] */(function(root, factory) {// amdif (typeof define === 'function' && define.amd) {define([ 'query' ], factory);} else if (typeof exports === 'object') { // umdmodule.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')|| $(this).hasClass('focus')) {return false;}if ($(this).hasClass('js-page-action')) {if ($(this).hasClass('js-page-first')) {_this.current = 1;}if ($(this).hasClass('js-page-prev')) {_this.current = Math.max(1,_this.current - 1);}if ($(this).hasClass('js-page-next')) {_this.current = Math.min(_this.pagecount,_this.current + 1);}if ($(this).hasClass('js-page-last')) {_this.current = _this.pagecount;}} else if ($(this).data('page')) {_this.current = parseInt($(this).data('page'));}_this.go();});/* * $(window).on('hashchange',function(){ var page= * parseInt(Query.getHash('page')); if(_this.current * !=page){ _this.go(page||1); } }) */},go : function(p) {var _this = this;this.current = p || this.current;this.current = Math.max(1, _this.current);this.current = Math.min(this.current,_this.pagecount);this.format();if (this.settings.hash) {Query.setHash({page : this.current});}this.settings.callback&& this.settings.callback(this.current,this.pagesize, this.pagecount);},changePagesize : function(ps) {this.render({pagesize : ps});},format : function() {var html = '<ul>'html += '<li class="js-page-first js-page-action ui-pager" >'+ this.settings.firstTpl + '</li>';html += '<li class="js-page-prev js-page-action ui-pager">'+ this.settings.prevTpl + '</li>';if (this.pagecount > 6) {html += '<li data-page="1" class="ui-pager">1</li>';if (this.current <= 2) {html += '<li data-page="2" class="ui-pager">2</li>';html += '<li data-page="3" class="ui-pager">3</li>';html += '<li class="ui-paging-ellipse">'+ this.settings.ellipseTpl+ '</li>';} else if (this.current > 2&& this.current <= this.pagecount - 2) {html += '<li>' + this.settings.ellipseTpl+ '</li>';html += '<li data-page="'+ (this.current - 1)+ '" class="ui-pager">'+ (this.current - 1) + '</li>';html += '<li data-page="' + this.current+ '" class="ui-pager">'+ this.current + '</li>';html += '<li data-page="'+ (this.current + 1)+ '" class="ui-pager">'+ (this.current + 1) + '</li>';html += '<li class="ui-paging-ellipse" class="ui-pager">'+ this.settings.ellipseTpl+ '</li>';} else {html += '<li class="ui-paging-ellipse" >'+ this.settings.ellipseTpl+ '</li>';for (var i = this.pagecount - 2; i < this.pagecount; i++) {html += '<li data-page="' + i+ '" class="ui-pager">' + i+ '</li>'}}html += '<li data-page="' + this.pagecount+ '" class="ui-pager">'+ this.pagecount + '</li>';} else {for (var i = 1; i <= this.pagecount; i++) {html += '<li data-page="' + i+ '" class="ui-pager">' + i+ '</li>'}}html += '<li class="js-page-next js-page-action ui-pager">'+ this.settings.nextTpl + '</li>';html += '<li class="js-page-last js-page-action ui-pager">'+ this.settings.lastTpl + '</li>';html += '</ul>';this.container.html(html);if (this.current == 1) {$('.js-page-prev', this.container).addClass('ui-pager-disabled');$('.js-page-first', this.container).addClass('ui-pager-disabled');}if (this.current == this.pagecount) {$('.js-page-next', this.container).addClass('ui-pager-disabled');$('.js-page-last', this.container).addClass('ui-pager-disabled');}this.container.find('li[data-page="' + this.current + '"]').addClass('focus').siblings().removeClass('focus');if (this.settings.toolbar) {this.bindToolbar();}},bindToolbar : function() {var _this = this;var html = $('<li class="ui-paging-toolbar"><select class="ui-select-pagesize"></select><input type="text" class="ui-paging-count"/><a href="javascript:void(0)">跳转</a></li>');var sel = $('.ui-select-pagesize', html);var str = '';for (var i = 0, l = this.settings.pageSizeList.length; i < l; i++) {str += '<option value="'+ this.settings.pageSizeList[i] + '">'+ this.settings.pageSizeList[i]+ '条/页</option>';}sel.html(str);sel.val(this.pagesize);$('input', html).val(this.current);$('input', html).click(function() {$(this).select();}).keydown(function(e) {if (e.keyCode == 13) {var current = parseInt($(this).val()) || 1;_this.go(current);}});$('a', html).click(function() {var current = parseInt($(this).prev().val()) || 1;_this.go(current);});sel.change(function() {_this.changePagesize($(this).val());});this.container.children('ul').append(html);}}return Paging;});

2.现在来看我自定义的分页模块

define([ 'paging', 'jquery.tmpl' ], function(Paging) {function Pagination(param) {var config = {pageSize : 8,//每页条数pageNo : 1, //当前页码totalRows : 1,//总条数totalPage : 0,//总页数pageURL : '',//分页请求路径pageTool : '#pageTool', //放置底部分页栏元素的iddata : {},//默认请求的参数viewModel : {} //包装分页结果数据}, that = this;that.opts = $.extend(true, config, param);// 初次加载后带有条件的查询that.query = function(params) {for ( var key in params) {that.opts.data[key] = params[key];}that.opts.data.pageNo = 1;that._IO(that.opts.pageURL, 1, that.opts.data, that._dataTable);};that._init = function() {that._initTable();};that._initTable = function() {var opts = that.opts;opts.data["pageSize"] = opts.pageSize;opts.data["pageNo"] = opts.pageNo;if (that._IO(opts.pageURL, 0, opts.data, that._dataTable)) {opts.paging = new Paging();opts.paging.init({target : opts.pageTool,pagesize : opts.pageSize,count : opts.totalRows,callback : function(pageNo, pageSize, totalPage) {opts.data["pageNo"] = pageNo;that._IO(opts.pageURL, 0, opts.data, that._dataTable);}});}};that._dataTable = function(data, type) {if (data.responseCode)return false;that.opts.totalRows = data.dataCount;// dataInist是数据未放入ko对象前的操作，比如该变某个属性为ko类型的if (typeof that.opts.dataInist != 'undefined')that.opts.dataInist(data.dataCount > 0 ? data.dataList : null);that.opts.viewModel(data.dataCount > 0 ? data.dataList : null);if (type == 1) {that.opts.paging.render({pagesize : that.opts.pageSize,count : that.opts.totalRows > 0 ? that.opts.totalRows : 1});}// 数据装配到ko对象后的回调函数if (typeof that.opts.callback != 'undefined')that.opts.callback();return true;};that._IO = function(url, type, datas, callback) {var isCheck = false;$.ajax({type : "post",url : url,data : datas,async : false,success : function(data) {if (data != undefined)isCheck = callback(data, type);}});return isCheck;};that._init();};return Pagination;});

3.接下来看下使用例子

function _viewModel() {var self = this;self.collectionList = ko.observableArray();};// 初始化that._init = function() {that.opts.viewModel = new _viewModel();that.opts.pagina = new Pagination({pageSize : that.opts.pageSize,pageURL : that.opts.getCollectionListURL,pageTool : that.opts.pageToll,viewModel : that.opts.viewModel.collectionList,dataInist : function(datas) {if (datas == null)return false;$.each(datas, function(i, e) {e.checked = ko.observable(false);e.isCollection = ko.observable(e.isCollection);});}});ko.applyBindings(that.opts.viewModel);};

上面这种就是在数据放入collectionList之前把数据中的指定属性变为ko对象