Improved paging tests

README.md

@@ -85,4 +85,7 @@ Find the complete documentation in the [WIKI](https://github.com/koalyptus/Table
 * GitHub for reporting bugs and feature requests.
 
 ## License
-MIT
+MIT
+
+
+

examples/dev.html

@@ -142,12 +142,14 @@
                     name: 'sort',
                     types: ['string', 'string', 'number', 'number', 'number']
                 },{
-                    name: 'advancedGrids',
+                    name: 'advancedGrid',
                     vendor_path: '../libs/ezEditTable/',
+                    // filename: 'ezEditTable_min.js',
+                    // vendor_path: 'http://edittable.free.fr/ezEditTable/',
                     selectable: true,
                     editable: true,
                     default_selection: 'both',
-                    // loadStylesheet: true,
+                    // load_stylesheet: true,
                     auto_save: false
                 },{
                     name: 'colOps',

src/extensions/advancedGrid/adapterEzEditTable.js

@@ -11,18 +11,18 @@ export default class AdapterEzEditTable {
      */
     constructor(tf, cfg){
         // ezEditTable config
-        this.cfg = cfg;
+        this.initialized = false;
-        this.name = 'ezEditTable.js';
+        this.desc = cfg.description || 'ezEditTable adapter';
-        this.vendorPath = this.cfg.vendor_path || tf.extensionsPath +
+        this.filename = cfg.filename || 'ezEditTable.js';
-            'ezEditTable/';
+        this.vendorPath = cfg.vendor_path;
-        this.loadStylesheet = Boolean(this.cfg.loadStylesheet);
+        this.loadStylesheet = Boolean(cfg.load_stylesheet);
-        this.stylesheet = this.cfg.stylesheet || this.vendorPath +
+        this.stylesheet = cfg.stylesheet || this.vendorPath + 'ezEditTable.css';
-            'ezEditTable.css';
+        this.stylesheetName = cfg.stylesheet_name || 'ezEditTableCss';
-        this.stylesheetName = this.cfg.stylesheetName || 'ezEditTableCss';
         this.err = 'Failed to instantiate EditTable object.\n"ezEditTable" ' +
             'dependency not found.';
 
         this._ezEditTable = null;
+        this.cfg = cfg;
         this.tf = tf;
     }
 
@@ -32,11 +32,11 @@ export default class AdapterEzEditTable {
      */
     init(){
         var tf = this.tf;
-        if(window.EditTable/*tf.isImported(this.path)*/){
+        if(window.EditTable){
             this._setAdvancedGrid();
         } else {
-            var path = this.vendorPath + this.name;
+            var path = this.vendorPath + this.filename;
-            tf.import(this.name, path, ()=> { this._setAdvancedGrid(); });
+            tf.import(this.filename, path, ()=> { this._setAdvancedGrid(); });
         }
         if(this.loadStylesheet && !tf.isImported(this.stylesheet, 'link')){
             tf.import(this.stylesheetName, this.stylesheet, null, 'link');
@@ -304,7 +304,7 @@ export default class AdapterEzEditTable {
                     tf.nbFilterableRows++;
                     tf.paging=false;
                     tf.feature('paging').destroy();
-                    tf.feature('paging').addPaging();
+                    tf.feature('paging').reset();
                 }
                 if(tf.alternateBgs){
                     tf.feature('alternateRows').init();
@@ -325,7 +325,7 @@ export default class AdapterEzEditTable {
                         tf.nbFilterableRows--;
                         tf.paging=false;
                         tf.feature('paging').destroy();
-                        tf.feature('paging').addPaging(false);
+                        tf.feature('paging').reset(false);
                     }
                     if(tf.alternateBgs){
                         tf.feature('alternateRows').init();
@@ -341,6 +341,8 @@ export default class AdapterEzEditTable {
             this._ezEditTable = new EditTable(tf.id, cfg, startRow);
             this._ezEditTable.Init();
         } catch(e) { throw new Error(this.err); }
+
+        this.initialized = true;
     }
 
     /**
@@ -372,5 +374,6 @@ export default class AdapterEzEditTable {
                 ezEditTable.Editable.Remove();
             }
         }
+        this.initialized = false;
     }
 }

src/extensions/colsVisibility/colsVisibility.js

@@ -53,8 +53,6 @@ export default class ColsVisibility{
         this.btnCloseHtml = f.btn_close_html || null;
         //defines css class for close button
         this.btnCloseCssClass = f.btn_close_css_class || this.btnCssClass;
-
-        // this.path = f.path || tf.extensionsPath + 'colsVisibility/';
         this.stylesheet = f.stylesheet || 'colsVisibility.css';
         //span containing show/hide cols button
         this.prfx = 'colVis_';

src/extensions/sort/adapterSortabletable.js

@@ -143,8 +143,8 @@ export default class AdapterSortableTable{
             //sort behaviour for paging
             if(adpt.isPaged){
                 let paginator = tf.feature('paging');
-                paginator.addPaging(false);
+                paginator.reset(false);
-                paginator.setPage(paginator.currentPageNb);
+                paginator.setPage(paginator.getPage());
                 adpt.isPaged = false;
             }
 

src/modules/paging.js

@@ -193,9 +193,6 @@ export class Paging{
             }
         }
 
-        /*====================================================
-            - onchange event for paging select
-        =====================================================*/
         evt.slcPagesChange = (event) => {
             this.changePage();
             event.target.blur();
@@ -338,10 +335,10 @@ export class Paging{
     }
 
     /**
-     * Add paging when filters are already instanciated
+     * Reset paging when filters are already instantiated
      * @param {Boolean} filterTable Execute filtering once paging instanciated
      */
-    addPaging(filterTable=false){
+    reset(filterTable=false){
         var tf = this.tf;
         if(!tf.hasGrid() || tf.paging){
             return;
@@ -360,18 +357,16 @@ export class Paging{
      * Refresh paging select according to number of pages
      * @param {Array} validRows Collection of valid rows
      */
-    setPagingInfo(validRows){
+    setPagingInfo(validRows=[]){
         var tf = this.tf;
         var rows = tf.tbl.rows;
         var mdiv = !this.pagingTgtId ? tf.mDiv : Dom.id(this.pagingTgtId);
         var pgspan = Dom.id(this.prfxPgSpan+tf.id);
-        //stores valid rows indexes
-        if(validRows && validRows.length>0){
-            tf.validRowsIndex = validRows;
-        } else {
-            //re-sets valid rows indexes array
-            tf.validRowsIndex = [];
 
+        //store valid rows indexes
+        tf.validRowsIndex = validRows;
+
+        if(validRows.length === 0){
             //counts rows to be grouped
             for(var j=tf.refRow; j<tf.nbRows; j++){
                 var row = rows[j];
@@ -460,6 +455,14 @@ export class Paging{
         tf.applyGridProps();
     }
 
+    /**
+     * Return the current page number
+     * @return {Number} Page number
+     */
+    getPage(){
+        return this.currentPageNb;
+    }
+
     /**
      * Show page based on passed param value (string or number):
      * @param {String} or {Number} cmd possible string values: 'next',
@@ -510,9 +513,6 @@ export class Paging{
             return;
         }
 
-        /*====================================================
-            - onchange event for results per page select
-        =====================================================*/
         evt.slcResultsChange = (ev) => {
             this.changeResultsPerPage();
             ev.target.blur();
@@ -648,7 +648,8 @@ export class Paging{
     }
 
     /**
-     * Change rows according to page results
+     * Change rows according to page results drop-down
+     * TODO: accept a parameter setting the results per page length
      */
     _changeResultsPerPage(){
         var tf = this.tf;
@@ -718,18 +719,16 @@ export class Paging{
             return;
         }
         // btns containers
-        var btnNextSpan, btnPrevSpan, btnLastSpan, btnFirstSpan;
+        var btnNextSpan = Dom.id(this.prfxBtnNextSpan+tf.id);
-        var pgBeforeSpan, pgAfterSpan, pgspan;
+        var btnPrevSpan = Dom.id(this.prfxBtnPrevSpan+tf.id);
-        btnNextSpan = Dom.id(this.prfxBtnNextSpan+tf.id);
+        var btnLastSpan = Dom.id(this.prfxBtnLastSpan+tf.id);
-        btnPrevSpan = Dom.id(this.prfxBtnPrevSpan+tf.id);
+        var btnFirstSpan = Dom.id(this.prfxBtnFirstSpan+tf.id);
-        btnLastSpan = Dom.id(this.prfxBtnLastSpan+tf.id);
-        btnFirstSpan = Dom.id(this.prfxBtnFirstSpan+tf.id);
         //span containing 'Page' text
-        pgBeforeSpan = Dom.id(this.prfxPgBeforeSpan+tf.id);
+        var pgBeforeSpan = Dom.id(this.prfxPgBeforeSpan+tf.id);
         //span containing 'of' text
-        pgAfterSpan = Dom.id(this.prfxPgAfterSpan+tf.id);
+        var pgAfterSpan = Dom.id(this.prfxPgAfterSpan+tf.id);
         //span containing nb of pages
-        pgspan = Dom.id(this.prfxPgSpan+tf.id);
+        var pgspan = Dom.id(this.prfxPgSpan+tf.id);
 
         var evt = this.evt;
 

src/tablefilter.js

@@ -901,9 +901,17 @@ export class TableFilter{
             Mod.statusBar = new StatusBar(this);
             Mod.statusBar.init();
         }
-        if(this.paging || (Mod.paging && Mod.paging.isPagingRemoved)){
+        if(this.paging || Mod.paging){
-            Mod.paging = new Paging(this);
+            if(!Mod.paging){
-            Mod.paging.init();
+                Mod.paging = new Paging(this);
+            }
+
+            // TODO: handle both cases in paging init
+            if(Mod.paging.isPagingRemoved){
+                Mod.paging.reset();
+            } else {
+                Mod.paging.init();
+            }
         }
         if(this.btnReset){
             Mod.clearButton = new ClearButton(this);

test/test-paging.js

@@ -5,7 +5,7 @@ var tf = new TableFilter('demo', {
     base_path: '../dist/tablefilter/',
     paging: true,
     paging_length: 2,
-    results_per_page: ['Results per page', [2,4,6]]
+    results_per_page: ['Results per page ', [2,4,6]]
 });
 tf.init();
 
@@ -20,20 +20,99 @@ test('Paging component', function() {
 module('UI elements');
 test('Paging UI elements', function() {
     notEqual(paging.pagingSlc, null, 'Paging drop-down element');
-    notEqual(paging.resultsPerPageSlc, null, 'Number of results per page drop-down element');
+    notEqual(paging.resultsPerPageSlc, null,
-    notEqual(id(paging.prfxBtnNextSpan+tf.id), null, 'Next button container element');
+        'Number of results per page drop-down element');
-    notEqual(id(paging.prfxBtnPrevSpan+tf.id), null, 'Previous button container element');
+    notEqual(id(paging.prfxBtnNextSpan+tf.id), null,
-    notEqual(id(paging.prfxBtnLastSpan+tf.id), null, 'Last button container element');
+        'Next button container element');
-    notEqual(id(paging.prfxBtnFirstSpan+tf.id), null, 'First button container element');
+    notEqual(id(paging.prfxBtnPrevSpan+tf.id), null,
+        'Previous button container element');
+    notEqual(id(paging.prfxBtnLastSpan+tf.id), null,
+        'Last button container element');
+    notEqual(id(paging.prfxBtnFirstSpan+tf.id), null,
+        'First button container element');
 });
 
 test('Destroy Paging component', function() {
     paging.destroy();
     deepEqual(paging.pagingSlc, null, 'Paging drop-down element');
     deepEqual(paging.resultsPerPageSlc, null, 'Paging drop-down element');
-    deepEqual(id(paging.prfxBtnNextSpan+tf.id), null, 'Next button container element');
+    deepEqual(id(paging.prfxBtnNextSpan+tf.id), null,
-    deepEqual(id(paging.prfxBtnPrevSpan+tf.id), null, 'Previous button container element');
+        'Next button container element');
-    deepEqual(id(paging.prfxBtnLastSpan+tf.id), null, 'Last button container element');
+    deepEqual(id(paging.prfxBtnPrevSpan+tf.id), null,
-    deepEqual(id(paging.prfxBtnFirstSpan+tf.id), null, 'First button container element');
+        'Previous button container element');
+    deepEqual(id(paging.prfxBtnLastSpan+tf.id), null,
+        'Last button container element');
+    deepEqual(id(paging.prfxBtnFirstSpan+tf.id), null,
+        'First button container element');
     deepEqual(paging.nbPages, 0, 'Number of pages');
 });
+
+test('Reset Paging component', function() {
+    paging.reset();
+    paging.setPage(2);
+    notEqual(paging.pagingSlc, null, 'Paging drop-down element');
+});
+
+module('Behaviour');
+test('Set page', function() {
+    paging.setPage(3);
+    deepEqual(paging.getPage(), 3, 'Expected page number');
+    paging.setPage(1);
+    deepEqual(paging.getPage(), 1, 'Expected page number');
+});
+test('Set results per page', function() {
+    paging.resultsPerPageSlc.options[1].selected = true;
+    paging.changeResultsPerPage();
+    deepEqual(paging.pagingLength, 4, 'Expected page length');
+    deepEqual(paging.nbPages, 2, 'Expected number of pages');
+    paging.resultsPerPageSlc.options[2].selected = true;
+    paging.changeResultsPerPage();
+    deepEqual(paging.pagingLength, 6, 'Expected page length');
+    deepEqual(paging.nbPages, 2, 'Expected number of pages');
+});
+
+module('Grid layout');
+test('Grid layout with paging', function() {
+    tf.destroy();
+    tf = null;
+    tf = new TableFilter('demo', {
+        base_path: '../dist/tablefilter/',
+        grid_layout: true,
+        paging: true,
+        paging_length: 2,
+        results_per_page: ['Results per page ', [2,4,6]]
+    });
+    tf.init();
+
+    paging = tf.feature('paging');
+
+    notEqual(paging.pagingSlc, null, 'Paging drop-down element');
+    notEqual(paging.resultsPerPageSlc, null,
+        'Number of results per page drop-down element');
+    notEqual(id(paging.prfxBtnNextSpan+tf.id), null,
+        'Next button container element');
+    notEqual(id(paging.prfxBtnPrevSpan+tf.id), null,
+        'Previous button container element');
+    notEqual(id(paging.prfxBtnLastSpan+tf.id), null,
+        'Last button container element');
+    notEqual(id(paging.prfxBtnFirstSpan+tf.id), null,
+        'First button container element');
+});
+
+module('Behaviour');
+test('Set page', function() {
+    paging.setPage(3);
+    deepEqual(paging.getPage(), 3, 'Expected page number');
+    paging.setPage(1);
+    deepEqual(paging.getPage(), 1, 'Expected page number');
+});
+test('Set results per page', function() {
+    paging.resultsPerPageSlc.options[1].selected = true;
+    paging.changeResultsPerPage();
+    deepEqual(paging.pagingLength, 4, 'Expected page length');
+    deepEqual(paging.nbPages, 2, 'Expected number of pages');
+    paging.resultsPerPageSlc.options[2].selected = true;
+    paging.changeResultsPerPage();
+    deepEqual(paging.pagingLength, 6, 'Expected page length');
+    deepEqual(paging.nbPages, 2, 'Expected number of pages');
+});

test/test-rows-counter.js

@@ -13,12 +13,14 @@ test('RowsCounter component', function() {
 test('RowsCounter component with paging', function() {
     tf.Mod.paging = new TableFilter.Paging(tf);
     var paging = tf.Mod.paging;
-    paging.addPaging();
+    paging.reset();
-    equal(tf.feature('rowsCounter').rowsCounterSpan.innerHTML, '1-7 / 7', 'Counter value with paging');
+    equal(tf.feature('rowsCounter').rowsCounterSpan.innerHTML,
+        '1-7 / 7', 'Counter value with paging');
     paging.destroy();
 });
 
 test('RowsCounter component without paging', function() {
     tf.feature('rowsCounter').refresh();
-    equal(tf.feature('rowsCounter').rowsCounterSpan.innerHTML, 7, 'Counter value');
+    equal(tf.feature('rowsCounter').rowsCounterSpan.innerHTML,
+        7, 'Counter value');
 });