AsiaH9/modules/personal_course/index.html.erb

<table class="table table-hover table-striped projects-index courses-index dt-responsive">
  <caption><h3>{{widget-title}}</h3></caption>
  <thead>
    <tr>
      <th class="col-md-1">{{th_year}}</th>
      <th class="col-md-6">{{th_course_title}}</th>
      <th class="col-md-3">{{th_course_category}}</th>
      <th class="col-md-1 min-tablet">{{th_course_semester}}</th>
      <th class="col-md-1 min-tablet-l">{{th_authors}}</th>
    </tr>
  </thead>
  <tbody data-level="0" data-list="courses">
    <tr>
      <td>{{year}}</td>
      <td><a href="{{link_to_show}}">{{title}}</a></td>
      <td>{{category}}</td>
      <td>{{semester}}</td>
      <td>{{authors}}</td>
    </tr>
  </tbody>
</table>
{{pagination_goes_here}}

<script>
$('table.courses-index').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>