Click here to Skip to main content
13,803,077 members
Click here to Skip to main content
Add your own
alternative version

Stats

10.1K views
201 downloads
4 bookmarked
Posted 13 Mar 2015
Licenced CPOL

JavaScript Filter / Grouping - Similar to Excel

, 13 Mar 2015
Rate this:
Please Sign up or sign in to vote.
Using this script, you will automatically add a filtering dropdownlist similar to Excel file filtering at the top, which will filter table based on your selection

Introduction

Whenever you have a table displaying average amount of rows ~100, using this script, you can easily add a dropdownlist filter on the top of the column, where you can filter the whole table using it, and it will give you something similar to what you have in Excel.

Background

A jQuery background would be ideal to understand the code, but a basic knowledge in JavaScript is enough. Some simple steps are required.

Using the Code

Using this code is simple, first you need a reference for both SJFIlter.js and Jquery.js.

<script type="text/javascript" src="SJFilter.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>

First, we need to mark the table that we going to apply the filter on, we just need to give it any id:

<table id="Table2bFiltered" cellpadding="5" cellspacing="0">

As this will be filtering the rows based on the values that exists on a specific column, we need to determince which column is that which simply can be done by adding the following CSS classes on the column that we going to filter in the header row as below:

<td class="SJFilter GradeFilter">Grade</td>

SJFilter class is reserved class name, which will tell this script that this column will be used as a filter, while GradeFilter is just a name that we will use in the next step.

On every td that contains Grade values, e.g., First Grade, Second Grade, ... we add the same name defined before e.g.

<td class="GradeFilter">Second Grade</td>
<td class="GradeFilter">First Grade</td>
<td class="GradeFilter">Third Grade</td>

Now by adding the initialize line passing the table ID and an optional CSS class to give a style for alternative row color...

<script type="text/javascript">initFiltering('Table2bFiltered', 'gray');</script>

...the code now gets the class name from the header row, and splits it to get the defined name GradeFilter loops on and fill a dropdownlist with distinct values of the content of this column.

Below is the full sample:

//
// Any source code blocks look like this
//
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<!-- Javascript references -->
     <script type="text/javascript" src="SJFilter.js"></script>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
       <style type="text/css">
        .gray, .gray td
        {
            background-color: #eee !important;
        }
        body{font-family:Tahoma;}
           </style>
</head>
<body>
<-- ID on the table -->
    <table id="Table2bFiltered" 

    cellpadding="5" cellspacing="0">
        <tr class="gray">
            <td>Student name</td>
<-- add reserved class name and custom definde name -->
            <td class="SJFilter GradeFilter">Grade</td>
            <td>Age</td>
            <td>Total Scrore</td>
        </tr>
        <tr>
            <td>John</td>
<-- class on data td -->
            <td class="GradeFilter">Second Grade</td>
            <td>7</td>
            <td>90</td>
        </tr>
        <tr class="gray">
            <td>John</td>
<-- class on data td as defined before -->
            <td class="GradeFilter">First Grade</td>
            <td>6</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Mary</td>
<-- class on data td as defined before -->
            <td class="GradeFilter">First Grade</td>
            <td>6</td>
            <td>90</td>
        </tr>
        <tr class="gray">
            <td>Su</td>
<-- class on data td as defined before -->
            <td class="GradeFilter">First Grade</td>
            <td>6</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Mike</td>
<-- class on data td as defined before -->
            <td class="GradeFilter">Third Grade</td>
            <td>8</td>
            <td>90</td>
        </tr>
    </table>
    
<-- initialize script-->
    <script type="text/javascript">initFiltering
    ('Table2bFiltered', 'gray');</script>
</body>
</html>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sufyan S Jabr
Technical Lead
United Arab Emirates United Arab Emirates
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionUse attribute instead of class Pin
Nitij15-Mar-15 1:26
professionalNitij15-Mar-15 1:26 
AnswerRe: Use attribute instead of class Pin
Sufyan S Jabr15-Mar-15 1:29
memberSufyan S Jabr15-Mar-15 1:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.181215.1 | Last Updated 13 Mar 2015
Article Copyright 2015 by Sufyan S Jabr
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid