<!DOCTYPE html> <html>
<head>
  {% load static %}
  {% load crispy_forms_tags %}
  {% load custom_tags %}
  {% include "chlamdb/header.html" %}
</head>

<body>
<div class="container-fluid" id="main_container">
  <div class="row">
    <div id="wrapper">
      <div id="page-content-wrapper">
        {% include "chlamdb/comparison_header.html" %}
        <div class="row">
          <div class="col-lg-12">
            <table id="pfam_table" class="table table-striped">
              <thead>
                <tr>
                  <th></th>
                  {% for header in table_headers %}
                    <th>{{ header }}</th>
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for index, row in table_data.iterrows %}
                  <tr>
                    <td>{{forloop.counter}}</td>
                    {% for attrname in table_data_accessors%}
                      <td>{{row|keyvalue:attrname|safe}}</td>
                    {% endfor %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>

  $(document).ready(function() {
    $('#pfam_table').DataTable( {
      select: {
          items: 'row',
          style: 'os',
          headerCheckbox: true,
      },
      columnDefs: [
          {
              orderable: false,
              render: DataTable.render.select(),
              target: 0
          }
      ],
      dom: 'lBfrtip',
      buttons: [
          {
              extend: 'colvis',
              columns: ':not(.noVis)',
          },
          {
              extend: 'excel',
              title: 'plast_refseq'
          },
          {
              extend: 'csv',
              title: 'plast_refseq'
          }
      ],

      "ordering": true,
      "info":     false,
      } );
  } );

</script>

</body>
</html>
