default-theme/modules/personal_research/index.html.erb

<table class="table table-hover table-striped projects-index personal-researchs  dt-responsive">
  <caption><h3>{{widget-title}}</h3></caption>
  <thead>
    <tr>
      <th class="col-md-2">{{th_year}}</th>
      <th class="col-md-3">{{th_publication_date}}</th>
      <th class="col-md-2">{{th_research_title}}</th>
      <th class="col-md-3">{{th_member}}</th>
      <th class="col-md-2">更多內容</th>
    </tr>
  </thead>
  <tbody data-level="0" data-list="researchs">
    <tr>
      <td>{{year}}</td>
      <td>{{publication_date}}</td>
      <td>{{research_title}}</td>
      <td>{{member}}</td>
      <th><a href="{{link_to_show}}">{{th_detail}}</a></th>
    </tr>
  </tbody>
</table>
{{pagination_goes_here}}

<script>
for ( var i = 0; i < $('thead th').length ; i++ ) {
	if( $('thead th').length > 2 ) {
    var th = $('thead th');
    for ( var q = 3; q < th.length ; q++ ) {
      th.eq(q).addClass('min-tablet-l');
    }
  }
}

$('table.personal-researchs').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>