How do I display the jquery datatables search box within a div
?
My HTML table looks like this:
<div class="row-fluid">
<div class="span4 pull-left">
<h4>Gerenciamento de Usuários</h4>
</div>
<div id="pesqUsuario" class="span4 pull-left>
</div>
<div class="span3 pull-right">
<div class=" text-right"><a class="btn btn-default" href="#"><i class="fam-user-add"></i> Adiciona Usuário</a></div>
</div>
</div>
<div class="well well-small">
<table id="tblUsuarios" class="display cellspacing=" 0" width="100%">
<thead>
<tr>
<th class="sorting">Id</th>
<th class="sorting">Nome</th>
<th class="sorting">Login</th>
<th class="sorting">Código</th>
<th class="sorting">Nivel</th>
<th class="sorting">Status</th>
<th style="text-align: center;">Editar</th>
<th style="text-align: center;">Excluir</th>
</tr>
</thead>
<tbody>
@foreach (var usuario in Model)
{
<tr>
<td>@usuario.Usuario_id</td>
<td>@usuario.Nome</td>
<td>@usuario.Login</td>
<td>@usuario.Codigo</td>
<td>@usuario.NivelAcesso</td>
<td>@usuario.Status</td>
<td style="width:8px; text-align: center"><a href="#"><i class="icon-adjust fam-user-edit"></i></a></td>
<td style="width:8px; text-align: center"><a href="#"><i class="icon-adjust fam-user-delete"></i></a></td>
</tr>
}
</tbody>
</table>
</div>
My js file looks like this:
$(document).ready(function () {
$('#tblUsuarios').dataTable({
//lengthMenu: [[7, 10, 25, -1], [7, 10, 25, "All"]],
lengthMenu: [[7]],
bLengthChange: false,
dom: '<"pesqUsuario"r>lftip',
language: {
"sEmptyTable": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
"sInfoFiltered": "(Filtrados de _MAX_ registros)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ resultados por página",
"sLoadingRecords": "Carregando...",
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"sSearch": "Pesquisar:",
"oPaginate": {
"sNext": "Próximo",
"sPrevious": "Anterior",
"sFirst": "Primeiro",
"sLast": "Último"
},
oAria: {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
}
}
});
});
I want to display the search box, inside the div with id = userq. Beside the title "User Management" My view still looks like this:
Where am I going wrong?