如何动态地在一行中添加多个自定义按钮? [jQuery数据表]

时间:2019-01-05 10:38:10

标签: datatables

我正在使用Datatables API,但无法在一行中添加多个按钮。

var table = $('#table_invdata').DataTable({
    "columnDefs": [{
        "targets": -1,
        "data": null,
        "defaultContent": 
           '<button class="btn-view" type="button">EDIT</button>'              
    }]  
});

2 个答案:

答案 0 :(得分:0)

尝试此代码

var table = $('#table_invdata').DataTable({
    "columnDefs": [{
        "targets": -1,
        "data": null,
        "defaultContent": 
           '<button class="btn-view" type="button">EDIT</button>'    
           + '<button class="btn-delete"  type="button">Delete</button>'          
    }]  
});

var table = $('#table_invdata').DataTable({
        "columnDefs": [{
            "targets": -1,
            "data": null,
            "defaultContent": 
               '<button class="btn-view" type="button">EDIT</button> <button class="btn-delete"  type="button">Delete</button>'          
        }]  
    });

更新:

您可以使用数据表render函数来更新列值。

<table class="table" id="datatable" >
    <thead>
        <tr>
            <th>Name </th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Jquery数据表代码:

$('#datatable').DataTable ({
        "data" : FinalResult,
         "columns" : [
                { "data" : Name},
                { "data" : null,render: function ( data, type, row ) {
                            return '<button class="btn-view" type="button">EDIT</button>';
                        } },
                { "data" : null,render: function ( data, type, row ) {
                            return '<button class="btn-delete"  type="button">Delete</button>';
                        } }
                ]
            });

固定链接StoryBoard

答案 1 :(得分:0)

<table id="table_invdata" class="table table-striped table-bordered">
<tr> 
<th>EmpID</th>
<th>EmpName</th>
<th>Email-id</th>
<th>Salary</th>
<th>Position</th>
<th></th>
</tr>
</table>