前端开发：一个开源、简单易用的jQuery表格插件（

前端开发：一个开源、简单易用的jQuery表格插件（DataTables）

ataTables是一个基于jQuery库的开源（MIT协议）表格插件，支持添加、排序、分页、搜索、过滤等功能，使用简单、广受欢迎，能够与主流前端UI整合（如bootstrap、jQuery UI等）。支持4种方式数据源，HTML（DOM）来源的数据、Ajax数据源、JavaScript的源数据、服务器端处理。拥有广泛的配置选项和丰富的API文档。

1、下载与初始化

https://github.com/DataTables/DataTables

下载完成后解压，把解压后的文件放到项目任意位置，再在页面引入jQuery、DataTablesCss、DataTablesJs三个文件。

然后在body中创建一个table元素，设置id属性，如下图所示。

最后运行以下脚本，代码及效果如下。一个简单的带有分页的表格就完成了。

language.url属性是国际化文件地址，当然也可以自定义名称，更多国际化语言请前往官方网站了解详情。

中文简体：

https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese.json

中文繁体：

https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese-traditional.json

2、功能展示

⑴组件定位

datatables默认会打开部分组件，如分页按钮、表格信息、搜索框等，这些组件支持自定义布局。

⑵不同分页样式

numbers - 只有只有数字按钮
simple - 只有上一页、下一页两个按钮
simple_numbers - 除了上一页、下一页两个按钮还有页数按钮，Datatables默认是这个
full - 有四个按钮首页、上一页、下一页、末页
full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮
first_last_numbers - 除首页、末页两个按钮还有页数按钮

⑶多列排序

⑷格式化数字显示格式

通过language.decimal选项可以配置数字的友好显示，比如1200450，显示为12.004,50

⑸隐藏列

索引从1开始，隐藏了2、3列的name和age。

⑹bootstrap样式

需要额外引入dataTables.bootstrap.min.js、bootstrap.min.css、dataTables.bootstrap.min.css三个文件。

⑺垂直滚动条

⑻复杂表头

⑼自定义事件

⑽列渲染

下面隐藏了年龄列，并把年龄拼接到姓名后。

官方网站：

https://www.datatables.net/

DataTables是目前使用广泛的表格插件之一，功能强大、文档丰富、表格样式丰富能够适应各种风格的网站，高度灵活能够为HTML表格添加各种高级的交互功能。支持插件扩展使DataTables变得更加强大，它的功能远不止于此，需要了解详情的请前往官方网站。

有哪里写得不好的地方请大家提出来，请轻喷，谢谢。同时有什么与编程相关的好东西可以推举给我，再次感谢！

、在线表格编辑器——TablesGenerator

表格制作工具TablesGenerator是一个在线制作 LaTeX、HTML、Markdown 格式的表格代码工具，支持在表格中填充数据，修改字体/背景颜色，对齐方式等等，还支持从 Excel、Google Docs 里直接复制粘贴数据，以及多个 HTML 表格样式。Tables Generator 支持四种格式:LaTeX、HTML、Markdown、TEXT，先在 Table > Set size 中设置表格大小，然后填充数据，设置格式，就能在页面下面找到代码了。

2、在线表格编辑器——思迈特软件Smartbi

其以“真Excel”操作的特色，拥有了其它报表软件望尘莫及的功能特色。只要在Excel端安装Smartbi报表工具插件，用户就可以直接在Excel中设计报表格式或进行数据分析。Smartbi表格制作工具巧妙利用Excel自身的表格、图形、函数的能力，就能够实现各种BI应用，还可将报表一键发布到Web/APP端进行浏览，且软件内置多种免费的表格模板可供使用。

针对类似模板固定的Word/PPT分析报告，Smartbi利用Office分析报告插件，将报告模板中的数据元素数据（单数字、表格、图形）从“静态”变成“动态”，每当需要使用时，数据分析师可以像刷新报表一样刷新这些分析报告，按照所输入的参数对报告数据进行解读、讨论、建议，从而将更多时间用在“分析”上。

3、在线表格编辑器——FCKeditor 编辑器

FCKeditor 是一款开源的所见所得网页文本编辑器，可通过CKeditor设置表格，在表格中定义表单元素，主要支持文本框、复选框、单选框、单行文本、多行文本、列表、按钮、图片、隐藏域。

4、在线表格编辑器——Ueditor Formdesign Plugins Web表单设计器

Ueditor Formdesign 是开源免费的表单设计器，可应用于工作流管理系统、OA等，是一款可视化的Web表单构建器，HTML元素组件较丰富，主要包含：文本框、多行文本、下拉菜单、单选框、复选框、宏控件、进度条等，并可以生成二维码。

5、在线表格编辑器——SpreadJS

SpreadJS 在线Excel表格编辑器，是类似在线Excel功能和外观的在线表格编辑程序，也是 SpreadJS 桌面设计器的在线版本，提供源代码，可自由定制，任意扩展。该产品内嵌了SpreadJS，使用离线和在线方式均可进行表格编辑。

接到很web前端项目中，常常看到表格table，做表格的样式，在本文下面，列举了四种表格css样式，代码也在下面：

1.单像素边框CSS表格
这是一个很常用的表格样式。


<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>

<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

2. 带背景图的CSS样式表格

和上面差不多，不过每个格子里多了背景图。

1. 下载上面两张图，命名为cell-blue.jpg和cell-grey.jpg

2. 拷贝下面的代码到你想要的地方，记得修改图片url

<style type="text/css">
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>

<table class="imagetable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

3. 自动换整行颜色的CSS样式表格（需要用到JS）

这个CSS样式表格自动切换每一行的颜色，在我们需要频繁更新一个大表格的时候很有用。

<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){
var table=document.getElementById(id);
var rows=table.getElementsByTagName("tr");
for(i=0; i < rows.length; i++){
if(i % 2==0){
rows[i].className="evenrowcolor";
}else{
rows[i].className="oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>

<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>

<table class="altrowstable" id="alternatecolor">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

4. 鼠标悬停高亮的CSS样式表格 (需要JS)

纯CSS显示表格高亮在IE中显示有问题，所以这边使用了JS来做高亮（由于csdn博客限制了js的使用，我会在近期将博客迁移放到自己的web主机上）。

<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>

<table class="hovertable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"

onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com

在线咨询

上一篇：管理TXT和HTML内容的TXT文本编辑器，办公软件
下一篇：jQuery 控制属性和样式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端开发：一个开源、简单易用的jQuery表格插件（

您的项目需求