How to add a button in data table flask

kepsnius

i got problem with add botton in boostrap datatable. Im now in flask (python), js please give me some tips or solution i will be very gratefull. i want do something like this.

my python code:

@api.route('/calendar/get', methods=['GET'])
@login_required
def calendar_get():
    r = []
    cursor.execute("""
        SELECT e.eventId, g.groupName, CONVERT(date, e.eventDate) as eventWeekday, CONVERT(date, e.eventDate) as eventDate, t.tickerName, e.eventText, e.eventReadX, '' as action FROM CalEvents e
        inner join CalGroups g on g.groupId=e.groupId
        inner join Tickers t on t.tickerId=e.tickerId
    """) 
    for row in cursor:
        r.append(row) 
    return jsonify({'data':r})

HTML CODE

<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>

JSON DATA LOOKS LIKE THIS

{
  "data": [
    [
      1, 
      "UK CALENDAR", 
      "Wed, 01 Jan 2020 00:00:00 GMT", 
      "Wed, 01 Jan 2020 00:00:00 GMT", 
      "A2A IM", 
      "hjfj", 
      "lukgfk", 
      ""
    ]
}

For fill date and add bootoon in table js code

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

Any idea? bootton code not working...

kthorngren

You have

        {
           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>'
        },

But it looks like you want the button in the las column not the third column. Maybe something like this:

    'columnDefs': [
        {
           targets: 2, render: function(data1){ return moment(data1).format('dddd')},
        },
        {
           targets: -1, 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')}},
    ]

Where -1 in the columnDefs.targets is the last column.

Didn't test the code. to verify it works but should be close. If you still have issues see this threa and if that doesn't help then please build a test case showing what you are doing. Flask doesn't affect what you are doing.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin