Add Edit link to DataTables row

Add Edit link to DataTables row

shadowlightershadowlighter Posts: 4Questions: 2Answers: 0

Hello everyone. I am building a simple CRUD application in Flask and I integrated DataTables for the main db table. I wrote a python script to output a json file on the server in order to update via Flask the table data source. I would like now to edit each single row. Is it possible to add an href link element to each row pointing to something like item/id?

That is all I need, I will then take care of routing that particular URL to the correct Flask Form.
But how? Is that feasible?

Would be something like

edit link | column1 | column2| column3| .....|

or maybe the entire row could be a link to the edit form...

thanks!

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736
    edited March 2019 Answer ✓

    You can use columns.defaultContent or columns.render for this. Here are two examples doing the same thing but one is using defaultContent and the other render.
    http://live.datatables.net/xijecupo/1/edit
    http://live.datatables.net/qemodapi/1/edit

    They show how to get the row data for the button clicked in the row. Hope this gets you started.

    EDIT: This Editor example might be useful even though it sounds like you aren't going to use Editor:
    https://editor.datatables.net/examples/simple/inTableControls.html

    Kevin

  • shadowlightershadowlighter Posts: 4Questions: 2Answers: 0

    Cool! I have implemented your solution. Also, I needed to improve my json output which apparently missed all the keys. Now it looks good.

    My goal would that to place something like <a href="edit/1" class="">Edit</a>
    to edit the record with ID = 1.

    Would be difficult in js to fill in href dynamically on page load?

    Thanks
    Marco

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736
    Answer ✓

    Check the columns.render examples. There are a couple that should help. plus the second example I provided uses dynamic IDs like you want.

    Kevin

  • shadowlightershadowlighter Posts: 4Questions: 2Answers: 0
    edited March 2019

    Done it! I used the row argument...

    "columns": [
              {
                "render": function ( data, type, row, meta ) {
                  return '<a href="'+row.name+'">Edit</a>'; }
    
              }
    

    I was using the data one for a while.
    Thanks!

    Marco

This discussion has been closed.