Question

I have a jquery flexigrid that I’m dynamically changing so that it displays different tabular data. I want, along with changing the data source (via the ‘url’ which I’m doing successfully), to change the table column header text but can’t quite figure out how to do so. So, for example, I want one flexigrid table to display the ’employees’ and then if the user clicks a link, for that same flexigrid to display ‘purchases’. When the user makes this change, the column header text needs to reflect the purchases column headers to match the JSON data I’m piping to it. Again, I’m having no problem getting everything to work except for the column header text. I can’t figure out how to change the header text when the user selects the ‘purchases’ table to view on the flexigrid.

this post illustrates how to do something similiar and I attempted to use it as a base to figure it out myself but quickly boarded the fail boat: consistent headers on flexigrid

Answer 1

there may be a better way to do this but it works

   $('#test').click(function() {
   var new_headers =new Array("Saab","Volvo","BMW");
    $("#flex").parent(".bDiv").siblings(".hDiv").find("table tr th div").each(function(x){
      $(this).text(new_headers[x]);
    });
  });

here is the heml i sued

 <div id="flexgrid">
    <table id="flex"></table>
  </div>

be sure to do this after the flexigrid has ben loaded or reloaded

  <input type="button" id="test" />