Display jquery datatables search element in a specific div

Asked

Viewed 330 times

1

How do I display, inside a div specifies the jquery datatables search box?

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 = pesqUsuario. Next to the title "User Management" My view still keeps popping up like this:

inserir a descrição da imagem aqui

Where am I going wrong?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.