在上一篇博客中我們提到了用dataTables 做一個分頁表格。今天進一步進階，做一個行內帶操作按鈕的表格。效果如圖。
記得最基礎的實現方式是，我們要在js 中拼接字符串，嵌入一個帶按鈕的語句。但是現在我們用dataTables插件，其實現方式非常簡單。主要的頁面還是和上篇博客中提到的一樣。不過我們又給其設置了幾個屬性而已。
table = $('#table_local').DataTable({
// 通過ajax向后台controller請求數據
ajax : {
url : "queryPagePapers",
dataSrc : "data",
data : function(d) {
var searchContent = $(
'#searchContent').val();
// 添加額外的參數傳給服務器
d.extra_search = searchContent;
}},
"columnDefs" : [ {
// 定義操作列,######以下是重點########
"targets" : 3,//操作按鈕目標列
"data" : null,
"render" : function(data, type,row) {
var id = '"' + row.id + '"';
var html = "<a href='javascript:void(0);' class='delete btn btn-default btn-xs' ><i class='fa fa-times'></i> 查看</a>"
html += "<a href='javascript:void(0);' class='up btn btn-default btn-xs'><i class='fa fa-arrow-up'></i> 編輯</a>"
html += "<a href='javascript:void(0);' onclick='deleteThisRowPapser("+ id + ")' class='down btn btn-default btn-xs'><i class='fa fa-arrow-down'></i> 刪除</a>"
return html;
}
} ],
看這樣就可以了。平時多看看API和晚上的demo 都挺有好處的。關於datatables的更多使用，推薦一個網站，http://datatables.club/index.html