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

随着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显示效果。

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

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

二，HTML部分

1. <table id="my-table">
2. <thead>
3. <tr>
4. <th>必优一</th>
5. <th>必优二</th>
6. <th>必优三</th>
7. <th>必优四</th>
8. <th>必优五</th>
9. </tr>
10. </thead>
11. <tbody>
12. <tr>
13. <td>biuuu_1</td>
14. <td>biuuu_2</td>
15. <td>biuuu_3</td>
16. <td>biuuu_4</td>
17. <td>biuuu_5</td>
18. </tr>
19. <tr>
20. <td>table_1</td>
21. <td>table_2</td>
22. <td>table_3</td>
23. <td>table_4</td>
24. <td>table_5</td>
25. </tr>
26. <tr>
27. <td>jquery_1</td>
28. <td>jquery_2</td>
29. <td>jquery_3</td>
30. <td>jquery_4</td>
31. <td>jquery_5</td>
32. </tr>
33. </tbody>
34. </table>

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

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

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

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

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

empty表示如果为空的错误提示
notFound表示如果没有找到的错误提示
button表示提示按扭的效果，样式和名称
container表示搜索的容器，如：table-search-container 表格搜索容器
label表示标签提示设置

实例可知配置jQuery插件jQuery Table Search表格搜索使用非常简单，只需要将英文改成中文，可自定义配置实现Javascript搜索表格内容功能效果，非常实用。