deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-03 07:03:33 +02:00
Code Issues Releases Wiki Activity
Page: 1.04 Paging
Pages
1.0 Configuration 1.01 Appearance 1.02 Main features 1.03 Grid layout 1.04 Paging 1.05 Drop down filter 1.06 Checklist filter 1.07 Rows counter 1.08 Loading indicator 1.09 Submit and reset button 1.10 Status bar 1.11 Data types 1.12 Themes 1.13 Help instructions 1.14 Popup filters 1.15 No results message 1.16 Highlight keywords 1.17 State 1.18 Mark active columns 1.19 Toolbar 1.20 Single filter 2.0 TableFilter class 2.1 Public properties 2.2 Public methods 3.0 Extensions 3.1 Advanced grid 3.1 Sort 3.2 Column operations 3.3 Filters visibility 3.4 Columns visibility 4. Filter operators Home Obsolete TODO
8 1.04 Paging
koalyptus edited this page 2017-12-08 22:25:39 +11:00
Table of Contents
Property Type Description Remarks Example
paging boolean|object if set true, it will generate a paging feature 
var tfConfig = { paging: true };
// or
var tfConfig = { 
  paging: {} 
};
length number defines the number of results displayed in a page (default - 10) 
var tfConfig = { 
  paging: {
    length: 50
  } 
};
target_id string defines the id of the element that will contain the paging elements (pages drop-down and navigation buttons) (default - null) 
var tfConfig = { 
  paging: {
    target_id: 'myContainerId'
  } 
};
results_per_page array this property enables users to change the number of results per page. It accepts an array with the following values:
  • a string containing the results per page label ('Results per page')
  • an array containing the numeric values indicating the results per page options ([25,50,100])
the label is a span element, results per page values are contained in a select element 
var tfConfig = { 
  paging: {
    results_per_page: ['Results per page', [25, 50, 100]]
  } 
};
results_per_page_target_id string defines the id of the element that will contain the results per page drop-down element (default - null) 
var tfConfig = { 
  paging: {
    results_per_page_target_id: 'myContainerId'
  } 
};
btns boolean enables / disables paging buttons (default - true) 
var tfConfig = { 
  paging: {
    btns: false
  } 
};
page_selector_type string defines the page selector element: drop-down or text-box. 2 possible values: 'select' or 'input' 
var tfConfig = { 
  paging: {
    page_selector_type: 'input'
  } 
};
btn_next_page_text string sets 'next page' button's label (default - ">") 
var tfConfig = { 
  paging: {
    btn_next_page_text: 'Next >'
  } 
};
btn_prev_page_text string sets 'previous page' button's label (default - "<") 
var tfConfig = { 
  paging: {
    btn_prev_page_text: '< Previous'
  } 
};
btn_last_page_text string sets 'last page' button's label (default - ">|") 
var tfConfig = { 
  paging: {
    btn_last_page_text: 'Last >>'
  } 
};
btn_first_page_text string sets 'first page' button's label (default - "|<") 
var tfConfig = { 
  paging: {
    btn_first_page_text: '<< First'
  } 
};
btn_next_page_html string defines 'next page' button's HTML (default - null) note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribute 
var tfConfig = { 
  paging: {
    btn_next_page_html: 'Next >'
  } 
};
btn_prev_page_html string defines 'next page' button's HTML (default - null) note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribute 
var tfConfig = { 
  paging: {
    btn_prev_page_html: '< Previous'
  } 
};
btn_last_page_html string defines 'next page' button's HTML (default - null) note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribute 
var tfConfig = { 
  paging: {
    btn_last_page_html: 'Last >>'
  } 
};
btn_first_page_html string defines 'next page' button's HTML (default - null) note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribute 
var tfConfig = { 
  paging: {
    btn_first_page_html: 'First >>'
  } 
};
page_text string defines the text preceding the page selector drop-down (default - ' Page ') 
var tfConfig = { 
  paging: {
    page_text: 'Pg'
  } 
};
of_text string defines the text after page selector drop-down (default - ' of ') 
var tfConfig = { 
  paging: {
    of_text: ' / '
  } 
};
slc_css_class string defines the css class for paging drop-down (default - 'pgSlc') 
var tfConfig = { 
  paging: {
    slc_css_class: 'myCssClass'
  } 
};
results_slc_css_class string defines the css class of the results per page drop-down (default - 'rspg') 
var tfConfig = { 
  paging: {
    results_slc_css_class: 'myCssClass'
  } 
};
results_span_css_class string defines the css class for the label preceding the results per page select (default - 'rspgSpan') 
var tfConfig = { 
  paging: {
    results_span_css_class: 'myCssClass'
  } 
};
btn_css_class string defines the css class for paging buttons (previous, next, etc.) (default - 'pgInp') 
var tfConfig = { 
  paging: {
    btn_css_class: 'myCssClass'
  } 
};
nb_pages_css_class string defines the css class fo css class for the total nb of pages label (default - 'nbpg') 
var tfConfig = { 
  paging: {
    nb_pages_css_class: 'myCssClass'
  } 
};
toolbar_position string defines where it will be placed inside the toolbar (default - 'center') 3 possible values: 'left', 'center' and 'right' 
var tfConfig = { 
  paging: {
      toolbar_position: 'left'
  } 
};

Callbacks

Property Type Description Remarks Example
on_before_change_page function Callback fired before page is changed (default - null) note that 2 parameters are passed to the callback function:
  • tf is the current TableFilter instance
  • index of the page that will be displayed
 
var tfConfig = { 
  paging: {
    on_before_change_page: function(tf, i) { 
      console.log(tf.id, 'page index: ' + i);
    }
  } 
};
on_after_change_page function Callback fired after page is changed (default - null) note that 2 parameters are passed to the callback function:
  • tf is the current TableFilter instance
  • index of the page that will be displayed
 
var tfConfig = { 
  paging: {
    on_after_change_page: function(tf, i) { 
      console.log(tf.id, 'page index: ' + i);
    }
  } 
};

Events

Assuming TableFilter is already instanciated: 

var tf = new TableFilter('my-table-id');
Event Description Remarks Example
row-paged Event emitted just after a row is included in a page during paging calculation Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • rowIdx - index of row
  • validRowIdx - index of valid rows collection
  • rowDisplayed - boolean indicating if row is displayed
 
	tf.emitter.on(['row-paged'], function(tf, rowIdx, validRowIdx, rowDisplayed) { 
	  console.log(tf, rowIdx, validRowIdx, rowDisplayed);
	});
grouped-by-page Event emitted just after a page is collected during paging process Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • paging - paging instance
 
	tf.emitter.on(['grouped-by-page'], function(tf, paging) { 
	  console.log(tf, paging);
	});
before-page-change Event emitted just before a page is changed Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • pageIndex - page index
 
	tf.emitter.on(['before-page-change'], function(tf, pageIndex) { 
	  console.log(tf, pageIndex);
	});
after-page-change Event emitted just after a page is changed Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • pageIndex - page index
 
	tf.emitter.on(['after-page-change'], function(tf, pageIndex) { 
	  console.log(tf, pageIndex);
	});
before-page-length-change Event emitted just before the page length is changed Subscribers receive the following parameters:
  • tf - current TableFilter instance
 
	tf.emitter.on(['before-page-length-change'], function(tf) { 
	  console.log(tf);
	});
after-page-length-change Event emitted just after the page length is changed Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • pageLength - Length of the page
 
	tf.emitter.on(['after-page-length-change'], function(tf, pageLength) { 
	  console.log(tf, pageLength);
	});
before-reset-page Event emitted just before a page is reset Subscribers receive the following parameters:
  • tf - current TableFilter instance
 
	tf.emitter.on(['before-reset-page'], function(tf) { 
	  console.log(tf);
	});
after-reset-page Event emitted just after a page is reset Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • pageNumber - page number
 
	tf.emitter.on(['after-reset-page'], function(tf, pageNumber) { 
	  console.log(tf, pageNumber);
	});
before-reset-page-length Event emitted just before the page length is reset Subscribers receive the following parameters:
  • tf - current TableFilter instance
 
	tf.emitter.on(['before-reset-page-length'], function(tf) { 
	  console.log(tf);
	});
after-reset-page-length Event emitted just after the page length is reset Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • pageLength - page length
 
	tf.emitter.on(['after-reset-page-length'], function(tf, pageLength) { 
	  console.log(tf, pageLength);
	});

Website | Examples | Es6 documentation