Issue with columns selection on dynamically generated column-toggle table (jQm 1.3.1)

Issue with columns selection on dynamically generated column-toggle table (jQm 1.3.1)

Hi,
I'm new to this forum and relatively new to JQuery mobile framework too (so, have mercy...).
In my project, I'm trying to dynamically generate a column-toggle table. What I need to obtain is to populate the table based on a selection change in a <select> element (each time I change the selection, the table content must change).
I already managed to trigger the creation event after the selection; in this way I managed to create the table by injecting it inside the DOM (on a <div> with a specific 'myDivContainerId' id) using:

  1. var $table = $("<table/>", {
  2.       id: 'MyTable',
  3.       class : 'ui-body-d ui-shadow table-stripe ui-responsive',
  4.       'data-role' : 'table',
  5.       'data-mode' : 'columntoggle',
  6.       'data-column-btn-theme' : 'b',
  7.       'data-column-btn-text' : 'Columns to display...',
  8.       'data-column-popup-theme' : 'a'
  9.     }).appendTo("#myDivContainerId");

and then its header and body

  1. $tableHeader = $("<thead/>").appendTo($table);
  2. $tableBody = $("<tbody/>").appendTo($table);

(I omit the obvious addition of the subsequent <tr/>, <th/> and <td/> elements inside <thead> and <tbody>)

At the end I trigger the table widget (and refresh it) with the jQm widget methods:

  1. $table
  2.   .table()
  3.   .table('refresh');

Just one note, $table, $tableHeader (+ content <tr/> and <th/>) and $tableBody are initially injected in the DOM (before the <select/> selection change event), while $tableBody content (<tr/> and <th/> and <td/>) is dynamically generated after the <select> selection change event. In fact, what I'm trying to obtain is a table structure "indipendent" by its data (in this way, on a limit-case, I could show/hide columns while no data has yet been inserted inside the table).

Now, everything "seems" to work fine, since the table is correctly created and populated. The problem is when I try to hide/show columns: depending on the execution (and application flow moment) of the .table() and .table('refresh') methods. More precisely:

  1. if I just run the table widget ($table.table(), after injecting rows), without refreshing it, when I try to hide/show columns, only headers are shown/hidden, while corresponding rows data are not (this seems to be a known issue, see here, but that should have been solved in 1.3.1...)
  2. if I run the table widget and refresh it ($table.table() + $table.table('refresh'), after injecting rows), when I try to hide/show columns, if I hide column X, column X -2 is hidden instead (that is to say that it hides a different column than the selected one), maybe for table-priority issues ?


Is there anybody who experienced these same issues ? Do you have any advice ?


Final note:
Actually, on the jQm columntoggle table (official) API reference, it seems to be :
  1. $(".selector" ).table-columntoggle("refresh");







but table-columntoggle function gives me an error on my 1.3.1 version (it returns an Uncaught ReferenceError: columntoggle is not defined error).