1. 程式人生 > >datatables option columns.render 渲染列(3) url變超連結、圖片顯示、值替換(加樣式)

datatables option columns.render 渲染列(3) url變超連結、圖片顯示、值替換(加樣式)

前言

用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