HTML Table Filter Generator

Choose group:
Show all Show A-F Show G-L  Pagination:   Go 

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: {     
        name:['SkyBlueTheme'],     
        src:['TableFilter/TF_Themes/SkyBlue/TF_SkyBlue.css'],     
        description:['SkyBlue stylesheet']  
    },
		
		//Column resize feature
		extensions: { 	
						name:['ColumnsResizer'], 
						src:['TableFilter/TFExt_ColsResizer/TFExt_ColsResizer.js'], 
						description:['Columns Resizing'], 
						initialize:[function(o){o.SetColsResizer();}]
					},
		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
        this.html(data);
        // loading message is cleared
        $('#loadLabel').html('');
        // filters need to be refreshed
        tf.RefreshGrid();
      })
      .fail(function(jqXHR, textStatus){
        $('#loadLabel').html(textStatus);
        this.html('Ouups an error occured! Data could not be loaded!');
      });        
    }
  };
  
	var tf; //global TF instance
	
	$(function(){
	 // filters are instantiated
	 tf = new TF('demo', config);
	 tf.Init();  
  });