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

Question

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": "{{ url_for('myiocsdata') }}",
            '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!

K Thorngren · Accepted Answer · 2018-01-20 23:36:56Z

1

You have 7 columns but are returning only 6. The error:

Requested unknown parameter '6' for row 0, column 6

Is basically saying that there is no data for column 7. You will need to return a blank for your checkbox column. Something like this:

columns = [
    "",
    ColumnDT(sparkDB.ioc),
    ColumnDT(sparkDB.ioc_type),
    ColumnDT(sparkDB.active_mon),
    ColumnDT(sparkDB.lifecycle_mon),
    ColumnDT(sparkDB.added_by),
    ColumnDT(sparkDB.tags),
]

The error is stopping the Datatables init process causing the checkboxes to not show. It looks like you are using Gyrocode Checkboxes plugin. I assume you are loading the include files for the plugin: https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

answered Jan 20, 2018 at 23:36

K Thorngren

5484 silver badges10 bronze badges

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

3 Comments

Kelsey Britton Over a year ago

Thank you for the response! I added in the blank in my flask app and I am receiving a different error now. DataTables warning: table id=sparkdb - 'str' object has no attribute 'sqla_expr' I think you're right about defining a value in the columns list variable, but I'm not sure it likes the empty string.

K Thorngren Over a year ago

I'm not sure what your Flask function is doing or what is returned in rowTable = DataTables(params, query, columns) - arrays or objects?. Initially I thought ColumnDT was used to build the column definition for Datatables but maybe not. If you are returning an array of objects then use columns.data to define your columns and remove the "" I suggested above. Using objects will allow you to define the checkbox column without having to return data for it.

K Thorngren Over a year ago

Also note the known limitations of the jQuery Datatables Checkboxes library:

Column containing checkboxes must have unique data. Using columns.data option set to null for the column containing checkboxes will result in unexpected behavior.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related