Hide and show columns dynamically?

mccloud

I need to dynamically hide and show columns, and found this example under the "Datatables Examples", but how do I merge it into the code, which was generated by the Editor generator?

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

My code generated from the Datatables Editor, (.js table shown below)

/*
 * Editor client script for DB table expert
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.expert.php',
        table: '#expert',
        fields: [
            {
                "label": "Evaluator:",
                "name": "evaluator",
                "type": "select",
                "options": [
                    "E1",
                    "E2",
                                         "TP1",
                                         "TP2",
                                         "TP3",
                                         "TP4",
                                         "TP5",
                                         "TP6"
                ]
            },

allan

I would actually suggest that you use the column visibility buttons (colvis) if you aren't sure how to call the API methods.

Allan