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!

Answer 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/