如何在数据表烧瓶中添加按钮

Question

我在 boostrap 数据表中添加按钮时遇到问题。我现在在烧瓶（python）中，js请给我一些提示或解决方案，我将非常感激。 我想做这样的事情。

我尝试使用 jsonify 数据返回按钮。我尝试为它更改 js。但找不到正确的解决方案。 用于表格js代码中的填写日期。

HTML代码

<div class="row-90">
        <table class="table display" id="calEvents">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">GROUP</th>
                    <th scope="col">WEEKDAY</th>
                    <th scope="col">DATE</th>
                    <th scope="col">TICKER</th>
                    <th scope="col">EVENT</th>
                    <th scope="col">READX</th>
                    <th scope="col">ACTION</th>
               
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">GROUP</th>
                    <th scope="col">WEEKDAY</th>
                    <th scope="col">DATE</th>
                    <th scope="col">TICKER</th>
                    <th scope="col">EVENT</th>
                    <th scope="col">READX</th>
                    <th scope="col">ACTION</th>
        
                   
                </tr>
            </tfoot>
        </table>
    </div>

js代码

$('#calEvents').DataTable( {
       
        'columnDefs': [
            {
               targets: 2, render: function(data1){ return moment(data1).format('dddd')},
            }, //data-toggle="modal" data-target="#exampleModal"
            
            { targets: 3, render: function(data2){ return moment(data2).format('YYYY-MM-DD')}},
        ]
     
    } );

请帮助我。 （此代码没有引导代码，因为现在 idk 将它放在了那里（没有一种解决方案不起作用……）。请不要评判我。

Answer 1

您可以使用 DataTable 中的 defaultContent 属性在表格中添加其他按钮。 (Reference)

$('#calEvents').DataTable( {
    "processing": true,
    "serverSide": false,
    "order": [[ 3, "asc" ]],
    "ajax": "/api/v1/calendar/get",
    'columnDefs': [
        { 
           targets: 2, render: function(data1){ return moment(data1).format('dddd')},
           defaultContent: '<button class="btn-view" type="button">Edit</button>'
             + '<button class="btn-delete" type="button">Delete</button>'
        },
        { targets: 3, render: function(data2){ return moment(data2).format('YYYY-MM-DD')}},
    ]
} );