<div class="i-annc  index-announcement-16 {{display}}">
  <h3 class="i-annc__page-title">{{page-title}}</h3>
  <table class="i-annc__table  table  table-striped dt-responsive nowrap">
    <thead>
      <tr>
        <th class="i-annc__th  i-annc__th--date all" id='date'>{{date-head}}</th>
        <th class="i-annc__th  i-annc__th--title all" id='title'>{{title-head}}</th>
        <th class="i-annc__th  i-annc__th--links min-tablet" id='links'>{{link-head}}</th>
        <th class="i-annc__th  i-annc__th--files min-tablet" id='files'>{{file-head}}</th>
      </tr>
    </thead>
    <tbody data-level="0" data-list="announcements">
        <tr>
          <td class="i-annc__postdate" date-format="%Y-%m-%d" headers='date'>{{postdate}}</td>
          <td class="i-annc__content" headers='title'>
            <span class="i-annc__status-wrap" data-list="statuses" data-level="1">
              <span class="i-annc__status label status {{status-class}}">{{status}}</span>
            </span>
            <a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
          </td>
          <td class="i-annc__links" headers='links'>
            <ul data-list="bulletin_links" data-level="1">
              <li>
                <a class="i-annc__title"  href="{{link_url}}">{{link_title}}</a>
              </li>
            </ul>
          </td>
          <td class="i-annc__files" headers='files'>
            <ul data-list="bulletin_files" data-level="1">
              <li>
                <a class="i-annc__title"  href="{{file_url}}">{{file_title}}</a>
              </li>
            </ul>
          </td>
        </tr>
    </tbody>
  </table>
</div>
{{pagination_goes_here}}

<script>
$('.i-annc__table').each(function(){
  if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
    $(this).DataTable({
      searching: false,
      paging:   false,
      ordering: false,
      info:     false,
      autoWidth: false
    });
  }
});;
</script>