前端開發：一個開源、簡單易用的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前端項目中，常?？吹奖砀駎able，做表格的樣式，在本文下面，列舉了四種表格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表格插件（

您的項目需求