как скрыть значок сортировки из заголовка DataTables в первый раз

Question

Я хочу, чтобы при загрузке скрывался значок сортировки данных, когда я нажимаю на значок заголовка, который будет отображаться автоматически.

Я не могу найти решение этого

Answer 1

Вы не можете в чистом 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 latest / 1.10.19. При использовании плагинов для стиля (например, начальной загрузки и т. Д.) Могут потребоваться другие шаги.

Answer 2

просто удалить класс сортировки из таблицы данных на initComplete , то есть

sorting_asc
сортировка

Ex.

<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");
            }
         )
        },
    });       

Это первый раз, когда иконка сортировки отключена из таблицы, после нажатия на заголовок она разрешит сортировку и покажет все иконки

Спасибо

Answer 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>