/*------------------------------------------------------------------------ - HTML Table Filter Generator - Paging feature v1.3 - By Max Guglielmi (tablefilter.free.fr) - Licensed under the MIT License -------------------------------------------------------------------------*/ TF.prototype.SetPaging = function() /*==================================================== - Generates paging elements: - pages drop-down list - previous, next, first, last buttons =====================================================*/ { if(!this.hasGrid && !this.isFirstLoad) return; if(!this.paging || (!this.isPagingRemoved && !this.isFirstLoad)) return; var f = this.fObj; this.pagingTgtId = f.paging_target_id!=undefined //id of container element ? f.paging_target_id : null; this.pagingLength = f.paging_length!=undefined ? f.paging_length : 10; //defines table paging length this.resultsPerPageTgtId = f.results_per_page_target_id!=undefined //id of container element ? f.results_per_page_target_id : null; this.pgSlcCssClass = f.paging_slc_css_class!=undefined ? f.paging_slc_css_class :'pgSlc'; //css class for paging select element this.pgInpCssClass = f.paging_inp_css_class!=undefined ? f.paging_inp_css_class :'pgNbInp'; //css class for paging input element this.resultsSlcCssClass = f.results_slc_css_class!=undefined ? f.results_slc_css_class :'rspg'; //defines css class for results per page select this.resultsSpanCssClass = f.results_span_css_class!=undefined ? f.results_span_css_class :'rspgSpan'; //css class for label preceding results per page select this.btnNextPageText = f.btn_next_page_text!=undefined ? f.btn_next_page_text : '>'; //defines next page button text this.btnPrevPageText = f.btn_prev_page_text!=undefined ? f.btn_prev_page_text : '<'; //defines previous page button text this.btnLastPageText = f.btn_last_page_text!=undefined ? f.btn_last_page_text : '>|'; //defines last page button text this.btnFirstPageText = f.btn_first_page_text!=undefined ? f.btn_first_page_text : '|<' ; //defines first page button text this.btnNextPageHtml = f.btn_next_page_html!=undefined //defines next page button html ? f.btn_next_page_html : (!this.enableIcons ? null : ''); this.btnPrevPageHtml = f.btn_prev_page_html!=undefined //defines previous page button html ? f.btn_prev_page_html : (!this.enableIcons ? null : ''); this.btnFirstPageHtml = f.btn_first_page_html!=undefined //defines last page button html ? f.btn_first_page_html : (!this.enableIcons ? null : ''); this.btnLastPageHtml = f.btn_last_page_html!=undefined //defines previous page button html ? f.btn_last_page_html : (!this.enableIcons ? null : ''); this.pageText = f.page_text!=undefined ? f.page_text : ' Page '; //defines text preceeding page selector drop-down this.ofText = f.of_text!=undefined ? f.of_text : ' of '; //defines text after page selector drop-down this.nbPgSpanCssClass = f.nb_pages_css_class!=undefined ? f.nb_pages_css_class :'nbpg'; //css class for span containing tot nb of pages this.hasPagingBtns = f.paging_btns==false ? false : true; //enables/disables paging buttons this.pagingBtnEvents = null; //stores paging buttons events this.pageSelectorType = f.page_selector_type!=undefined ? f.page_selector_type : this.fltTypeSlc; //defines previous page button html this.onBeforeChangePage = tf_IsFn(f.on_before_change_page) ? f.on_before_change_page : null; //calls function before page is changed this.onAfterChangePage = tf_IsFn(f.on_after_change_page) ? f.on_after_change_page : null; //calls function before page is changed var start_row = this.refRow; var nrows = this.nbRows; this.nbPages = Math.ceil( (nrows-start_row)/this.pagingLength );//calculates page nb //Paging elements events if(!this.Evt._Paging.next) { var o = this; this.Evt._Paging = {// paging buttons events slcIndex: function(){ return (o.pageSelectorType==o.fltTypeSlc) ? o.pagingSlc.options.selectedIndex : parseInt(o.pagingSlc.value)-1; }, nbOpts: function(){ return (o.pageSelectorType==o.fltTypeSlc) ? parseInt(o.pagingSlc.options.length)-1 : (o.nbPages-1); }, next: function(){ if(o.Evt._Paging.nextEvt) o.Evt._Paging.nextEvt(); var nextIndex = (o.Evt._Paging.slcIndex()0 ? o.Evt._Paging.slcIndex()-1 : o.Evt._Paging.nbOpts(); o.ChangePage(prevIndex); }, last: function(){ if(o.Evt._Paging.lastEvt) o.Evt._Paging.lastEvt(); o.ChangePage(o.Evt._Paging.nbOpts()); }, first: function(){ if(o.Evt._Paging.firstEvt) o.Evt._Paging.firstEvt(); o.ChangePage(0); }, _detectKey: function(e) { var evt=(e)?e:(window.event)?window.event:null; if(evt) { var key=(evt.charCode)?evt.charCode: ((evt.keyCode)?evt.keyCode:((evt.which)?evt.which:0)); if(key=='13'){ if(o.sorted){ o.Filter(); o.ChangePage(o.Evt._Paging.slcIndex()); } else o.ChangePage(); this.blur(); } }//if evt }, nextEvt: null, prevEvt: null, lastEvt: null, firstEvt: null } } if(!this.Evt._OnSlcPagesChange) { this.Evt._OnSlcPagesChange = function() /*==================================================== - onchange event for paging select =====================================================*/ { if(o.Evt._Paging._OnSlcPagesChangeEvt) o.Evt._Paging._OnSlcPagesChangeEvt(); o.ChangePage(); this.blur(); //ie only: blur is not enough... if(this.parentNode && tf_isIE) this.parentNode.focus(); } } // Paging drop-down list selector if(this.pageSelectorType == this.fltTypeSlc) { var slcPages = tf_CreateElm( this.fltTypeSlc, ['id',this.prfxSlcPages+this.id] ); slcPages.className = this.pgSlcCssClass; slcPages.onchange = this.Evt._OnSlcPagesChange; } // Paging input selector if(this.pageSelectorType == this.fltTypeInp) { var slcPages = tf_CreateElm( this.fltTypeInp, ['id',this.prfxSlcPages+this.id], ['value',this.currentPageNb] ); slcPages.className = this.pgInpCssClass; slcPages.onkeypress = this.Evt._Paging._detectKey; } var btnNextSpan, btnPrevSpan, btnLastSpan, btnFirstSpan;// btns containers btnNextSpan = tf_CreateElm('span',['id',this.prfxBtnNextSpan+this.id]); btnPrevSpan = tf_CreateElm('span',['id',this.prfxBtnPrevSpan+this.id]); btnLastSpan = tf_CreateElm('span',['id',this.prfxBtnLastSpan+this.id]); btnFirstSpan = tf_CreateElm('span',['id',this.prfxBtnFirstSpan+this.id]); if(this.hasPagingBtns) { if(this.btnNextPageHtml==null) {// Next button var btn_next = tf_CreateElm( this.fltTypeInp,['id',this.prfxBtnNext+this.id], ['type','button'],['value',this.btnNextPageText],['title','Next'] ); btn_next.className = this.btnPageCssClass; btn_next.onclick = this.Evt._Paging.next; btnNextSpan.appendChild(btn_next); } else { btnNextSpan.innerHTML = this.btnNextPageHtml; btnNextSpan.onclick = this.Evt._Paging.next; } if(this.btnPrevPageHtml==null) {// Previous button var btn_prev = tf_CreateElm( this.fltTypeInp,['id',this.prfxBtnPrev+this.id], ['type','button'],['value',this.btnPrevPageText],['title','Previous'] ); btn_prev.className = this.btnPageCssClass; btn_prev.onclick = this.Evt._Paging.prev; btnPrevSpan.appendChild(btn_prev); } else { btnPrevSpan.innerHTML = this.btnPrevPageHtml; btnPrevSpan.onclick = this.Evt._Paging.prev; } if(this.btnLastPageHtml==null) {// Last button var btn_last = tf_CreateElm( this.fltTypeInp,['id',this.prfxBtnLast+this.id], ['type','button'],['value',this.btnLastPageText],['title','Last'] ); btn_last.className = this.btnPageCssClass; btn_last.onclick = this.Evt._Paging.last; btnLastSpan.appendChild(btn_last); } else { btnLastSpan.innerHTML = this.btnLastPageHtml; btnLastSpan.onclick = this.Evt._Paging.last; } if(this.btnFirstPageHtml==null) {// First button var btn_first = tf_CreateElm( this.fltTypeInp,['id',this.prfxBtnFirst+this.id], ['type','button'],['value',this.btnFirstPageText],['title','First'] ); btn_first.className = this.btnPageCssClass; btn_first.onclick = this.Evt._Paging.first; btnFirstSpan.appendChild(btn_first); } else { btnFirstSpan.innerHTML = this.btnFirstPageHtml; btnFirstSpan.onclick = this.Evt._Paging.first; } }//if this.hasPagingBtns // paging elements (buttons+drop-down list) are added to defined element if(this.pagingTgtId==null) this.SetTopDiv(); var targetEl = ( this.pagingTgtId==null ) ? this.mDiv : tf_Id( this.pagingTgtId ); /*** if paging previously removed this prevents IE memory leak with removeChild used in RemovePaging method. For more info refer to http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=2840253&SiteID=1 ***/ if ( targetEl.innerHTML!='' ) targetEl.innerHTML = ''; /*** ***/ targetEl.appendChild(btnFirstSpan); targetEl.appendChild(btnPrevSpan); var pgBeforeSpan = tf_CreateElm( 'span',['id',this.prfxPgBeforeSpan+this.id] ); pgBeforeSpan.appendChild( tf_CreateText(this.pageText) ); pgBeforeSpan.className = this.nbPgSpanCssClass; targetEl.appendChild(pgBeforeSpan); targetEl.appendChild(slcPages); var pgAfterSpan = tf_CreateElm( 'span',['id',this.prfxPgAfterSpan+this.id] ); pgAfterSpan.appendChild( tf_CreateText(this.ofText) ); pgAfterSpan.className = this.nbPgSpanCssClass; targetEl.appendChild(pgAfterSpan) var pgspan = tf_CreateElm( 'span',['id',this.prfxPgSpan+this.id] ); pgspan.className = this.nbPgSpanCssClass; pgspan.appendChild( tf_CreateText(' '+this.nbPages+' ') ); targetEl.appendChild(pgspan); targetEl.appendChild(btnNextSpan); targetEl.appendChild(btnLastSpan); this.pagingSlc = tf_Id(this.prfxSlcPages+this.id); //to be easily re-used // if this.rememberGridValues==true this.SetPagingInfo() is called // in ResetGridValues() method if( !this.rememberGridValues || this.isPagingRemoved ) this.SetPagingInfo(); if( !this.fltGrid ) { this.ValidateAllRows(); this.SetPagingInfo(this.validRowsIndex); } this.pagingBtnEvents = this.Evt._Paging; this.isPagingRemoved = false; } TF.prototype.RemovePaging = function() /*==================================================== - Removes paging elements =====================================================*/ { if(!this.hasGrid) return; if( this.pagingSlc==null ) return; var btnNextSpan, btnPrevSpan, btnLastSpan, btnFirstSpan;// btns containers var pgBeforeSpan, pgAfterSpan, pgspan; btnNextSpan = tf_Id(this.prfxBtnNextSpan+this.id); btnPrevSpan = tf_Id(this.prfxBtnPrevSpan+this.id); btnLastSpan = tf_Id(this.prfxBtnLastSpan+this.id); btnFirstSpan = tf_Id(this.prfxBtnFirstSpan+this.id); pgBeforeSpan = tf_Id(this.prfxPgBeforeSpan+this.id);//span containing 'Page' text pgAfterSpan = tf_Id(this.prfxPgAfterSpan+this.id);//span containing 'of' text pgspan = tf_Id(this.prfxPgSpan+this.id);//span containing nb of pages this.pagingSlc.parentNode.removeChild(this.pagingSlc); if( btnNextSpan!=null ) btnNextSpan.parentNode.removeChild( btnNextSpan ); if( btnPrevSpan!=null ) btnPrevSpan.parentNode.removeChild( btnPrevSpan ); if( btnLastSpan!=null ) btnLastSpan.parentNode.removeChild( btnLastSpan ); if( btnFirstSpan!=null ) btnFirstSpan.parentNode.removeChild( btnFirstSpan ); if( pgBeforeSpan!=null ) pgBeforeSpan.parentNode.removeChild( pgBeforeSpan ); if( pgAfterSpan!=null ) pgAfterSpan.parentNode.removeChild( pgAfterSpan ); if( pgspan!=null ) pgspan.parentNode.removeChild( pgspan ); this.pagingBtnEvents = null; this.pagingSlc = null; this.isPagingRemoved = true; } TF.prototype.SetPagingInfo = function( validRows ) /*==================================================== - calculates page # according to valid rows - refreshes paging select according to page # - Calls GroupByPage method =====================================================*/ { var row = this.tbl.rows; var mdiv = ( this.pagingTgtId==null ) ? this.mDiv : tf_Id( this.pagingTgtId ); var pgspan = tf_Id(this.prfxPgSpan+this.id); if( validRows!=undefined ) this.validRowsIndex = validRows;//stores valid rows index else { this.validRowsIndex = [];//re-sets valid rows index for(var j=this.refRow; j0 ) { mdiv.style.visibility = 'visible'; if(this.pageSelectorType==this.fltTypeSlc) for(var z=0; z