Как по клику на "th"менять вид сортировки таблицы?

Question

[Kolya Vantukh]

Есть таблица з заголовками . Данные к таблице беруться из бд

<table id="table" class="table table-bordered table-hover table-condensed dataTable" role="grid" >
  <thead>
     <tr role="row">
       <th class="">Id</th>
          <th class = "sortable sorting" data-sort = "agence" data-sopref = "a">
              <div class = "sort-grid">
                   <div><span class = "datatable-column-heading">Réceptif</span></div>
                  <div><i class = "fa fa-sort"></i></div>
               </div>
           </th>
          
        <th class = "sortable sorting" data-sort = "Signataire" data-sopref = "a">
              <div class = "sort-grid">
                   <div><span class = "datatable-column-heading">Signataire</span></div>
                  <div><i class = "fa fa-sort"></i></div>
               </div>
           </th>
                  
        <th class = "sortable sorting" data-sort = "email" data-sopref = "a">
              <div class = "sort-grid">
                   <div><span class = "datatable-column-heading">Email</span></div>
                  <div><i class = "fa fa-sort"></i></div>
               </div>
           </th>

Как сделать , чтобы при клике на соответствующий заголовок таблица сортировалась по названии этого заголовка ? Помогите плиз . Мозги уже кипят

Comments

[Сергей Горностаев]

Есть несколько способов. Что вы пробовали сделать?

[romy4]

data-sort = "Signataire" пробелы между ключём и значением недопустимы!

Answer 1

[Алекс Глебов]

https://datatables.net/

Answer 2

[zhiga]

Мне по душе больше bootstrap-table.
Настраивать внешний вид легче, да и редактирование бесплатно и с запросами на серверную сторону легче разобраться