Output Filtered Data

Tags: #<Tag:0x00007efc7042b328> #<Tag:0x00007efc7042b170>
#1

Hello

I have my table set up. I would like to output the table data to draw some charts. So if the user changes filters on the table, the charts will update in a seperate div to reflect these changes.

I have looked at to store the data in a var and output it to a div. But it seems to output the full data set regardless of filter changes.

     afterChange: function (r,c) { 
           var data1 = this.getData();
           document.getElementById("output").innerHTML=data1;
           console.log(data1) 
      }

If I understand the method correctly, getData will only output data once a change happens on the table? I need the full data output and any changes thereafter to update the charts. Can I be directed to any similar examples please?

Thanks!

#2

Hi @desigan.govender

In this case it will be better to use the afterFilter hook, and then get the data. It will then give correct results. You can check it in this example: https://jsfiddle.net/handsoncode/9dkx4hvz/

#3

Thanks Adrian. This works perfectly. However the data is only output after the filter is set which is expected. How can I get the full data output before any filters are set? The full data will be used to plot a chart, then when the user changes the filter conditions, the chart updates accordingly.

I think I need to use beforeFilter with afterFilter to populate the same data output var. But not quite clear how to do this.

#4

@desigan.govender

If you want the visual data before any action is done you can use the getData() method outside the instance, or if you want to alway get the source data, then you can use getSourceData() which will be always the same, no matter the data alteration within the table.

#5