git.roojs.org Git - roojs1/blob - Roo/bootstrap/Pagination.js

   1 /*
   2  * - LGPL
   3  *
   4  * pagination
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.Pagination
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap Pagination class
  12  * @cfg {String} size xs | sm | md | lg
  13  * @cfg {Boolean} inverse false | true
  14  * @cfg {Number} from pagination starting number
  15  * @cfg {Number} to pagination ending number
  16  * @cfg {String} align empty or left | right
  17  * @cfg {Number} active active page number
  18  * @cfg {Boolean} preventDefault (true | false) default false
  19  *
  20  * @constructor
  21  * Create a new Pagination
  22  * @param {Object} config The config object
  23  */
  24
  25 Roo.bootstrap.Pagination = function(config){
  26     Roo.bootstrap.Pagination.superclass.constructor.call(this, config);
  27
  28     this.addEvents({
  29         // raw events
  30         /**
  31          * @event click
  32          * The raw click event for the entire grid.
  33          * @param {Roo.EventObject} e
  34          */
  35         "click" : true
  36     });
  37 };
  38
  39 Roo.extend(Roo.bootstrap.Pagination, Roo.bootstrap.Component,  {
  40
  41     cls: false,
  42     size: false,
  43     inverse: false,
  44     from: 1,
  45     to: 4,
  46     align: false,
  47     active: 1,
  48     preventDefault : false,
  49
  50     getAutoCreate : function(){
  51         var cfg = {
  52             tag: 'ul',
  53                 cls: 'pagination',
  54                 cn: []
  55         };
  56         if (this.inverse) {
  57             cfg.cls += ' inverse';
  58         }
  59         if (this.html) {
  60             cfg.html=this.html;
  61         }
  62         if (this.cls) {
  63             cfg.cls += " " + this.cls;
  64         }
  65         cfg.cn[0]={
  66             tag: 'li',
  67             cn: [
  68                 {
  69                     tag: 'a',
  70                     cls: 'previous',
  71                     href:'#',
  72                     html: '&laquo;'
  73                 }
  74             ]
  75         };
  76         var from=this.from>0?this.from:1;
  77         var to=this.to-from<=10?this.to:from+10;
  78         var active=this.active>=from&&this.active<=to?this.active:null;
  79         for (var i=from;i<=to;i++) {
  80             cfg.cn.push(
  81                 {
  82                     tag: 'li',
  83                     cls: active===i?'active':'',
  84                     cn: [
  85                         {
  86                             tag: 'a',
  87                             href: '#',
  88                             html: i
  89                         }
  90                     ]
  91                 }
  92             );
  93         }
  94
  95         cfg.cn.push(
  96             {
  97                 tag: 'li',
  98                 cn: [
  99                     {
 100                        tag: 'a',
 101                        cls: 'next',
 102                        href: '#',
 103                        html: '&raquo;'
 104                     }
 105                 ]
 106             }
 107         );
 108
 109         return cfg;
 110     },
 111
 112     initEvents: function() {
 113         this.el.on('click', this.onClick, this);
 114     },
 115
 116     onClick : function(e)
 117     {
 118         Roo.log('pagination click');
 119
 120         if(this.preventDefault){
 121             e.preventDefault();
 122         }
 123
 124         this.fireEvent('click', this, e);
 125     }
 126
 127 });
 128
 129
 130
 131