Question

我有一个由JSON（ajax调用）填充的HTML表。在表格的“编辑”和“删除”列中，我需要有一个图标来编辑或删除每行的数据。

我不知道如何在JSON填充表格时添加图标。

以下是我的代码：

//填充表格的JSON。 Register.js

$(document).ready(function() {

var allRegister = AjaxCall(apiUrl, mthdGetReleasesFullList, null,   
    {

    });

    var data=allRegister.responseText;  
    alert("testing"+ data);
    var jsonResponse = JSON.parse(data);
        //var table = $('#contact-data').DataTable({
            var table = $('#register-data').DataTable({
                    "data": jsonResponse.data,
                    "columns": [
                    { "data": "ReleaseID" },
                    { "data": "ReleaseName" },
                    { "data": "DivisionID" },
                     { "data": "StatusID" },   
                    ],

                    "order": [[1, 'dsc']]      
                });

});

表的Html代码：

<link rel="stylesheet" href="entity/Register/css/Register.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page specific JS -->
<script src="entity/Register/js/Register.js"></script>

<div class="container-full">

    <div class="heading-1">
        <input type="button" id="btn-AddUser" value="Add Release" style="font-size:14px;color:teal;text-align: left"> 
            <h1>


            </h1>

        <div class="modular-box-text inset">

          <div class="retgister-table-holder">
            <h2>Pre-Release Access Register:</h2>
            <br>
                <div class="register-table" >   

                <table id="register-data"class="display tablesorter" role="grid" aria-describedby="example_info"  style="width: 100%;" cellspacing="0"> 

                    <thead>
                        <tr>
                            <th>ReleaseID</th>
                            <th>ReleaseName</th>
                            <th>DivisionID</th> 
                            <th>StatusIDth>   
                            <th>Edit<th>    
                            <th>Delete </th>             
                        </tr>
                    </thead>

                </table>    
                </div>  

            </div>


        </div>
    </div>
</div>

Answer 1

您需要使用render个对象的columns选项 - documentation here。当您指定所需操作的目标ID时（我假设它是ReleaseID），您只需使用该ID作为data对象创建更多列，并通过为其提供自定义{{1}来调整列渲染器} 方法。由于您将render指定为ReleaseID，因此您可以将data方法中的该值重新用作第一个参数。

在下面的示例中，您可以看到如何实现这一目标 - 您可以非常轻松地将render和Edit文本替换为引用每个操作所需图标的Delete标记。

＆＃13;

<img />

＆＃13;

// Faking a request
var response = [
    { "ReleaseID": "1", 
      "ReleaseName": "Release A",
      "DivisionID": "10",
      "StatusID": "1"
    }, {
      "ReleaseID": "2", 
      "ReleaseName": "Release B",
      "DivisionID": "9",
      "StatusID": "2"
    }, {
      "ReleaseID": "3", 
      "ReleaseName": "Release C",
      "DivisionID": "9",
      "StatusID": "1"
    }, {
      "ReleaseID": "4", 
      "ReleaseName": "Release D",
      "DivisionID": "10",
      "StatusID": "2"
    }, {
      "ReleaseID": "5", 
      "ReleaseName": "Release E",
      "DivisionID": "11",
      "StatusID": "1"
    }];

$(document).on('ready', function() {
  $('#register-data').dataTable({
    "data": response,
    "columns": [
      { "data": "ReleaseID" },
      { "data": "ReleaseName" },
      { "data": "DivisionID" },
      { "data": "StatusID" },
      { 
        "data": "ReleaseID",
        "render": (data, type, row, meta) => `<a href="/releases/edit/${data}">Edit</a>`
      }, {
        "data": "ReleaseID",
        "render": (data, type, row, meta) => `<a href="/releases/delete/${data}">Delete</a>`
      }
    ],
    "order": [[1, 'dsc']] 
  });
});

＆＃13;

Answer 2

感谢您的回复。我使用以下内容来获取编辑和删除按钮以显示在表的所有行

    var table = $('#register-data').DataTable({

               "data": jsonResponse.data,
                "columns": [
                { "data": "ReleaseID" },
                { "data": "ReleaseName" },
                { "data": "DivisionID" },
                { "data": "StatusID" },
                {"data":null,      "defaultContent": "<button class='btn-Edit'>Edit</button>"},                
                 {"data":null,      "defaultContent": "<button class='btn-Delete'>Click!</button>"},            
                ],                             
                "order": [[1, 'dsc']]                       
            });

将编辑/删除图标添加到由JSOn（AjaxCall）填充的数据行

2 个答案: