proj-iott/modules/universal_table/index.html.erb

  <style>
    .universal-th-text{
      overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    white-space: normal;
}
    .universal-dropdown-menu {
      padding: 15px 18px;
      white-space: nowrap;
    }
    .universal-th-text  {
      padding: 8px 0 0 0;
      display: inline;
      margin-right: 5px;
      color: #888;
    }
    .universal-dropdown {
      display: inline-block;
    }
    a.universal-btn {
      vertical-align: baseline;
      color: #fff;
    }
    .universal-table-index {
      border-collapse: collapse;
      border: 1px solid #eee;
      table-layout: fixed;
      word-wrap: break-word;
    }
    .universal-table-index h3 {
      float: left;
      margin: 0;
    }
    .universal-table-index.table td{
      padding: 15px 18px;
    }
    .universal-table-index thead th:last-child .dropdown-menu {
      left: auto;
      right: 0;
    }
    .universal-th-icon {
      border: 1px solid #eee;
      padding: 5px 8px;
      margin-right: 5px;
      color: gray;
      cursor: pointer;
    }
    .universal-th-text.no-sort.no-search {
      position: relative;
      top: -6px;
    }
    .image-preview {
      width: 120px;
    }
  </style>
  <table class="table table-hover table-striped universal-table-index" style="position:relative;">
        <div class="searchbtn ken-click"><div class="searchbtn2"><i class="fa-solid fa-magnifying-glass"></i>查詢</div></div>
        <div class="searchbox">
          <thead class="theadsearch2">
              <tr data-list="head-columns" data-level="0">
                <th class="col-sm-3">
                  <div class="universal-th-text {{title-class}}">{{title}}</div>

                    <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
                    <div class="dropdown universal-dropdown {{search}}">
                      <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-search"></i>
                        <span class="caret"></span>
                      </button>
                      <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
                        <form class="form-inline universal-form-inline" action="{{url}}" method="get">
                          <div class="form-group">
                            {{form-field}}
                            <input type="hidden" value="{{key}}" name="column" >
                          </div>
                          <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
                        </form>
                      </div>
                    </div>
                </th>
              </tr>
            </thead></diV>
    <caption>
      <h3>{{table-name}}</h3>
      <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
    </caption>
    <thead class="theadsearch">
      <tr data-list="head-columns" data-level="0">
        <th class="col-sm-3">
          <div class="universal-th-text {{title-class}}">{{title}}</div>

            <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
            <div class="dropdown universal-dropdown {{search}}">
              <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-search"></i>
                <span class="caret"></span>
              </button>
              <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
                <form class="form-inline universal-form-inline" action="{{url}}" method="get">
                  <div class="form-group">
                    {{form-field}}
                    <input type="hidden" value="{{key}}" name="column" >
                  </div>
                  <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
                </form>
              </div>
            </div>
        </th>
      </tr>
    </thead>
    <tbody data-level="0" data-list="rows">
      <tr data-level="1" data-list="columns">
        <td>{{text}}</td>
      </tr>
    </tbody>
  </table>
  <div>{{total_entries}}</div>
  <div>{{export_button}}</div>
  {{pagination_goes_here}}
<script>
  // $('.universal-table-index th').eq(1).attr('class', 'desktop tablet-l tablet-p');
  // $('.universal-table-index th').filter(':gt(1)').attr('class', 'desktop tablet-l tablet-p mobile-l');
  // $('.universal-table-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,
  //       order: false,
  //       autoWidth: false,
  //       responsive: true
  //     });
  //   }
  // });
  $(document).ready(function(){
    $("tr>th:first-child").removeClass("col-sm-3");
    $("tr>th:first-child").addClass("col-sm-4");
    $("tr>th:nth-child(2)").removeClass("col-sm-3");
    $("tr>th:nth-child(2)").addClass("col-sm-2");
    $("tr>th:nth-child(3)").removeClass("col-sm-3");
    $("tr>th:nth-child(3)").addClass("col-sm-2");
    $("tr>th:nth-child(4)").removeClass("col-sm-3");
    $("tr>th:nth-child(4)").addClass("col-sm-2");
    $("tr>th:nth-child(5)").removeClass("col-sm-3");
    $("tr>th:nth-child(5)").addClass("col-sm-2");
  });
</script>
<style>
  .universal-table-index.dtr-inline.collapsed td.dtr-control{
    vertical-align: middle;
  }
</style>