Book Image

HTML5 Data and Services Cookbook

Book Image

HTML5 Data and Services Cookbook

Overview of this book

HTML5 is everywhere. From PCs to tablets to smartphones and even TVs, the web is the most ubiquitous application platform and information medium bar. Its becoming a first class citizen in established operating systems such as Microsoft Windows 8 as well as the primary platform of new operating systems such as Google Chrome OS. "HTML5 Data and Services Cookbook" contains over 100 recipes explaining how to utilize modern features and techniques when building websites or web applications. This book will help you to explore the full power of HTML5 - from number rounding to advanced graphics to real-time data binding. "HTML5 Data and Services Cookbook" starts with the display of text and related data. Then you will be guided through graphs and animated visualizations followed by input and input controls. Data serialization, validation and communication with the server as well as modern frameworks with advanced features like automatic data binding and server communication will also be covered in detail.This book covers a fast track into new libraries and features that are part of HTML5!
Table of Contents (21 chapters)
HTML5 Data and Services Cookbook
About the Authors
About the Reviewers

Creating multiple-choice filters

One common task when displaying tables is to filter the data in the table to a subset that satisfies a certain criteria. Multiple-choice table filters work on columns with a finite number of values. For example, if we had a table containing data of some people where one column is the transportation method used by the person, the filter used on this column would be a multiple-choice filter. The user should be able to select one or more transportation methods, and the table view would display all the people that are using the selected methods.

Getting ready

We're going to assume that we're using the code and data from the previous recipe. We have a list of people with their transportation methods displayed in a sortable, paginated table using the DataTables jQuery plugin. We will copy the files from the previous recipe, and then add to them.

The data that we need to filter is already available in the tableData global variable; we can filter this data and then use the global tableSetData function to display the filtered table.

The filter is going to work on the Transportation field.

How to do it...

Let's modify the previous code to add multiple-choice filters to our table:

  1. In the index.html file from the previous recipe, add a multiple-choice select list after the opening <body> tag:

    <select id="list" style="width:100px;"  multiple>
  2. Add a script element for filter.js before the closing </body> tag:

    <script type="text/javascript" src="filter.js"></script>
  3. We're also going to modify the fetchData call at the end of example.js to trigger a custom event notifying any observers that the data has been fetched and set:

    $(function() {
        fetchData(function(result) {

    The code is wrapped to be executed after the page is loaded in order for event triggering to work. Before the page load, no events can be triggered.

  4. Create a file named filter.js and add the following code:

    (function() {
        function getUnique(data, column) {
            var unique = [];
            data.forEach(function(row) {
                if (unique.indexOf(row[column]) < 0) unique.push(row[column]); });
            return unique;
        function choiceFilter(valueList, col) {
            return function filter(el) {
                return valueList.indexOf(el[col]) >= 0;
        $("#demo").on('table:data', function() {
            getUnique(, 4).forEach(function(item) {
                $("<option />").attr('value', item).html(item).appendTo("#list");
        $("#list").change(function() {
            var filtered =
                    choiceFilter($("#list").val(), 4));

How it works...

The easiest way to implement a user interface for a multiple-choice filter is to use a multiple-choice select element.

We also need to populate the element when the data becomes available. To do this, we trigger our new custom event table:data after fetching the data (either from our server or otherwise). The listener extracts the unique values from the Transportation column of the data and populates the select list with options for the values.

When the selection changes, we extract the selected values (as an array) and create a new filter function using choiceFilter, a higher-order function. The higher-order function returns a new filtering function. This filtering function takes a table row argument and returns true if the value of the fourth column of that row is contained within the specified list.

The filtering function is passed to Array.filter; it applies this function to every row and returns an array containing only the rows for which the filtering function returns true. The filtered data is then displayed instead of the original data.