datatables option columns.render 渲染列(3) url变超链接、图片显示、值替换(加样式)

最新推荐文章于 2022-02-22 17:31:56 发布

ccddsdsdfsdf

最新推荐文章于 2022-02-22 17:31:56 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： datatables render

本文链接：https://blog.youkuaiyun.com/lh87270202/article/details/82987838

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Datatables中使用render函数在表格单元格后添加按钮，包括html和js代码示例，以及对参数的详细解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

用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());
   });