asiaH2/modules/personal_activity/index_search1.html.erb

<script type="text/javascript">
$( ".selectbox" ).ready(function() {
  var option_len = $(".search-widget option").length
  for (var i=0;i<option_len;i++){
    if($(".search-widget option").eq(i).data('selected')=="selected"){
      $(".search-widget option").eq(i).attr('selected','selected')
    }
  }
});
</script>

<div class="search-widget personal-activities">
  <h3>{{widget-title}}</h3>
  <form action="{{url}}"  method="get">
  <label for="selectbox">{{select_text}}</label>
   <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
    <option value={{choice_value}} data-selected='{{choice_select}}' >
    {{choice_show}}</option>
  </select>
  <label for="keywords">{{search_text}}</label>
  <input name="keywords" id="keywords" placeholder="Keywords" type="text" value="{{search_value}}" title="keywords">
  <button>Go</button>
  <a id="filter" style="" href="{{url}}">Clear</a>
  </form>
 </div>

<table class="table table-hover table-striped projects-index activities-index dt-responsive nowrap">
  <caption><h3>{{widget-title}}</h3></caption>
  <thead>
    <tr>
      <th class="col-md-1">{{year}}</th>
      <th class="col-md-2">{{activity_name}}</th>
      <th class="col-md-1">{{activity_organizer}}</th>
      <th class="col-md-2 min-tablet">{{activity_area}}</th>
      <th class="col-md-2 min-tablet-l">{{activity_start_date}}</th>
      <th class="col-md-2 min-tablet-l">{{activity_end_date}}</th>
      <th class="col-md-2 min-tablet-l">{{note}}</th>
    </tr>
  </thead>
  <tbody data-level="0" data-list="activities">
    <tr>
      <td>{{year}}</td>
      <td><a href="{{link_to_show}}">{{activity_name}}</a></td>
      <td>{{activity_organizer}}</td>
      <td>{{activity_area}}</td>
      <td>{{activity_start_date}}</td>
      <td>{{activity_end_date}}</td>
      <td>{{note}}</td>
    </tr>
  </tbody>
</table>
{{pagination_goes_here}}

<script>
$('table.activities-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>