pts/modules/universal_table/index3.html.erb

<style>
  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{

    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 {
    float: left;
    margin: 0;
        color: #6a3906;
    font-weight: bold;
  }
  .universal-table-index.table td{
    padding: 15px 18px;
  }
  .universal-table-index thead th:last-child .dropdown-menu {
    left: auto;
    right: 0;
  }
  /* .universal-table-index tbody {
     counter-reset: item;
  } */
  .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 " action="{{url}}" method="get">
<table class="table table-hover table-striped universal-table-index universal-table-index3">
  <div class="theadsearch2 moveyear">  </div>
  <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 searchable-columns" data-list="searchable-columns" data-level="0">
      <div class="{{col-class}} sortclass">
        <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>{{table-name}}</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}}"></i></a>
        <div class="universal-th-text {{title-class}}">{{title}}</div>
        <div class="dropdown universal-dropdown {{search}}">
          <button class="btn btn-sm" id="dLabel" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
            <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>
</form>
<div>{{total_entries}}</div>
<div>{{export_button}}</div>
{{pagination_goes_here}}
<script>
$(function() {

    function moveSortClassToYear() {
        // 選取目標
        var $target = $('.searchable-columns .sortclass').first();
        var $submitBtn = $('.submit-btn-wrap'); // 選取要複製的按鈕
        var $container = $('.moveyear');

        if ($container.length > 0) {
            
            // 1. 移動 .sortclass (原本的功能)
            if ($target.length > 0) {
                $target.appendTo($container);
                console.log('已成功將 .sortclass 移入 .moveyear');
            }

            // 2. 複製 .submit-btn-wrap 到 .moveyear 的最後面
            if ($submitBtn.length > 0) {
                // 使用 .clone(true) 可以連同該按鈕原本綁定的事件一起複製
                $submitBtn.clone(true).appendTo($container);
                console.log('已成功複製 .submit-btn-wrap 到 .moveyear');
            }
        }
    }

    // 延遲執行，確保動態內容已載入
    setTimeout(moveSortClassToYear, 600);
});
</script>