/* Use the below template to add filtering and sorting functionality to a table. 
	** How to use:
	** 1. Link the location of the js library in the header of the htm page
	** e.g., <script language="javascript" src="../../../../common/script/tablefilter></script>
	** 2. Add the sample configuration below after <table></table>
	*/
	
<script>	
	//Get the number of total rows for pagination if total is greater than the max per page
	var totRowCount = document.getElementById("<f1_table_id>").rows.length;
	
	//table filter configuration (see http://koalyptus.github.io/TableFilter/ for examples)
	var filtersConfig = {
		base_path: '../../../../common/script/tablefilter/', //add the appropriate levels '../'
		state: {
			types: ['cookie'],
			filters: true,
			page_number: true,
			page_length: true,
			sort: true
			},
		filters_row_index: 1,
		responsive: false,
		col_0: 'checklist', //add appropriate type of filter per column     
		col_1: 'checklist',
		col_2: 'checklist',
		col_3: 'checklist',
		auto_filter: true,
		auto_filter_delay: 5000, //milliseconds
		alternate_rows: false,
		rows_counter: true,
		btn_reset: true,
		msg_filter: 'Filtering...',
		popup_filters: true,
		enable_empty_option: true, 
		empty_text: '(blanks)',
		enable_non_empty_option: true,
		non_empty_text: '(non blanks)',
		paging: {
			results_per_page: ['Display No. of Records: ', [10, 25, 50, 100, totRowCount-1]]
			},        
		extensions: [{
			name: 'colsVisibility',
			tick_to_hide: false,
			text: 'View columns: ',
			enable_tick_all: true,
			// column header title
			headers_text: [
				'Col_0_Title', 'Col_1_Title', 'Col_2_Title', 'Col_3_Title']
			},
			{ 
			name: 'sort',
			// columns data types
			types: [
				'string', 'string', 'string', 'string']
			}]               
		};

	//Enable table filter  
	var tf = new TableFilter('<f1_table_id>', filtersConfig );
	tf.init();
</script>