基於bootstrap + php +ajax datatable 插件的使用

Datatables是一款jquery表格插件。它是一個高度靈活的工具，能夠將任何HTML表格添加高級的交互功能。

下面是我學習datatables寫的一個服務器端（php）分頁例子，該功能包含的功能 list:

一、在第一列添加checkbox，實現全選功能；　　全選框沒有排序按鈕

二、在最後一列添加操做按鈕

三、隱藏、顯示該列字段；字段默認排序

四、薪水千分位、小數點兩位格式化

五、內容太多用。。。。截取文字；　　鼠標移上去顯示詳情

六、替換字符，男字體顯示紅色，女顯示綠色

七、給文字添加超連接

八、同時顯示、隱藏多個列的內容

九、單元格所在的行、列高亮顯示

十、自定義搜索條件 【時間的處理，關鍵字的模糊查詢（前者沒有實現，只是展現雙日曆的使用，後者實現了功能，前者功能實現相似）】

十一、行內編輯...

 

　　已實現大致功能，解決操做過程當中存在的問題，

　　一、整合操做；操做裏面行內編輯，打開頁面242行，便可打開刪除邏輯（行內編輯會有影響）；固然要實現操做  有編輯、有刪除等等，需在整合下行內編輯的操做。作稍微處理便可.

　　二、整合排序按鈕；引用jquery-datatable   bootstrap-datatable（三角形狀） 會致使排序按鈕不一樣的樣式，而後本身整合 bootstrap-datatable.css實現分頁。

　　三、修復模糊查詢匹配失敗；在實現模糊搜索的時候出現一個問題，就是當條件是createtime的時候，搜索有問題，數據庫所有匹配（數據庫該字段存的是 2016-12-27 11:50:44的值）。最後發現該字段不作模糊搜索條件時，能夠正確匹配。。。（找了大半天。。）

效果如圖：

 

 

 

詳細學習請參考其官網：http://datatables.net/中文網：http://dt.thxopen.com/

學習datatable以前 能夠參考下 常見問題   ，能夠 加深 對datatable使用的一些理解。好比：$("#example").dataTable({...}) 和 $("#example").DataTable({...}) 的區別；以及1.10.x與1.9.x參數名對照表 這樣在寫參數的時候本身寫的不會混亂，也易於別人看懂。

而後，附上代碼包下載地址（包含sql文件，後臺腳本數據庫test，用戶名root,密碼爲空）：

連接：http://pan.baidu.com/s/1slOw0Cd 密碼：94tg