The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
jQuery table search
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)
Default option 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 usage with defaults parameters:
$("#my-table").tableSearch();Setting error messages:
$("#my-table").tableSearch({
empty: "empty field message",
notFound: "not found message"
});Setting the fields label:
$("#my-table").tableSearch({
label: {
selector: "Select a option",
field: "Type something here"
}
});Ignores column called "Name":
$("#my-table").tableSearch({
ignore: "name"
});The table structre should contain thead(with th) and tbody sections as bellow:
<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>