The Question Datatable Widget

gistfile1.txt

  <section id='item_datatable'>
      <table class="display" width="100%">
        <thead>
          <td>Title</td>
          <td>Stem</td>
          <td>Tags</td>
          <td>Assigned To</td>
        </thead>
        <tbody>
            {{ entries from="/questions" }}
            <tr>
              <td>
                <a class='hotlink' href='{{ edit_url }}'>
                  {{ title }}
                </a>
              </td>
              <td>
                {{ stem }}
                  {{ if type == "text" }}
                    {{ text | strip_tags:p | truncate:50:... }}
                  {{ /if }}
                {{ /stem }}
              </td>
              <td data-search="{{ tags_raw | option_list }}">
                {{ tags }}
                <span class='label tag'>
                  {{ title }}
                </span>
                {{ /tags }}
              </td>
              <td data-search="{{ relate:assigned_to }}{{first_name}} {{ last_name }}|{{ /relate:assigned_to }}">
                {{ relate:assigned_to }}
                  <span class='label user'>
                    {{ first_name }} {{ last_name }}
                  </span>
                {{ /relate:assigned_to }}
              </td>
            </tr>
          {{ /entries}}
        </tbody>
      </table>
  </section>

<script>
  window.__columns = [];
  var itemfilters = function() {
    $('#item_datatable').closest('.widget').removeClass('half').addClass('full');
    $('#item_datatable table').dataTable( {
      initComplete: function () {
          this.api().columns().every( function () {
              var column = this;
              if (column[0] < 2) {
                return false;
              }
              console.log("column", this)
              __columns.push(this)
              var select = $('<select><option value=""></option></select><br/>')
                  .prependTo( $(column.header()) )
                  .on( 'change', function () {
                      console.log($(this).val());
                      var val = $.fn.dataTable.util.escapeRegex(
                          $(this).val()
                      );

                      column
                          .search( val ? '^'+val+'$' : '', true, false )
                          .draw();
                  } );

              column.cache('search').map(function(srch) {
                return srch.split('|');
              }).flatten().unique().filter(function(i) { return i.trim() !== '' }).sort().each( function ( d, j ) {
                  select.append( '<option value="'+d+'">'+d+'</option>' )
              } );
          } );
      }
    } );
  };
  window.onload = itemfilters;
</script>