时间戳

首页 > 解决方案 > 如何在数据表烧瓶中添加按钮

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

问题描述

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

我尝试使用 jsonify 数据返回 botton。我尝试为它更改 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 将其放置在那里（没有一种解决方案无法正常工作......）。请不要评判我。

标签： javascripthtmljsonajaxflask

解决方案

您可以使用defaultContentDataTable 中的属性在表中添加其他按钮。（参考）

$('#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')}},
    ]
} );

推荐阅读