基於bootstrap + php +ajax datatable 外掛程式的使用

標籤：欄位   隱藏   分頁   ref   資料   class   模糊   link   php   

Datatables是一款jquery表格外掛程式。它是一個高度靈活的工具，可以將任何HTML表格添加進階的互動功能。

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

1、在第一列添加checkbox，實現全選功能；　　全選框沒有排序按鈕2、在最後一列添加操作按鈕3、隱藏、顯示該欄欄位；欄位預設排序4、薪水千分位、小數點兩位格式化5、內容太多用。。。。截取文字；　　滑鼠移上去顯示詳情6、替換字元，男字型顯示紅色，女顯示綠色7、給文字添加超連結8、同時顯示、隱藏多個列的內容9、儲存格所在的行、列高亮顯示10、自訂搜尋條件 【時間的處理，關鍵字的模糊查詢（前者沒有實現，只是展示雙日曆的使用，後者實現了功能，前者功能實作類別似）】11、行內編輯...

 

　　已實現大體功能，目前存在的問題，1操作裡面行內編輯，開啟頁面242行，即可開啟刪除邏輯（行內編輯會有影響）；當然要實現操作  有編輯、有刪除等等，需在整合下行內編輯的操作。做稍微處理即可.2引用jquery-datatable   bootstrap-datatable（三角形狀） 會導致排序按鈕不同的樣式，然後自己整合 bootstrap-datatable.css實現分頁。

效果

 

 

 

詳細學習請參考其官網：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

 

基於bootstrap + php +ajax datatable 外掛程式的使用