  <form>
    {%- if view.show_controls %}
      <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown">
          Select
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="">All</a></li>
          <li><a href="">All</a></li>
          <!-- dropdown menu links -->
        </ul>
      </div>
    {%- endif %}
    <table id="listing_{{ view.name }}" class="table table-striped table-bordered table-condensed">
      <thead>
      <tr>
        {%- if view.show_controls %}
          <th style="width: 1%;"></th>
        {%- endif %}
        {%- for col in view.columns %}
          <th style="width: {{ col.width }}%;">{{ col.label }}</th>
        {%- endfor %}
      </tr>
      </thead>

      <tbody>
        <tr><td colspan="{{ view.columns|count }}">Loading data...</td></tr>
      </tbody>

      <tfoot>
      <tr>
        {%- if view.show_controls %}
          <th></th>
        {%- endif %}
        {%- for col in view.columns %}
          <th>{{ col.label }}</th>
        {%- endfor %}
      </tr>
      </tfoot>
    </table>
  </form>

  {%- deferJS %}
  <script type="text/javascript">
    requirejs(
      ['jquery', 'jquery.dataTables'],
      function() {
        var tbl = $("#listing_{{ view.name }}").dataTable({{ datatable_options|tojson|safe }});

        /* export button: setup url args on click, to match current table filtering */
        tbl.bind('xhr', $.fn.dataTableSetExportArgs);
        $('.datatable-export').click(
          { 'table': tbl.get(0) },
          function(e) {
            var tbl = e.data.table;
            var target = $(e.target);
            var href = target.attr('href');
            var params = $.data(tbl, 'current-query-args');
            var concat_char = href.indexOf('?') == -1 ? '?' : '&';
            window.location = href + concat_char + $.param(params);
            return false;
          }
        );

        $(document).bind("keydown", keyDown);

        function keyDown(e) {
          var code = e.keyCode;
          // Note: we prevent default keyboard action
          if (code == 39) {
            $("li.next a").click();
            return false;
          } else if (code == 37) {
            $("li.prev a").click();
            return false;
          }
          return true;
        }
      });
  </script>
  {%- enddeferJS %}
    
<div style="clear: both;"></div>
