samedi 20 janvier 2018

Using SQLAlchemy-DataTables and jquery to display a table with a multi-select checkbox

I am trying to use SQLAlchemy-DataTables to build a table with server-side processing that has a column with multi-select checkbox capability.

Here is my flask python code:

@app.route('/myiocs', methods=['GET'])
@login_required
def myiocs():
    title = "My IOCs"
    return render_template('myiocs.html', **locals())

@app.route('/myiocsdata', methods=['GET'])
@login_required
def myiocsdata():
    """Return server side data."""

    # defining columns
    columns = [
        ColumnDT(sparkDB.ioc),
        ColumnDT(sparkDB.ioc_type),
        ColumnDT(sparkDB.active_mon),
        ColumnDT(sparkDB.lifecycle_mon),
        ColumnDT(sparkDB.added_by),
        ColumnDT(sparkDB.tags),
    ]
    query = sparkDB.query.filter_by(organization=current_user.organization).order_by(sparkDB.added_on)
    params = request.args.to_dict()
    rowTable = DataTables(params, query, columns)

    return jsonify(convertToUTF8(rowTable.output_result()))

Here is my table structure in the html:

            <div class="row-fluid">
                <form id="myiocs-frm" action="/myiocs" method="POST">
                    <table id="sparkdb" class="table table-striped table-bordered checkboxes-select" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th></th>
                                <th>IOC</th>
                                <th>IOC Type</th>
                                <th>Active Mon</th>
                                <th>Lifecycle Mon</th>
                                <th>Added By</th>
                                <th>Tags</th>
                            </tr>
                        </thead>
                    </table>
                </form>
            </div>

Here is my javascript that should help render the datatable:

    $(document).ready(function() {
        var table = $('#sparkdb').DataTable({
            "processing": true,
            "serverSide": true, 
            "ajax": "",
            'columnDefs': [ 
                {               
                    'targets': 0,
                    'checkboxes': {
                        'selectRow': true
                    }           
                }               
            ],              
            'select': { 
                    'style': 'multi'
                },          
            'order': [[1, 'asc']]
        });                         
       $('#myiocs-frm').on('submit', function(e){
          var form = this;  

          var rows_selected = table.column(0).checkboxes.selected();

          // Iterate over all selected checkboxes
          $.each(rows_selected, function(index, rowId){
             // Create a hidden element 
             $(form).append(
                 $('<input>')
                    .attr('type', 'hidden')
                    .attr('name', 'id[]')
                    .val(rowId)
             );
            });
        });
    });

When I attempt to run the code I get back the following error as an alert from the datatables js library:

DataTables warning: table id=sparkdb - Requested unknown parameter '6' for row 0, column 6. For more information about this error, please see http://datatables.net/tn/4

After dismissing the error, the table displays, however there is no checkbox and the columns are misaligned. Any help pointing me in the right direction would be greatly appreciated!




Aucun commentaire:

Enregistrer un commentaire