asiaH2/modules/member/show.html.erb

<div class="show-member" module="member">
  <div class="row">
    <div class="member-pic col-xs-3">
      <img src="{{image}}" alt="{{name}}" title="{{name}}" width="100%">
    </div>
    <div class="member-data col-xs-9">
      <table class="table table-striped">
        <div data-list="profile_data" data-level="0">
          <tr><th class="{{title_class}}">{{title}}</th><td class="{{value_class}}">{{value}}</td></tr>
        </div>
      </table>
    </div>
  </div>
  <ul class="member-plugins nav nav-pills" role="tablist" data-list="plugins" data-level="0">
    <li class="{{plugin_class}}"><a href="#{{plugin_name}}" role="tab" data-toggle="tab" title="{{plugin_title}}">{{plugin_title}}</a></li>
  </ul>
  <div class="tab-content" data-list="plugins" data-level="0">
    <div class="tab-pane {{plugin_class}}" id="{{plugin_name}}">

      <div class="info" data-list="plugin_data_intro" data-level="1">
        {{data_intro_title}}
      </div>

      <table class="table table-hover table-striped dt-responsive {{complete_display}}">
        <thead>
          <tr data-list="pd_title" data-level="1">
            <th>{{plugin_data_title}}</th>
          </tr>
        </thead>
        <tbody data-level="1" data-list="plugin_datas">
          <tr data-level="2" data-list="pd_datas">
            <td>{{data_title}}</td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</div>
<script>
  (function() {
    // Adding class on first element
    function memberPlugins() {
      var plugins = document.querySelector('.member-plugins');
        if( plugins.children.length === 0 ) {
            return;
        }
        if( plugins.querySelectorAll('.member-plugins .active').length === 0 ) {
            var navs = plugins.querySelectorAll('.member-plugins > li'),
                contents = plugins.nextElementSibling.children[0];
            navs[0].className += ' ' + 'active';
            contents.className += ' ' + 'active';
        }
    }
    memberPlugins();
  }())
  for(var i = 0;i < $('.show-member img').length ; i++){
	if($('.show-member img').eq(i).attr('alt')=="" ){
		$('.show-member img').eq(i).attr('alt','noname');
		$('.show-member img').eq(i).attr('title','noname');
	}
  }
  for(var i = 0;i < $('.show-member table').length ; i++){
	if($('.show-member table').eq(i).html().trim().replace('&nbsp;','')=="" )
		$('.show-member table').eq(i).html('please write down something!');
  }
  for(var i = 0;i < $('.tab-content table').length ; i++){
    $('.tab-content table:eq(' + i + ')').attr('id', 'table' + i);
}
for ( var i = 0; i < $('tr[data-list="pd_title"]').length ; i++ ) {
	if( $('tr[data-list="pd_title"]').eq(i).children('th').length > 2 ) {
    var th = $('tr[data-list="pd_title"]').eq(i).children('th');
    for ( var q = 2; q < th.length ; q++ ) {
      th.eq(q).addClass('desktop');
    }
  }
}

$('.tab-pane 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,
      order: false,
      autoWidth: false
    });
  }
});;
</script>