HTML Table Filter Generator

This demo shows how to retrieve the table content with AJAX calls (JQuery library) and refresh the filters when the content is loaded.

country isocode year POP XRAT PPP cgdp cc ci
Choose a group to display data.
Imported javascript files:
Configuration object and AJAX logic:
  // filters configuration
	var config = {
	  sort: true,
		filters_row_index: 1,
		alternate_rows: true,
		rows_counter: true,
		mark_active_columns: true,
		loader: true,
		loader_html: '',
		loader_css_class: 'myLoader',
		btn_reset: true,
		status: true,
		status_bar: true,
		status_bar_target_id: 'loadLabel2',
		col_1: 'select',
		col_2: 'select',
		remember_grid_values: true,
		col_width: ["150px","100px","100px","70px","70px","70px","70px","70px","70px"],
		paging: true,
		paging_length: 15,
		/* Sky Blue theme */    
    themes: {     
        description:['SkyBlue stylesheet']  
		//Column resize feature
		extensions: { 	
						description:['Columns Resizing'], 
		col_resizer_all_cells: true
	var ajax = {
	  loadContent: function(){
      var grp = $('#slcGrp').val();
      // pagination 
      tf.paging = $('#chkPaging').attr('checked') ? true : false;      
      // loading message
      $('#loadLabel').html('Loading data...');
      // AJAX call
      this.load(grp + '-rows.htm');
    load: function(uri){
      var xhr = $.ajax({
        url: uri,
        context: $('#demo tbody'),
        type: 'GET',
        dataType: 'html'
      .done(function(data) {
        // inject html data
        // loading message is cleared
        // filters need to be refreshed
      .fail(function(jqXHR, textStatus){
        this.html('Ouups an error occured! Data could not be loaded!');
	var tf; //global TF instance
	 // filters are instantiated
	 tf = new TF('demo', config);