Question

我正在对Jquery数据表使用服务器端处理，但是在检索数据并将其显示在表上之后，我不知道如何在行末添加html按钮，我尝试了以下方法：

 $('#datatables').DataTable({

        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "http://localhost:8080/admin/query/fibre",
            "data": function ( data ) {
                //process data before sent to server.
            }},
        "columns": [
            { "data": "id", "name" : "ID", "title" : "ID"  },
            { "data": "name", "name" : "Name" , "title" : "Name"},
            { "data": "time", "name" : "Salary" , "title" : "Salary"},
            {
                "class":          "<button>delete<button>",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
        ]

    } );

但无济于事，有什么建议吗？我读了这篇文章，但答案仅与非服务器端发布有关。

这是我的html：

 <table id="datatables" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Delete</th>
                            <th>Delete</th>
                        </tr>
                        </tfoot>
                        <tbody>
                        <tr>
                            <td>Tiger Nixon</td>
                            <td>System Architect</td>
                            <th><button type="button" class="btn purple-gradient btn-sm">Small button</button></th>
                            <th><button type="button" class="btn purple-gradient btn-sm">Small button</button></th>
                        </tr>


                        </tbody>
                    </table>

但似乎已被column {}对象覆盖

Answer 1

您可以使用columnDef和defaultContent创建一些内容。这与documentation中的内容完全相同。

$('#datatables').DataTable({
  "columnDefs": [
    {
      "data": null,
      "defaultContent": "<button>Edit</button>",
      "targets": -1
    }
  ]
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.css" rel="stylesheet"/>


<table id="datatables" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Delete</th>
      <th>Delete</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <th><button type="button" class="btn purple-gradient btn-sm">Small button</button></th>
      <th>Whatever that is here will be overwritten</th>
    </tr>


  </tbody>
</table>

Answer 2

您可以在此处使用渲染选项。这将允许您将动态ID /值分配给默认按钮。

要首先为按钮分配动态值，您必须获取json共振列值。

示例： "data": "add_key_value"

"columnDefs": [ {
                  "targets": -1,
                  "data": "fid", 
                  "render": function ( data, type, row, meta )
                    {
                        return '<button class="btn btn-info" id="'+data+'">view</button>';
                    }
                }]

您可以在此处找到有关渲染的更多信息和示例：here

jQuery数据表：如何向每行的最后一个单元格添加按钮，

2 个答案: