Table data not refreshing?

[JacquesPerrault]

I created a table based on the demo, snippet below.

Clicking a button pulls back data from a remote store, which is then used to populate the table. The table populates with data the first time the button is clicked, but subsequent clicks do not refresh the table.

I can see the data being refreshed with each button click via the console output on line 18. However, the table does not reflect the new dataset. The only apparent way to flush the data is by reloading the page.

01        $(function () {
02          $("#btnShow").click(function(event) {
03
04            var callback = function(data) {
05              result = $.parseJSON(data);
06              if (result.success) {
07                payload = $.parseJSON(result.data);
08                var columnTitles = [];
09                var columnValues = [];
10                $.each(payload, function( index, value ) {
11                  var tmpArray = [];
12                  $.each( value, function( key, value ) {
13                    if (index === 0) columnTitles.push(key);
14                    tmpArray.push(value);
15                  })
16                  columnValues.push(tmpArray);
17                });
18                console.log(columnValues);
19
20                $('#tidy-table').html('');
21                var block = $('#tidy-table')
22                  .TidyTable({
23                    enableCheckbox: true,
24                    enableMenu:     false
25                  },
26                  {
27                    columnTitles: columnTitles,
28                    columnValues: columnValues,
29
30                    // pre-process column values before sort (optional)
31                    sortByPattern: function(col_num, val) {
32                      if (col_num != 1) return val;
33
34                      return String(val).replace(/$|%|#/g, '');
35                    }
36                  });
37
38                // copy the table options menu
39                var menu = $('select.tidy_table', block).clone(true);
40                block.append(menu);
41
42                // optional animation
43                block.slideDown('fast');
44
45                // remove stored data
46                block.TidyTable('destroy');

[nuxy]

Hi Jacques:

I assume that the callback variable in your example is being passed to your $ajax handler.

Is this correct?

If you're trying to access multiple datasets an example of how to do this can be found here

In no case should the page have to refresh when an AJAX request is involved.

[JacquesPerrault]

@nuxy your assumption is correct. I changed the code slightly as suggested by the Poppy-Pagination demo, so my table declaration is now:

var block = $('#tidy-table');
block.TidyTable({
  enableCheckbox: true,
enableMenu: false
}               

That worked.