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 true
  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     this.addEvents({
  28         // raw events
  29         /**
  30          * @event click
  31          * The raw click event for the entire grid.
  32          * @param {Roo.EventObject} e
  33          */
  34         "click" : true
  35     });
  36 };
  37
  38 Roo.extend(Roo.bootstrap.Pagination, Roo.bootstrap.Component,  {
  39
  40     cls: false,
  41     size: false,
  42     inverse: false,
  43     from: 1,
  44     to: 4,
  45     align: false,
  46     active: 1,
  47     preventDefault: true,
  48
  49     getAutoCreate : function(){
  50         var cfg = {
  51             tag: 'ul',
  52                 cls: 'pagination',
  53                 cn: []
  54         };
  55         if (this.inverse) {
  56             cfg.cls += ' inverse';
  57         }
  58         if (this.html) {
  59             cfg.html=this.html;
  60         }
  61         if (this.cls) {
  62             cfg.cls=this.cls;
  63         }
  64         cfg.cn[0]={
  65             tag: 'li',
  66             cn: [
  67                 {
  68                     tag: 'a',
  69                     cls: 'previous',
  70                     href:'#',
  71                     html: '&laquo;'
  72                 }
  73             ]
  74         };
  75         var from=this.from>0?this.from:1;
  76         var to=this.to-from<=10?this.to:from+10;
  77         var active=this.active>=from&&this.active<=to?this.active:null;
  78         for (var i=from;i<=to;i++) {
  79             cfg.cn.push(
  80                 {
  81                     tag: 'li',
  82                     cls: active===i?'active':'',
  83                     cn: [
  84                         {
  85                             tag: 'a',
  86                             href: '#',
  87                             html: i
  88                         }
  89                     ]
  90                 }
  91             );
  92         }
  93
  94         cfg.cn.push(
  95             {
  96                 tag: 'li',
  97                 cn: [
  98                     {
  99                        tag: 'a',
 100                        cls: 'next',
 101                        href: '#',
 102                        html: '&raquo;'
 103                     }
 104                 ]
 105             }
 106         );
 107
 108         return cfg;
 109     },
 110
 111     initEvents: function() {
 112
 113         Roo.each(this.el.select('li > a',true).elements, function(v){
 114            v..on('click', this.onClick, this);
 115         });
 116     },
 117
 118     onClick : function(e)
 119     {
 120         Roo.log('pagination on click ');
 121         if(this.preventDefault){
 122             e.preventDefault();
 123         }
 124
 125         this.fireEvent('click', this, e);
 126     }
 127
 128 });
 129
 130
 131
 132