  <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...') }}</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">
 require(['Abilian', 'jquery', 'jquery.dataTables'],
         function(Abilian, $) {

             function initDatatable() {
                 var tbl_options = {{ datatable_options|tojson|safe }},
                     tbl = $("#listing_{{ view.name }}").dataTable(tbl_options);

                 /* 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;
                 }
             }

             Abilian.fn.onAppInit(initDatatable)
         }
   );
  </script>
  {%- enddeferJS %}

<div style="clear: both;"></div>
