如何在第一次隐藏 DataTables 标题中的排序图标答案

【问题标题】：how to hide sorting icon from DataTables header at first time如何在第一次隐藏 DataTables 标题中的排序图标
【发布时间】：2018-11-02 09:28:33
【问题描述】：

我想在第一次加载时隐藏数据表排序图标，当我点击数据表的标题图标时会自动显示。

我找不到解决办法

【问题讨论】：

我认为这并不容易。但如果有人有答案，这是一个很好的问题。

标签： jquery css datatables

【解决方案1】：

只需从 initComplete 上的数据表中删除排序类，即

排序_asc
排序

例如

<script type="text/javascript">
//Datatable for search and sorting
    var table = $('.table').DataTable({
        "fixedHeader": false,
        "lengthChange": false,
        "bPaginate": false,
        "responsive": true,
        "autoWidth": false,
        "scrollY": "300px",
        "scrollCollapse": true,
        "paging": false,

        initComplete: function (settings, json) {
            this.api().columns().header().each(function (th) {
                $(th).removeClass("sorting_asc");
                $(th).removeClass("sorting");
            }
         )
        },
    });

这是第一次禁用表格中的所有排序图标，点击标题后将允许排序并显示所有图标

谢谢

【讨论】：

【解决方案2】：

你不能在纯 CSS 中。图标外观基于插件注入的类，而不是一些 CSS 逻辑。但是您可以为每个标题添加一个推翻类定义：

table.dataTable thead .sorting_pre {
  background-image: none;
}

var table = $('#example').DataTable({
  initComplete: function() {
    this.api().columns().header().each(function(th) {
      $(th).addClass('sorting_pre')
    })
  }
})

然后在用户对表格进行排序/排序时第一次删除该类：

table.one('order.dt', function() {
  table.columns().header().each(function(th) {
    $(th).removeClass('sorting_pre')
  })
})

就像在这个演示中一样 -> http://jsfiddle.net/wvo98420/

注意：此解决方案针对 DT 最新/1.10.19。使用样式插件（即引导程序等）时，可能需要不同的步骤。

【讨论】：

【解决方案3】：

你可以在 jquery 中做到这一点。

假设结构是

    $('.header').on('click',function(){
       $('.icons').removeClass('hide-class');
    });

 .hide-class{
       display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
      <ul>header (click here)
        <li class="icons hide-class">Name</li>
        <li class="icons hide-class">Address</li>
      </ul>
    </div>

【讨论】：

我知道机制，我该如何存档它，但我无法获得那个数据表排序图标，如果我能在上面做任何事情就得到它