jQuery插件TableSearch表格搜索实现Javascript搜索表格内容功能-必优博客

jQuery插件TableSearch表格搜索实现Javascript搜索表格内容功能

本博客所有文章均属原创作品，如有转载，请注明作者：biuuu，来源：http://www.biuuu.com/?p=543

随着DIV+CSS网页代码的普及，越来越多的人开始抛弃使用table表格生成网页，但有些应用上，table却有其独特的优势，一般来说使用表格意味着其展示内容相对比较多，有时候需要查找table表格中某个特定信息，就需要实现tableSearch表格搜索功能，这里介绍一个jQuery插件jQuery Table Search表格搜索工具，轻松实现Javascript搜索表格内容功能，只需要设置查找为空的错误提示和按扭名称等，即可实现Javascript搜索表格内容功能，jQuery Table Search表格搜索效果图如下：

使用说明
需要使用jQuery库文件(目前版本1.3)和jQuery Table Search库文件(目前版本1.0.1)

素材准备
表格CSS样式，控制jQuery Table Search表格搜索工具CSS显示效果。

实例代码
一，包含文件部分

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesearch.js"></script>

二，HTML部分

<table id="my-table">
<thead>
<tr>
<th>必优一</th>
<th>必优二</th>
<th>必优三</th>
<th>必优四</th>
<th>必优五</th>
</tr>
</thead>
<tbody>
<tr>
<td>biuuu_1</td>
<td>biuuu_2</td>
<td>biuuu_3</td>
<td>biuuu_4</td>
<td>biuuu_5</td>
</tr>
<tr>
<td>table_1</td>
<td>table_2</td>
<td>table_3</td>
<td>table_4</td>
<td>table_5</td>
</tr>
<tr>
<td>jquery_1</td>
<td>jquery_2</td>
<td>jquery_3</td>
<td>jquery_4</td>
<td>jquery_5</td>
</tr>
</tbody>
</table>

其中，列名必须在<thead></thead>中，行信息必须在<tbody></tbody>中，其它使用和表格一样，非常简单。

三，Javascript部分(jQuery插件jQuery table Search调用)

<script type="text/javascript">
jQuery(function ($) {
$("table#my-table").tableSearch();
</script>

直接调用表格ID，实现Javascript搜索表格内容功能，同时可自定义相关配置，如下：

<script type="text/javascript">
jQuery(function ($) {
$("table#my-table").tableSearch({
empty: "查找为空",
notFound: "没有找到所需要的信息",
button: {className: "table-search-button", name: "table-search-button", value: "搜索"},
container: "table-search-container",
label: {
selector: "选择查找列",
field: "输入查找值"
}
});
});
</script>