添加和删​​除对表格进行排序的元素类

Posted 2023-05-08

【中文标题】添加和删​​除对表格进行排序的元素类

【英文标题】：Adding and removing an element class that sorts a table

【发布时间】：2022-01-17 22:16:22

【问题描述】：

我有一张可以通过图标排序的表格

图标按升序和降序排列

下面的代码是通过inspect elements得到的

<th id="thCliente" class="sorting_desc" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 336.984px;" aria-sort="descending" aria-label="Cliente: Ordenar colunas de forma ascendente">Cliente</th> 

我需要在加载页面时总是在 sort_asc - 升序排序

如何使用 javascript 和/或 jquery 执行此操作？

订购图标的图像

出现在检查元素中的代码

尝试

$("#thCliente").removeClass().addClass("sorting_asc:before")

表格代码：

<div class="col-sm-12">
   <div class="dataTables_scroll">
      <div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
         <div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1119px; padding-right: 0px;">
            <table class="table table-sm font-size-12 table-striped nowrap dataTable no-footer" role="grid" style="margin-left: 0px; width: 1119px;">
               <thead>
                  <tr role="row">
                     <th style="font: small-caption; width: 18.1406px;" class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" aria-label="
                        : Ordenar colunas de forma ascendente">
                        <input type="checkbox" id="checkAll" onclick="Checando(this)" title="Marcar Todos">
                     </th>
                     <th title="Desautorizar" class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 11.4688px;" aria-label="D: Ordenar colunas de forma ascendente">D</th>
                     <th id="thCliente" class="sorting_asc" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 336.984px;" aria-sort="ascending" aria-label="Cliente: Ordenar colunas de forma descendente">Cliente</th>
                     <th class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 103.438px;" aria-label="Serviço: Ordenar colunas de forma ascendente">Serviço</th>
                     <th title="Relatório de Faturamento" class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 48.5469px;" aria-label="Rel. Fat.: Ordenar colunas de forma ascendente">Rel. Fat.</th>
                     <th class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 80.9062px;" aria-label="Competência: Ordenar colunas de forma ascendente">Competência</th>
                     <th class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 74.0625px;" aria-label="Vencimento: Ordenar colunas de forma ascendente">Vencimento</th>
                     <th class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 50.5312px;" aria-label="Entrada: Ordenar colunas de forma ascendente">Entrada</th>
                     <th class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 37.7656px;" aria-label="Saída: Ordenar colunas de forma ascendente">Saída</th>
                     <th title="Data da Autorização" class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 57.375px;" aria-label="Data Aut.: Ordenar colunas de forma ascendente">Data Aut.</th>
                     <th title="Lançamento Automático" class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 27.0156px;" aria-label="Aut.: Ordenar colunas de forma ascendente">Aut.</th>
                  </tr>
               </thead>
            </table>
         </div>
      </div>
      <div class="dataTables_scrollBody" style="position: relative; overflow: auto; max-height: 50vh; width: 100%;">
         <table id="basic-datatable" class="table table-sm font-size-12 table-striped nowrap dataTable no-footer" role="grid" aria-describedby="basic-datatable_info" style="width: 100%;">
            <thead>
               <tr role="row" style="height: 0px;">
                  <th style="font: small-caption; width: 18.1406px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">
                        <input type="checkbox" id="checkAll" onclick="Checando(this)" title="Marcar Todos">
                     </div>
                  </th>
                  <th title="Desautorizar" class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 11.4688px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">D</div>
                  </th>
                  <th id="thCliente" class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 336.984px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Cliente</div>
                  </th>
                  <th class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 103.438px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Serviço</div>
                  </th>
                  <th title="Relatório de Faturamento" class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 48.5469px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Rel. Fat.</div>
                  </th>
                  <th class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 80.9062px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Competência</div>
                  </th>
                  <th class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 74.0625px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Vencimento</div>
                  </th>
                  <th class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 50.5312px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Entrada</div>
                  </th>
                  <th class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 37.7656px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Saída</div>
                  </th>
                  <th title="Data da Autorização" class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 57.375px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Data Aut.</div>
                  </th>
                  <th title="Lançamento Automático" class="sorting" aria-controls="basic-datatable" rowspan="1" colspan="1" style="width: 27.0156px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                     <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Aut.</div>
                  </th>
               </tr>
            </thead>
            <tbody>
                
            </tbody>
         </table>
      </div>
   </div>
</div>

【问题讨论】：

我敢打赌，改变班级实际上不会对表格进行排序。你是如何创建表格的？

该表具有预设的模板定义，但我使用 Classic ASP 将数据库中的数据提供给它

如有需要，我可以贡献代码和图片。

其中一个预设模板定义几乎可以肯定是排序顺序。

我明白，但我在系统的几个区域使用同一个表，这种情况特别是通过具有特定值的选择和访问页面时排序

【参考方案1】：

根据有限的信息，我在这里猜测了一半。但在大多数情况下，该类实际上并不控制排序顺序（通常是相反的）。

在绝大多数情况下，控制排序顺序的元素上会有一个点击事件，所以你可以做什么（如果没有可以在创建表格时直接设置的属性）是什么像这样：

$('#thCliente').click();

假设该元素确实是控制排序顺序的元素。

虽然为了澄清你对如何切换班级的误解：

$('#thCliente').toggleClass('sorting_asc sorting_desc');

将切换升序和降序类。但它不会切换任何相应的aria 属性。