时间戳

首页 > 解决方案 > 从列值生成数据表中的按钮

javascript - 从列值生成数据表中的按钮

问题描述

我使用数据表来呈现 json 的列和行。数据变量是 json。

            "columns" : [
                { "data" : "id" },
                { "data" : "username" },
                { "data" : "email" },
                { "data" : "site" },
                { "data" : "author_name" },
                { "data" : "user_name" },
                { "data" : "city" },
                { "data" : "region" },
                { "data" : "added" },
                { "data" : "member_status" },
                { "data" : "its_username" },
                { "data" : "register_date" },
                {"defaultContent": "<a href='/admin/edit_recruited_user/' class='btn btn-primary'><i class='fa fa-edit'></i></a><a href='/admin/delete_recruited_user/' class='btn btn-danger'><i class='fa fa-trash'></i></a>"}
            ],

我正在尝试将 id 中的值添加到我的链接/admin/edit_recruited_user/

如果我能做到这一点，或者我应该重新考虑数据表代码，有什么想法吗？

标签： javascriptphp

解决方案

添加columnDefs.

请参阅文档https://datatables.net/reference/option/columns.render

$.getJSON('https://api.myjson.com/bins/1u28t', function(json) {
    $('#example').DataTable({
       data : json.data,
       columns : [
           { data : 'Id' },
           { data : 'Name' },
           { data : 'Alias' }
      ],
      columnDefs: [ {
    			"targets": 0,
    			"data": "download_link",
    			"render": function ( data, type, row, meta ) {
      			return '<a href="/admin/edit_recruited_user/" class="btn btn-primary"><i class="fa fa-edit"></i></a><a href="/admin/delete_recruited_user/" class="btn btn-danger"><i class="fa fa-trash"></i></a>';
    			}
  			}]
    })
});  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<table id="example"/>

推荐阅读