dataTables 添加行內操做按鈕

在上一篇博客中咱們提到了用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