复杂标题的排序和搜索问题答案

【问题标题】：Sorting and searching issue with complex header复杂标题的排序和搜索问题
【发布时间】：2015-12-08 03:14:38
【问题描述】：

我有以下表格标记：

<table class="table listagem-dados filtering-col table-bordered table-striped responsive" cellspacing="0" width="100%" summary="Esta tabela exibe os perfis de usuários existentes e os relaciona com tipos de usuário, tipos de perfil e seus respectivos status.">
<thead>
    <tr>
        <th></th>
        <th id="coluna1">Perfil</th>
        <th id="coluna2">Usuário</th>
        <th id="coluna3">Tipo Perfil</th>
        <th id="coluna4">Status</th>
    </tr>
    <tr class="filterrow">
        <th><i class="material-icons md">&#xE8B6;</i></th>
        <th class="input-filter"><input type="text" class="form-control tchatchaca" placeholder="Buscar por Perfil"></th>
        <th class="select-filter"><select class="form-control" placeholder="Buscar por Usuário">
            <option value="">Selecione</option>
            <option value="fornecedor">Fornecedor</option>
            <option value="Governo">Governo</option>
            <option value="Outros Entes">Outros Entes</option>
            <option value="Terceirizados">Terceirizados</option>
        </select></th>
        <th class="select-filter"><select class="form-control" placeholder="Buscar por Tipo Perfil">
            <option value="">Selecione</option>
            <option value="Comum">Comum</option>
            <option value="Especial">Especial</option>
            <option value="Administrativo">Administrativo</option>
        </select></th>
        <th class="select-filter"><select class="form-control" placeholder="Buscar por Status">
            <option value="">Selecione</option>
            <option value="Bloqueado">Bloqueado</option>
            <option value="Desbloqueado">Desbloqueado</option>
            <option value="Excluido">Excluido</option>
        </select></th>
    </tr>
</thead>
<tbody>
    <tr>
     <td>
      <input type="checkbox" name="selectButton" value="Fornecedor"/>
      <div class="btn-toolbar btn-micro" role="toolbar" aria-label="Ações">
       <button type="button" class="btn btn-primary" title="Editar">
        <i class="material-icons" aria-label="editar" >&#xE254;</i>
        <span>Editar</span>
       </button>
       <button type="button" class="btn btn-default" title="Bloquear">
        <i class="material-icons" aria-label="bloquear">&#xE898;</i>
        <span>Desbloquear</span>
       </button>
       <button type="button" class="btn btn-danger" title="Excluir">
        <i class="material-icons" aria-label="excluir">&#xE872;</i>
        <span>Excluir</span>
       </button>
      </div>
     </td>
     <td id="linha1 fornecedor"><a href="#nogo">Fornecedor</a></td>
     <td headers="linha1 coluna2">Fornecedor</td>
     <td headers="linha1 coluna3">Comum</td>
     <td headers="linha1 coluna4">Desbloqueado</td>
    </tr>
    <tr>
     <td>
      <input type="checkbox" name="selectButton" value="Fornecedor"/>
      <div class="btn-toolbar btn-micro" role="toolbar" aria-label="Ações">
       <button type="button" class="btn btn-primary" title="Editar">
        <i class="material-icons" aria-label="editar" >&#xE254;</i>
        <span>Editar</span>
       </button>
       <button type="button" class="btn btn-default" title="Bloquear">
        <i class="material-icons" aria-label="bloquear">&#xE899;</i>
        <span>Bloquear</span>
       </button>
       <button type="button" class="btn btn-danger" title="Excluir">
        <i class="material-icons" aria-label="excluir">&#xE872;</i>
        <span>Excluir</span>
       </button>
      </div>
     </td>
     <td id="linha2 sisAdm"><a href="#nogo">Administrador do Sistema</a></td>
     <td headers="linha2 coluna2">Governo</td>
     <td headers="linha2 coluna3">Especial</td>
     <td headers="linha2 coluna4">Bloqueado</td>
    </tr>
    <tr>
     <td>
      <input type="checkbox" name="selectButton" value="Fornecedor"/>
      <div class="btn-toolbar btn-micro" role="toolbar" aria-label="Ações">
       <button type="button" class="btn btn-primary" title="Editar">
        <i class="material-icons" aria-label="editar" >&#xE254;</i>
        <span>Editar</span>
       </button>
       <button type="button" class="btn btn-default" title="Bloquear">
        <i class="material-icons" aria-label="bloquear">&#xE899;</i>
        <span>Bloquear</span>
       </button>
       <button type="button" class="btn btn-danger" title="Excluir">
        <i class="material-icons" aria-label="excluir">&#xE872;</i>
        <span>Excluir</span>
       </button>
      </div>
     </td>
     <td id="linha2 sisAdm"><a href="#nogo">Administrador do Sistema</a></td>
     <td headers="linha2 coluna2">Governo</td>
     <td headers="linha2 coluna3">Administrativo</td>
     <td headers="linha2 coluna4">Bloqueado</td>
    </tr>
</tbody>
</table>

如您所见，在此表中，标题中有 2 行，其中第一行用于标题和排序，第二行用于过滤。一些过滤器将通过<input type="text"> 进行，而其他过滤器将通过<select> 进行。

我用下面的代码初始化了Datatable。

$(document).ready(function() {
     // DataTable
    var table = $('table').DataTable({
        "language": {
            "lengthMenu": "Mostrar _MENU_ registros por página",
            "zeroRecords": "Nenhum registro encontrado",
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        },
    });
    // Apply the search
    table.columns( '.input-filter' ).every( function () {
        var that = this;

        $( 'input', this.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
    // Apply the search
    table.columns( '.select-filter' ).every( function () {
        var that = this;

        $( 'select', this.header() ).on( 'change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();

            } else if ( that.search() !== "" ) {
                that
                    .draw();
            }
        } );
    } );
 } );

但默认情况下，DataTables 会在标题的最后/第二行设置排序。然后我把"bSortCellsTop": true放在初始化中：

// DataTable
var table = $('table').DataTable({
    "language": {
        "lengthMenu": "Mostrar _MENU_ registros por página",
        "zeroRecords": "Nenhum registro encontrado",
        "info": "Showing page _PAGE_ of _PAGES_",
        "infoEmpty": "No records available",
        "infoFiltered": "(filtered from _MAX_ total records)"
    },
    "bSortCellsTop": true
});

排序现在按预期在第一行。但是搜索根本不起作用。我输入输入，响应什么都没有。在 de 控制台日志中没有错误。我已经尽力了。我更改了类，禁用了其他依赖项，获得了最新版本的 Datatable，更改了标签的位置以及许多其他事情。

【问题讨论】：

标签： jquery sorting search datatables filtering

【解决方案1】：

原因

似乎使用complex header，您无法使用columns() 访问不用于排序的标题列。

解决方案

如下重写你的代码：

// Apply the search
$.each($('.input-filter', table.table().header()), function () {
    var column = table.column($(this).index());

    $( 'input', this).on( 'keyup change', function () {
        if ( column.search() !== this.value ) {
            column
                .search( this.value )
                .draw();
        }
    } );
} );

// Apply the search
$.each($('.select-filter', table.table().header()), function () {
    var column = table.column($(this).index());

    $( 'select', this).on( 'change', function () {
        if ( column.search() !== this.value ) {
            column
                .search( this.value )
                .draw();

        } else if ( column.search() !== "" ) {
            column
                .draw();
        }
    } );
} );

演示

有关代码和演示，请参阅this jsFiddle。

注意事项

在 DataTables 1.10+ 中使用 "orderCellsTop": true 而不是 bSortCellsTop
最后一个选择框选项“Bloqueado”也显示“Desbloqueado”。

【讨论】：