图标不显示

Question

需要使用编辑和删除图标填充表格行。可以获取每行上的按钮，但无法获取图标。使用JSOn用数据填充表

var jsonResponse = JSON.parse(data);    
var table = $('#register-data').DataTable({
    "data": jsonResponse.data,
    "columns": [
         { "data": "ReleaseID" },
         { "data": "ReleaseName" },
         {
           "data":null,      
           "defaultContent": "<button class='btn-Edit'><i class="fa fa-edit"></i>Edit</button>"
         },               
     ],                            
     "order": [[1, 'dsc']]                       
}); 

在index.html文件中调用Font file

任何建议都是很好的

Answer 1

您会遇到如下语法错误：

   "data": jsonResponse.data,
        "columns": [
        { "data": "ReleaseID" },
        { "data": "ReleaseName" },
        { "data":  null,      
          "defaultContent": "<button class='btn-Edit'><i class='fa fa-edit'></i>Edit</button>"
          }               
        ],                             
        "order": [[1, 'dsc']]                       
    });

Answer 2

正如@ADyson指出的那样，'defaultContent‘对象中有一个拼写错误。我有你的例子，其中有一些虚拟数据，只有额外的更改才是强制的

​

$(document).ready(function() {
var data = '{"data":[{"ReleaseID":1,"ReleaseName":"Jam"}]}'
var jsonResponse = JSON.parse(data); 
  var table = $('#register-data').DataTable({
           "data":jsonResponse.data,
          "columns": [
          { "data": "ReleaseID", "title": "ReleaseID" },
          { "data": "ReleaseName", "title": "ReleaseName" },
          { "data":  null,  "title": "Action",      
            "defaultContent": "<button class='btn-Edit'><i class='fa fa-edit'></i>Edit</button>"
            }               
          ],                             
          "order": [[1, 'dsc']]                               
  });
} );

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<div class="container">
  <table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="register-data">

  </table>
</div>

​

Documentation:

Jquery Table API