I am using nicolaskruchten pivottable, for displaying my data using:

$('#output').pivot([
    {country: "USA", city: "Boston"},
    {country: "USA", city: "NYC"},
    {country: "UK", city: "London"},
],
{
    rows: ["country"],
    cols: ["city"]
});

Its displaying table properly but now I want to filter my data dynamically in the table.

One of the way is, to filter my available data and redraw pivot table with filter data. I want to know if there is any inbuilt filter method available.

There is an provision for a filter object in the options array of pivot(input [,options]) method but not able to find any example to implement.

If anyone can suggest me how to proceed further ?

I am using nicolaskruchten pivottable, for displaying my data using:

$('#output').pivot([
    {country: "USA", city: "Boston"},
    {country: "USA", city: "NYC"},
    {country: "UK", city: "London"},
],
{
    rows: ["country"],
    cols: ["city"]
});

Its displaying table properly but now I want to filter my data dynamically in the table.

One of the way is, to filter my available data and redraw pivot table with filter data. I want to know if there is any inbuilt filter method available.

There is an provision for a filter object in the options array of pivot(input [,options]) method but not able to find any example to implement.

If anyone can suggest me how to proceed further ?

• javascript
• pivot-table
• pivottable.js

3 Answers 3

You must re-render the table every time you filter. You can pass a filter attribute which is a function that takes a row as a parameter and returns a boolean. See https://github./nicolaskruchten/pivottable/wiki/Parameters#pivotinput-options

I should add that in general, you should file a Github Issue to get help with this library, rather than asking a question on StackOverflow.

Below is the way i have done it. and it solved my query.

 var filterBy={filterCol:"country",filterValue:["USA"]};

    optObject['filter']=function(rowObj){ 
if(filterBy.filterValue.indexOf(rowObj[filterBy.filterCol])>‌​-1) return true; 
else return false; 
};

I used search/select box to filter data dynamically. Data to the filter is fed dynamically from Back-end.

In index.html:

-------------- //search-select box 1 -------------- //search-select box 2 ...

============== //pivot table

You can actually pass a filter attribute. But this will be a better implementation in the memory perspective.

By implementing a default set of records to be displayed, you can limit the data that is getting loaded to Front-end using dynamic filters.