Sometimes you want to filter specific columns, not just the whole table. This is called column filtering and in this tutorial we present the various options you have and some useful tricks you can use for fine tuning. When you define a column filter you specify either explicitly or implicitly the following parameters:
- Column ID
- Control Type
- Search Method
Let's see them one by one.
Column ID is just an integer, where 1 corresponds to the first column, 2 to the second and so on.
Control TypeThis can be:
- input: an input text box, where the user can type any value.
- select: a drop-down selection box where the use an select a value from a list. The values for the list are getting populated automatically from the column values. Apparently this type is appropriate only in cases where the number of column values is limited.
- range: a drop-down selection box where the user selects a range, instead of a specific value. Example: 10 or less, 10-20, 20 or more. If you choose this type you need to specify the range interval as well.
Search MethodBy selecting one the available search methods you can make the filter to search for the exact value, for values similar to the key-phrase, or values that fall in a certain range. Let's see them summarized in the table below.
|smart||The default search method. Will return all cells that contain anywhere the key phrase.|
|exact||This method will return only cells that contain the exact phrase. Example: The key phrase is "20" will return only cells with value "20", but not "120" or "220", i.e. that contain the value "20".|
|start_with||This method will return only cells that contain the key phrase at the beginning. Example: The key phrase "20" will return "20" and "209" but not "320".|
|numeric_int||Use this method to search for numeric
ranges. For instance, if the column
contain prices and you want to display
only cells whose price is greater than
$1000 or less than $500. You could also
search for prices between $500 and
$1000. The syntax is quite simple and it's
summarized in the examples below:
|numeric_period||Same as above. when you have decimal numbers (e.g. 12.564) the period will be treated as the separator for the decimal number, and the comma (,) as the thousands separator. If it's the other way around use the next search method numeric_comma.|
|numeric_comma||Same as above. The only difference is in decimal numbers, where the comma will be treated as the separator for the decimal number, and the period (.) as the thousands separator.|
|date_auto||Use this method to search for date ranges. Similar to the numeric equivalent described previously. The date format of the column will be detected automatically.|
|date_ymd||Same as above. The only difference is that you have specified the date format to be year-month-day.|
|date_ydm||Same as above. The only difference is that you have specified the date format to be year-day-month.|
|date_dmy||Same as above. The only difference is that you have specified the date format to be day-month-year.|
|date_mdy||Same as above. The only difference is that you have specified the date format to be month-day-year.|
Tips and TricksBelow is a list with the most common tips when it comes to column filtering.
- Put the filters on a separate row
The best place is right below the top header row(s). So, if you have one top row, then the best place is the second row. To do so, add an extra row and adjust the header size and header row value according to the following rule:
- Header Size: is the total number of header rows. In this example is 2, as the first row contains the column headers and the second row the column filters. All rows to belong to the header are excluded from any filtering.
- Header Row: is the id/order of the header row in which the column filters will appear. In this example is 2, because the row that contains the column filters is the second one.
If you don't have control over your table input you can add an empty row using the modification function addemptyrow that takes an argument the position in which the row will be added. For instance, 2 means add an empty row to appear 2nd in the table.
- Use Filter Labels
It's easy to add labels to your column filters. Just add the label you wish to the table cell that the column filter will appear. For instance, if you add our column filters on the second column and we wish to add the label "search by name" to the filter for the name column, this is the sample input we would use:
Name,Age search by name, Nicolas,16 Jenna,32 James,28, Anthony,67 George,82 Tina,6 Gail,48
- Use Filter Pre-selection
It is possible to pre-populate the value of an input search filter or pre-select a drop-down control box using the URL parameter column_filter_preselection, using the following format:
table_id_1:column_id_1:value_1^table_id_2:column_id_2:value_2^....^table_id_n:column_ id_n:value_nNote that:
- table_id is not the id of the table HTML element, but the table ordering (the sequence of appearance in the page, counting only tables with search filtering enabled) that starts from 0, instead of 1. So, the first table in the page has table_id = 0, the second has table_id = 1 and so on.
- column_id is the column ordering (the sequence of appearance in the row) that starts from from 0, instead of 1. So, the first row column has column_id = 0, the second has column_id = 1 and so on.
- value should be URL encoded, as this is part of the URL.
column_filter_preselection=0:0:JamesHere is why: 0:0:James as our sample table is the only one which has column filters in it. Since we start counting from 0, the first table has id = 0.
0:0:James as the column that contains the name is the first one. Since we start counting from 0, the first column has id = 0 .
0:0:James: James is our URL encoded value, which happens to be as same as the unencoded since there are no special characters or white spaces.
Try to click the link below to see it in action:
Visit this page with name filter preselected to James
|search by name|