Datatables內自定義按鈕，並實現對table內資料的讀取和操作。
阿新 • • 發佈：2019-02-06
我們做表格展示的時候會常常遇到需要在每列的後邊新增操作按鈕的情況，比如淘寶購物車裡的訂單刪除按鈕或者詳細按鈕，這樣就需要在載入Datatables的時候同時對每一行生成對應的操作按鈕，並給操作按鈕繫結方法，以實現對table內單元格資料的讀取和操作。
Datatables中提供了一種render屬性，可以對資料來源的資料進行操作。使用方法和案例如下：
<html> <head> <script src="~/Scripts/jquery-1.12.3.min.js"></script> <script src="~/Scripts/jquery.dataTables.min.js"></script> <link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function () { $("#person").dataTable({ // 和<table>的id對應，指定初始化datatables。 "pagingType": "full_numbers", //給table內自定義按鈕 "columnDefs": [ { // targets用於指定操作的列，從第0列開始，-1為最後一列，這裡第六列 // return後邊是我們希望在指定列填入的按鈕程式碼 "targets": -1, "render": function ( data, type, full, meta ) { return "<input type = 'button' id = 'testButton' value = '點選我！'>" } } ], //給列賦值，這裡的列名需要和data的資料名對應 //注意這裡第六列資料指定為null，用來存放我們加入的按鈕 "columns": [ { "data": "name" }, { "data": "corpname" }, { "data": "dynasty" }, { "data": "gender" }, { "data": "job" }, { "data": null} ], //填充的資料，這裡用的是靜態資料，資料來源可以來自前臺，也可以來自伺服器 "data": [ { "name": "黃蓉", "corpname": "丐幫", "dynasty": "南宋", "gender": "女", "job": "丐幫幫主" }, { "name": "郭靖", "corpname": "丐幫", "dynasty": "南宋", "gender": "男", "job": "抗金領袖" }, { "name": "楊過", "corpname": "古墓派", "dynasty": "南宋", "gender": "男", "job": "神鵰俠" }, { "name": "李莫愁", "corpname": "古墓派", "dynasty": "南宋", "gender": "女", "job": "反派" }, { "name": "任我行", "corpname": "日月神教", "dynasty": "不明", "gender": "男", "job": "日月神教教主" }, { "name": "令狐沖", "corpname": "華山派", "dynasty": "不明", "gender": "男", "job": "華山派大弟子" }, { "name": "嶽不群", "corpname": "華山派", "dynasty": "不明", "gender": "男", "job": "華山派掌門" }, { "name": "左冷禪", "corpname": "嵩山派", "dynasty": "不明", "gender": "男", "job": "嵩山派掌門" }, { "name": "張無忌", "corpname": "明教", "dynasty": "元朝", "gender": "男", "job": "明教教主" }, { "name": "韋小寶", "corpname": "天地會", "dynasty": "清朝", "gender": "男", "job": "青木堂堂主" }, { "name": "康熙", "corpname": "清政府", "dynasty": "清朝", "gender": "男", "job": "皇帝" }, { "name": "趙敏", "corpname": "元政府", "dynasty": "元朝", "gender": "女", "job": "郡主" }, { "name": "張三丰", "corpname": "武當派", "dynasty": "元朝", "gender": "男", "job": "武當創始人" } ] }); //為我們生成的按鈕繫結方法，這裡是彈出姓名和職業的對話方塊 $("#person tbody").on("click", "#testButton", function () { //獲取行 var row = $("table#person tr").index($(this).closest("tr")); //獲取某列（從0列開始計數）的值 var name = $("table#person").find("tr").eq(row).find("td").eq(0).text(); var job = $("table#person").find("tr").eq(row).find("td").eq(4).text(); alert(name + "是" + job); }); }); </script> </head> <body> <table id="person" class="display" cellspacing="0" style="width:100%"> <thead> <tr> <td>姓名</td> <td>門派</td> <td>朝代</td> <td>性別</td> <td>職業</td> <td>自定義按鈕</td> </tr> </thead> <tbody></tbody> </table> </body> </html>
