Having issues on backend by reordering table in Flask App

SincoM

Link to test case: https://stackoverflow.com/questions/69729794/forms-in-table-not-aligned-in-backend-when-order-used-in-a-flask-app-using-datat
Description of problem: I'm using forms in my table from a Flask App, jquery works properly, however whenever I use a filter or reorder the values that I imputed in the forms moves from the rows selected. Here I pasted the same question that I did for Stack Overflow.
Thank you

kthorngren

You SO thread has a lot of code to look through and most of its your server side Python code. We will be more interested in seeing your Javascript code like how you are getting the selected rows. I presume that a request is sent to the server to populate the second table but since the IDs are wrong the incorrect data is fetched, correct?

Kevin

SincoM

Hi @kthorngren, Thanks for you answer, you are correct, most of the code is from Python, the second table comes from the same database with a True/False filter, so yes after the request is sent I update some rows depending on the values that I got from the forms, but the IDs are wrong as you said. I want to know how to fix those IDs.

The Javascript that I used is this one:

<script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.min.js"></script>

<script>
   $(document).ready(function() {
      $('#dataTableExample').DataTable( {
         "scrollX": true,
         dom: 'Bfrtip',
         columnDefs: [
               {
                  targets: 1,
                  className: 'noVis'
               }
         ],
         buttons: [
               'copy', 'csv', 'excel', 'pdf', 'print',
               {
                  extend: 'colvis',
                  columns: ':not(.noVis)'
              }
         ],
         initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
      } );
   } );
</script>

kthorngren

How are you fetching the selected rows? Can you post the Javascript code for that?

Maybe you can build a simple test case to show how you are fetching the selected row IDs so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

SincoM

To fetch the data I'm using python, which will be updating my DB. I don't have any other Javascript apart from the one that I shared. Basically what is doing is getting the values from the rows in "add_another" FieldList form. I'm not using anything to control de IDs.

if add_form.submitAdd.data:# and add_form.validate(): 
       for row, order in zip(add_form.rows, orders): 
           if row.alloc_id.data == '': 
               continue

           alloc_id = int(form.alloc_id.data)        
           order.alloc_id = alloc_id
           order.allocated = True
           order.date = datetime.now()
           db.session.commit()

To append rows to my form I use this:

if request.method == 'GET' :
    for order in orders :
        add_form.rows.append_entry()

To be honest, I'm not sure to which other Javascript you might refer, but I'll try to build a small test case, however I think that I would have to build it in Python as well. I'm sorry if this is not helpful, I appreciate the help.

Manuel.

kthorngren

What I 'm asking is this:

You have this table:

My understanding is you make some selections in the Selection column then click the Allocate Orders button then the IDs of the rows you have options selected are collected. Is my understanding correct?

If you order by a different column or perform a search the collected IDs are incorrect. Is this correct?

How are you collecting these ID's from the table?

Keep in mind that most people answering questions on this forum aren't familiar with Python. I am but I use Flask differently than you.

Kevin

SincoM

I'm sorry for the delay in my answer, and yes Kevin, you are right, that's exactly the issue. I'm collecting them by pulling the whole form not the IDs; after that I zip the form rows and the orders, but the form don't keep the order based on the order. I've already fixed it, I used a dictionary when on "GET" where I save the IDs as my keys and after I know which forms are used I use those IDs to get them from the original dictionary.

Thank you for your help.

This is the code that I implemented

    if form.submitAdd.data:# and form.validate(): 
            form_dict = {}
            for row in form.rows:
                if row.alloc_id.data == '': 
                    continue
                alloc_id = int(form.alloc_id.data)
                form_dict[str(row.id)] = (alloc_id,row.comments.data)

            orders_dict= gl_vars['orders_dict']
            for k, v in form_dict.items():
                val, comm = v
                order = Orders.query.filter_by(ordernum=orders_dict[k]).first()
                order.alloc_id = val
                order.remarks2 = comm
                order.allocated = True
                order.date = datetime.now()
                db.session.commit()

    if request.method == 'GET' :
            rows= {}
            for order in Orders:
                row = form.rows.append_entry()
                rows[row.name] = order.ordernum
            gl_vars['orders_dict'] = rows