orbit_demo_new_old/modules/universal_table/index5.html.erb

<style>
.combined-search-inner{
   border: 1px solid #d5d5d5;
    background: #f6f6f6;
    padding: 0.5em;
    border-radius: 0.5em;
}
.input-group2{
    display: flex;
    justify-content: space-between;
}
.more-btn {
    background-color: #c93a42;
    color: #fff;
    font-size: 1rem;
    border-radius: 5px;
    &:hover{
      color:#fff!important;
    }
}
#combined-search{
    max-width:250px;
    flex: 0 0 75%;
    width: auto;
    display: block;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
  tr>th:first-child{
    display: none!important;
  }
  tr>td:first-child{
    display: none!important;
  }
  .universal-table-index3{
    table-layout: auto!important;
  }
  .universal-dropdown-menu {
    padding: 15px 18px;
    white-space: nowrap;
  }
  .universal-th-text{
    white-space: pre!important;
    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;
  }
  .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 {
    margin-left: 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>
<form class="form-inline universal-form-inline universal-form-inline5 universal-index5" action="{{url}}" method="get">
<table class="table table-hover table-striped universal-table-index universal-table-index3">


  <div class="searchbtn">
    <div class="ken-click">
      <a href="{{url}}" class="universal-btn btn btn-info  {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
      <button class="searchbtn2 btn-primary " title="查詢" class="btn btn-default"><i class="fa-solid fa-magnifying-glass"></i>查詢</button>
    </div>
  </div>
  <div class="searchbox">
  <div class="theadsearch2">
    <div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
      <div class="{{col-class}}">
        <a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
        <div class="universal-th-text {{title-class}}">{{title}}</div>
        <div class="dropdown universal-dropdown {{search}}">
          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
            <div class="form-group">
              {{form-field}}
              <input type="hidden" value="{{key}}" name="column" >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-2 col-xs-12 submit-btn-wrap">
      <button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
    </div>
  </div>
  </div>
  <caption>
    <h3 class="i-annc__page-title"><span>{{table-name}}</span></h3>
  </caption>


  <thead class="theadsearch">
    <tr data-list="head-columns" data-level="0">
      <th class="col-ken">
        <a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
          <div class="universal-th-text {{title-class}}">{{title}}</div>
        <div class="dropdown universal-dropdown {{search}}">
          <button class="btn btn-md" 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">送出<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
            </form>
          </div>
        </div>
      </th>
    </tr>
  </thead>
  <tbody data-level="0" data-list="rows" class="kentbody">
    <tr class="tdken" data-level="1" data-list="columns">
      <td>{{text}}</td>
    </tr>
  </tbody>
</table>
</form>
<div>{{total_entries}}</div>
<div>{{export_button}}</div>
{{pagination_goes_here}}
<script>



$(document).ready(function(){
  $('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
  $('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
  $(".universal-th-text").append(" :");
  # $(".tdken").append('<i class="fa-solid fa-thumbtack"></i>');
  $('.voice-player').each(function () {
    // 取得 <i> 元素
    const icon = $(this).find('i')[0];
    if (icon) {
        // 取得 <i> 前面的節點
        const prevNode = icon.previousSibling;
        // 如果是文字節點，則移除
        if (prevNode && prevNode.nodeType === 3) {
            prevNode.remove();
        }
    }
});
});


</script>