我有以下表格标记:
<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"></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" ></i>
<span>Editar</span>
</button>
<button type="button" class="btn btn-default" title="Bloquear">
<i class="material-icons" aria-label="bloquear"></i>
<span>Desbloquear</span>
</button>
<button type="button" class="btn btn-danger" title="Excluir">
<i class="material-icons" aria-label="excluir"></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" ></i>
<span>Editar</span>
</button>
<button type="button" class="btn btn-default" title="Bloquear">
<i class="material-icons" aria-label="bloquear"></i>
<span>Bloquear</span>
</button>
<button type="button" class="btn btn-danger" title="Excluir">
<i class="material-icons" aria-label="excluir"></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" ></i>
<span>Editar</span>
</button>
<button type="button" class="btn btn-default" title="Bloquear">
<i class="material-icons" aria-label="bloquear"></i>
<span>Bloquear</span>
</button>
<button type="button" class="btn btn-danger" title="Excluir">
<i class="material-icons" aria-label="excluir"></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
});
排序现在按预期排在第一行。但搜索根本不起作用。我输入输入,响应什么都没有。在控制台日志中没有错误。我已经尽力了。我更改了类,禁用了其他依赖项,获得了最新版本的Datatable,更改了标记的位置以及许多其他内容。
答案 0 :(得分:3)
<强>原因强>
似乎使用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以获取代码和演示。
备注强>
"orderCellsTop": true
代替bSortCellsTop