前端開發(fā)：一個開源、簡單易用的jQuery表格插件（

前端開發(fā)：一個開源、簡單易用的jQuery表格插件（DataTables）

ataTables是一個基于jQuery庫的開源（MIT協(xié)議）表格插件，支持添加、排序、分頁、搜索、過濾等功能，使用簡單、廣受歡迎，能夠與主流前端UI整合（如bootstrap、jQuery UI等）。支持4種方式數(shù)據(jù)源，HTML（DOM）來源的數(shù)據(jù)、Ajax數(shù)據(jù)源、JavaScript的源數(shù)據(jù)、服務(wù)器端處理。擁有廣泛的配置選項(xiàng)和豐富的API文檔。

1、下載與初始化

https://github.com/DataTables/DataTables

下載完成后解壓，把解壓后的文件放到項(xiàng)目任意位置，再在頁面引入jQuery、DataTablesCss、DataTablesJs三個文件。

然后在body中創(chuàng)建一個table元素，設(shè)置id屬性，如下圖所示。

最后運(yùn)行以下腳本，代碼及效果如下。一個簡單的帶有分頁的表格就完成了。

language.url屬性是國際化文件地址，當(dāng)然也可以自定義名稱，更多國際化語言請前往官方網(wǎng)站了解詳情。

中文簡體：

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默認(rèn)會打開部分組件，如分頁按鈕、表格信息、搜索框等，這些組件支持自定義布局。

⑵不同分頁樣式

numbers - 只有只有數(shù)字按鈕
simple - 只有上一頁、下一頁兩個按鈕
simple_numbers - 除了上一頁、下一頁兩個按鈕還有頁數(shù)按鈕，Datatables默認(rèn)是這個
full - 有四個按鈕首頁、上一頁、下一頁、末頁
full_numbers - 除首頁、上一頁、下一頁、末頁四個按鈕還有頁數(shù)按鈕
first_last_numbers - 除首頁、末頁兩個按鈕還有頁數(shù)按鈕

⑶多列排序

⑷格式化數(shù)字顯示格式

通過language.decimal選項(xiàng)可以配置數(shù)字的友好顯示，比如1200450，顯示為12.004,50

⑸隱藏列

索引從1開始，隱藏了2、3列的name和age。

⑹bootstrap樣式

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

⑺垂直滾動條

⑻復(fù)雜表頭

⑼自定義事件

⑽列渲染

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

官方網(wǎng)站：

https://www.datatables.net/

DataTables是目前使用廣泛的表格插件之一，功能強(qiáng)大、文檔豐富、表格樣式豐富能夠適應(yīng)各種風(fēng)格的網(wǎng)站，高度靈活能夠?yàn)镠TML表格添加各種高級的交互功能。支持插件擴(kuò)展使DataTables變得更加強(qiáng)大，它的功能遠(yuǎn)不止于此，需要了解詳情的請前往官方網(wǎng)站。

有哪里寫得不好的地方請大家提出來，請輕噴，謝謝。同時(shí)有什么與編程相關(guān)的好東西可以推舉給我，再次感謝！

、在線表格編輯器——TablesGenerator

表格制作工具TablesGenerator是一個在線制作 LaTeX、HTML、Markdown 格式的表格代碼工具，支持在表格中填充數(shù)據(jù)，修改字體/背景顏色，對齊方式等等，還支持從 Excel、Google Docs 里直接復(fù)制粘貼數(shù)據(jù)，以及多個 HTML 表格樣式。Tables Generator 支持四種格式:LaTeX、HTML、Markdown、TEXT，先在 Table > Set size 中設(shè)置表格大小，然后填充數(shù)據(jù)，設(shè)置格式，就能在頁面下面找到代碼了。

2、在線表格編輯器——思邁特軟件Smartbi

其以“真Excel”操作的特色，擁有了其它報(bào)表軟件望塵莫及的功能特色。只要在Excel端安裝Smartbi報(bào)表工具插件，用戶就可以直接在Excel中設(shè)計(jì)報(bào)表格式或進(jìn)行數(shù)據(jù)分析。Smartbi表格制作工具巧妙利用Excel自身的表格、圖形、函數(shù)的能力，就能夠?qū)崿F(xiàn)各種BI應(yīng)用，還可將報(bào)表一鍵發(fā)布到Web/APP端進(jìn)行瀏覽，且軟件內(nèi)置多種免費(fèi)的表格模板可供使用。

針對類似模板固定的Word/PPT分析報(bào)告，Smartbi利用Office分析報(bào)告插件，將報(bào)告模板中的數(shù)據(jù)元素?cái)?shù)據(jù)（單數(shù)字、表格、圖形）從“靜態(tài)”變成“動態(tài)”，每當(dāng)需要使用時(shí)，數(shù)據(jù)分析師可以像刷新報(bào)表一樣刷新這些分析報(bào)告，按照所輸入的參數(shù)對報(bào)告數(shù)據(jù)進(jìn)行解讀、討論、建議，從而將更多時(shí)間用在“分析”上。

3、在線表格編輯器——FCKeditor 編輯器

FCKeditor 是一款開源的所見所得網(wǎng)頁文本編輯器，可通過CKeditor設(shè)置表格，在表格中定義表單元素，主要支持文本框、復(fù)選框、單選框、單行文本、多行文本、列表、按鈕、圖片、隱藏域。

4、在線表格編輯器——Ueditor Formdesign Plugins Web表單設(shè)計(jì)器

Ueditor Formdesign 是開源免費(fèi)的表單設(shè)計(jì)器，可應(yīng)用于工作流管理系統(tǒng)、OA等，是一款可視化的Web表單構(gòu)建器，HTML元素組件較豐富，主要包含：文本框、多行文本、下拉菜單、單選框、復(fù)選框、宏控件、進(jìn)度條等，并可以生成二維碼。

5、在線表格編輯器——SpreadJS

SpreadJS 在線Excel表格編輯器，是類似在線Excel功能和外觀的在線表格編輯程序，也是 SpreadJS 桌面設(shè)計(jì)器的在線版本，提供源代碼，可自由定制，任意擴(kuò)展。該產(chǎn)品內(nèi)嵌了SpreadJS，使用離線和在線方式均可進(jìn)行表格編輯。

接到很web前端項(xiàng)目中，常常看到表格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樣式表格自動切換每一行的顏色，在我們需要頻繁更新一個大表格的時(shí)候很有用。

<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. 鼠標(biāo)懸停高亮的CSS樣式表格 (需要JS)

純CSS顯示表格高亮在IE中顯示有問題，所以這邊使用了JS來做高亮（由于csdn博客限制了js的使用，我會在近期將博客遷移放到自己的web主機(jī)上）。

<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前端開發(fā)，關(guān)注用戶體驗(yàn)，加我qq/微信交流：6135833

http://dingxiangming.com

在線咨詢

上一篇：管理TXT和HTML內(nèi)容的TXT文本編輯器，辦公軟件
下一篇：jQuery 控制屬性和樣式

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端開發(fā)：一個開源、簡單易用的jQuery表格插件（

您的項(xiàng)目需求