datatables option columns.render 渲染列(3) url變超連結、圖片顯示、值替換(加樣式)
阿新 • • 發佈:2019-01-04
前言
用render在表格後面加按鈕
1、html程式碼
<table class="table table-striped table-hover table-bordered"
id="searchDatatable" width="100% ">
</table >
2、js程式碼
$(document).ready(function () { // 配置 datatables 外掛 var dataTableId = "searchDatatable"; var settings = function () { return setDatatable({ "ajax": { "url": "/clock/config", "dataType": "json", "type": "POST", "data": function (table) { var data = {}; $("#searchForm").find("input,select").each(function () { var name = $(this).attr("id"); data[name] = $(this).val(); }); data["draw"] = table["draw"]; data["currentPage"] = (table["start"] + table["length"]) / table["length"]; data["pageSize"] = table["length"]; return data; } }, "columns": [ { "data": "fundCode", "width": "100px", "title": "基金程式碼" }, { "data": "fundName", "width": "150px", "title": "基金名稱" }, { "data": "feature1Id", "width": "100px", "title": "產品配置1", render: function (data, type, row, meta) { //個人理解 --以及引數的應用場景 //data:當前cell的值 --主要是操作這個引數來做渲染 //type:資料型別,列舉型別dt內建定義的 --用處不大 //row:當前行的所有資料 --可以做來用級聯(沒辦法更改其他cell的渲染) //meta:它下面有三個引數 // //row,col 是當前cell的橫縱座標(相對於左上角) // --可以結合上個引數row做更加複雜的級聯 // //settings:dt的api例項,動態所有的引數資訊都在裡面 // --這個很強大,獲取引數資訊就好,新手不要隨便更改裡面的引數資訊 var node = "<button "; node += "data-id='"+data+"'" node += ">" + "配置" + "</label>" return node; } } ] }) }; // 使用 datatables 外掛 var table = $("#searchDatatable").DataTable(settings()); });
3、參考相關
官網:
http://datatables.club/reference/option/columns.render.html
其它:
http://datatables.club/manual/daily/2016/04/27/option-columns-render3.html