fancyTable分页首次点击页码表格消失二次点击才显示如何解决

两个问题导致分页首次点击时表格隐藏：

1. 表格DOM结构畸形：Blade循环位置写反了，<tr>开标签和</tr>闭标签都放在了循环外面，最终渲染出来的整个tbody里只有1个tr元素，所有数据的td全部堆在这一个tr内部。fancyTable初始化时统计总行数、计算分页偏移量拿到的都是错误值，第一次点非首页页码时按照错误索引匹配不到对应行，就会把所有内容隐藏；第二次点击触发插件重新遍历DOM才会修正计数，显示对应内容。
2. 脚本加载顺序有隐患：jQuery、fancyTable的引用放在了表格代码后方，如果初始化代码写在这两个依赖之前，哪怕加了$(document).ready也可能出现插件未定义的偶发问题。

另外把Blade的@if/@foreach控制语句写在HTML注释<!-- -->里的写法非常容易搞混标签嵌套关系，这次的结构错误就是这种写法直接导致的——虽然Blade引擎能正常解析注释里的指令，但排查嵌套问题时很容易看错标签范围。

• 调整Blade模板循环位置，保证单条数据对应单个独立tr，生成合法的表格结构：

<table style="margin-top: 20px;" id="tabelaAssistencia">
  <thead>
    <tr>
      <th scope="column" style="text-align:center">Entidade</th>
      <th scope="column" style="text-align:center" data-sortas="numeric">Numero</th>
    </tr>
  </thead>
  <tbody>
    @if (count($results) > 0)
      @foreach ($results as $r)
      <tr>
        <td class="active-apply">{{ $r->entidade }}</td>
        <td class="active-apply">{{ $r->folha_obra_numero}}</td>
      </tr>
      @endforeach
    @endif
  </tbody>
</table>

• 调整脚本加载顺序，先加载依赖库，再执行初始化逻辑：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.fancytable@1.0.20/dist/fancyTable.min.js"></script>
<script>
$(document).ready(function() {
  $("#tabelaAssistencia").fancyTable({
    sortColumn: 1,
    sortOrder: 'asc', 
    sortable: true,
    pagination: true, 
    searchable: true,
    paginationClass: "btn btn-light",
    paginationClassActive: "btn-active",
    perPage: 15,
    inputStyle: "color:black!important;font-size:14px",
    inputPlaceholder: "Introduza o que pretende procurar..."
  });
});
</script>

修改完成后清空浏览器缓存刷新页面，分页点击即可正常响应，不会再出现首次点击隐藏的问题。

内容的提问来源于stack exchange，提问作者Cátia Matos