Filter Data By a Set of Strings Using Knockoutjs in ASP.Net Application

var ascSort = function (a, b) { return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };

var descSort = function (a, b) { return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };

var sortFunc = self.activeSort.asc ? ascSort : descSort;

self.people.sort(sortFunc);

};

self.activeFilter = ko.observable(self.filters[0].filter);

self.filteredPeople = ko.computed(function () {

if (self.activeFilter()) {

return ko.utils.arrayFilter(self.people(), self.activeFilter());

} else {

return self.people();

}

});

self.setActiveFilter = function (model, event) {

self.activeFilter(model.filter);

};

}

ko.applyBindings(new viewModel());

</script>

Here first I provided a set of Static Data on which filtration is to be done, I had provided this data in an array named "people." In this array I provided the First Name, Surname and Age of Persons.

After that I provided the headers that will be used to provide the title of the headers.

Then filters are used in which the following four things are defined:

1. Show All
2. Only Chaudharys
3. Only Singhs
4. Only Adults

These four things will help in filtering the data. "Show All" will not filter the data, it will show all the data. "Only Chaudharys" will filter those data whose Surname is equal to Chaudharys. "Only Singhs" will filter those persons whose Surname is equal to Singh and "Only Adults" will filter the data by their age.

Then I provided the sorting on the header of each column, this sorting will sort the data in Ascending Order when the user clicks on the Header of each coluimn.

After that, two functions are created named ascSort and desSort. These functions will help to Sort the Data in Ascending and Descending order.

After that I had created an Observable named activeFilter, this Observable has the values of filters.

Step 2

Now we will move to the View of our application.

<div data-bind="foreach: filters">

<input type="button" data-bind="click: $parent.setActiveFilter, value: title"/>

</div>

<br/>

<table>

<thead>

<tr data-bind="foreach: headers">

<th data-bind="click: $parent.sort, text: title"></th>

</tr>

</thead>

<tbody data-bind="foreach: filteredPeople">

<tr>

<td data-bind="text: initialName"></td>

<td data-bind="text: surName"></td>

<td data-bind="text: age"></td>

</tr>

</tbody>

</table>

Here first I had bound the Button with the ActiveFilter, this will create four Buttons that will be bound to the four titles provided in the filters.

Aftre that I had bound the <tr> tag with the header Array, in this tr I had provided a <th> that is bound with the "sort", so if the user clicks on the header of each column then the data of that column will be sorted.

Now our application is ready to run and you can see the output as follows.

Output

First of all you will get a output like this:

After that if you click on any of the buttons then the data will be filtered by the sorting bound on that button like in the next image I had clicked on the "only Chaudharys" and it's showing the data whose surname is Chaudhary.

After that I had sorted the data by the Surname, this is done by clicking on the Header tag of "Surname."