Skip to content

1.04 Paging

Jump to bottom Edit New page
koalyptus edited this page Dec 8, 2017 · 8 revisions
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

Clone this wiki locally