Two interactive tables with Flask/Python/bootstrap

Question

I have an app (Flask/Python and Bootstrap) to show details on the web. Tables are creating dynamically based on specific filters from post request. Full information can be displayed in two tables: lets says "Rents" and "Payments". First column of each table is the id.

Would it be possible to create an html with interactive tables where I can select the row in Rents table and "Payments" table will be updated accordingly to selected id to show only data of that specific Rent?

I don't want sending post/get requests for each time for updating the data. Would prefer to have it dynamically change on client side (of cause, if it is possible).

You’ll need some JavaScript to make the page interactive. If your data set is small enough, you can load it all on the page during the first request, but to filter it, you’ll need a JS script (assuming you want to avoid a frontend framework). — thedatadavis
– thedatadavis, Commented Dec 21, 2022 at 13:15
@thedatadavis thank you. Yes, I understand that approach. Thought there is a better way to optimise the task. — OcMaRUS
– OcMaRUS, Commented Dec 21, 2022 at 13:19

pelusa · Accepted Answer · 2022-12-21 17:34:21Z

1

You can use JQuery/AJAX call to update specific data in a part of your HTML without refreshing the browser

Execute an AJAX call when a rent row is clicked:

$('#id_of_some_rent_row').click(function () {
   var is_active = true;
   var url = 'put_here_your_payments_url';
   $.ajax(
   {
       // Get all payments you need.
       type : 'get', // request method
       url : url,
       dataType : 'json', // expected returned data format.
       data : 
       {
           'is_active' : is_active // You can add request data if you need
       },
       success : function(data)
       {
           // Execute a function that update your payments table
           // with returned payments data
       }
   });
});

answered Dec 21, 2022 at 17:34

pelusa

611 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OcMaRUS Over a year ago

much appreciate! will take a look at.

Collectives™ on Stack Overflow

Two interactive tables with Flask/Python/bootstrap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related