Introduction

This plugins adds a search feature in a table element. The select box is filled with all column headers names(this way the user can select on which column the search is going to be executed).

The texts and messages of errors(data not found and empty field) can be customized.

All fields are inserted into a div above the table, using this id: "table-search-container"

If esc key is pressed when the input field is focused, all the rows will be displayed again.

The error messages are displayed bellow the fields, in a span tag with a class called "table-search-error-message"

The ignore array(option param) is used to ignore search in specified columns, just insert the text of the column header to ignore that column on the select box(not case sensitive)

Table structure(needs thead and tbody sections otherwise it will not work):

<table>
<thead>
<tr>
<th>Name1</th>
<th>Name2</th>
<th>Name3</th>
<th>Name4</th>
<th>Name5</th>
</tr>
</thead>
<tbody>
<tr>
<td>c1r1</td>
<td>c2r1</td>
<td>c3r1</td>
<td>c4r1</td>
<td>c5r1</td>
</tr>
<tr>
<td>c1r2</td>
<td>c2r2</td>
<td>c3r2</td>
<td>c4r2</td>
<td>c5r2</td>
</tr>
<tr>
<td>c1r3</td>
<td>c2r3</td>
<td>c3r3</td>
<td>c4r3</td>
<td>c5r3</td>
</tr>
</tbody>
</table>

Parameters

Defaults values

ignore: [],
selector: true, //will be implemented in the next release, do not change
turbo: false, //will be implemented in the next release, do not change
field: {className: "table-search-field", name: "table-search-field", size: "20", required: "true"},
label: {selector: "Select a column: ", field: "Insert a text to search: "},
button: {className: "table-search-button", name: "table-search-button", value: "Search"},
empty: "Please fill the search field.",
notFound: "Data not found.",
container: "table-search-container"

Usage

Simple:

$("#my-table").tableSearch();

Specifing the erros messaage(empty field and not found)

$("#my-table").tableSearch({
    empty: "empty field message",
    notFound: "not found message"
});

Seting the input field and select field labels:

$("#my-table").tableSearch({
    label: {
        selector: "Select a option",
        field: "Type something here"
    }
});

Ignores "name" column in the search

$("#my-table").tableSearch({
    ignore: "name"
});