<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>
    <link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>

    <link href="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.css"
          rel="stylesheet" type="text/css"/>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.1/jquery.dataTables.yadcf.css"
          rel="stylesheet" type="text/css"/>


    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.1/jquery.dataTables.yadcf.js"></script>
    <title>Table View</title>
    <style>
        .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
            color: blue !important;
        }

        .clicked {
            background-color: red;
        }

        td {
            max-width: 100px;
            min-width: 20px;
            white-space: pre-wrap;
            word-wrap: break-word;
            table-layout: auto;
        }

    </style>

</head>
<body>

<div> Toggle column:
    {% for key in data.columns %}
        <a onmouseover="" style="cursor: pointer;" class="toggle-vis btn btn-primary"
           data-column="{{ loop.index - 1 }}">{{ key }}</a>
    {% endfor %}
</div>
<br/>
<table id="table" class="table table-striped table-condensed " cellspacing="0" cellpadding="1">

</table>

<br/>
<script>
    {% autoescape off %}
    var json_data = {{ data.data|tojson|safe}};
    {% endautoescape %}

    $(document).ready(function () {
        $('a.toggle-vis').on('click', function (e) {
            e.preventDefault();
            $(this).toggleClass("clicked");
            // Get the column API object
            var column = table.column($(this).attr('data-column'));
            // Toggle the visibility
            column.visible(!column.visible());
        });



        var table = $('table').DataTable({
            "data": json_data,
            "autoWidth": false,

            columns: [
                {% for key in data.columns %}
                    {% if key =='genes' %}
                        {title: "{{ key }}<br/>", width: "50px"},
                    {% elif key =='term_name' %}
                        {title: "{{ key }}<br/>", width: "50px"},
                    {% elif key =='db' %}
                        {title: "{{ key }}<br/>", width: "50px"},
                    {% else %}
                        {title: "{{ key }}<br/>", width: "10px"},
                    {% endif %}

                    {#                {title: "{{ key }}"},#}
                {% endfor %}
            ]
        });

        yadcf.init(table, {{data.filters|tojson}});

    });
</script>
</body>
</html>