Skip to main content
adicionou 3299 caracteres ao conteúdo
Fonte Link
pnet
  • 14,9mil
  • 34
  • 113
  • 249

Meu código:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Pesquisa</title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" media="screen" />
    <script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/Pesquisa/Pesquisa.js"></script>

</head>
<body>

    <form role="form">
        <div class="form-group col-md-6">
            <input type="text" class="form-control col-md-4" id="txtPesquisar" name="Pesquisar" placeholder="Entre com um email"/>
            
        </div>
        <div class="form-group col-md-6">
            <input id="btnGravarCadastro" type="button" class="btn btn-success col-md-4" value="Pesquisar" onclick=" return carregaGrid();" />
        </div>
             

</form>

    <div id="tabela" class="container">
        <table class="table table-hover table-bordered table-striped">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>E-mail</th>
                    <th>Endereço</th>
                    <th>Bairro</th>
                    <th>Cidade</th>
                    <th>Estado</th>
                    <th>Telefone</th>
                    <th>Celular</th>
                </tr>
            </thead>
            <tbody id="tbcadastro">
                
            </tbody>
        </table>
    </div>
</body>
</html>

O Jquery que monta o tbody da table

function carregaGrid() {

    var str = "";

    var email = jQuery.parseJSON('{ }');

    $.ajax({
        url: '/Pesquisa/PesquisaCadastro',
        datatype: 'json',
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: JSON.stringify({ _email: $('#txtPesquisar').val() }),
        success: function (data) {

            $(data.result_pesquisa).each(function(){
                str += '<tr>';
                str += '<td>' + this.nmcadastro + '</td>';
                str += '<td>' + this.email_cadastro + '</td>';
                str += '<td>' + this.end_cadastro + '</td>';
                str += '<td>' + this.bairro_cadastro + '</td>';
                str += '<td>' + this.cidade_cadastro + '</td>';
                str += '<td>' + this.uf_cadastro + '</td>';
                str += '<td>' + this.tel_cadastro + '</td>';
                str += '<td>' + this.cel_cadastro + '</td>';
                str += '</tr>';
            })

            $('#tbcadastro').html(str);
                
        },
        error: function (error) {
        }

    });
}

Meu código:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Pesquisa</title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" media="screen" />
    <script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/Pesquisa/Pesquisa.js"></script>

</head>
<body>

    <form role="form">
        <div class="form-group col-md-6">
            <input type="text" class="form-control col-md-4" id="txtPesquisar" name="Pesquisar" placeholder="Entre com um email"/>
            
        </div>
        <div class="form-group col-md-6">
            <input id="btnGravarCadastro" type="button" class="btn btn-success col-md-4" value="Pesquisar" onclick=" return carregaGrid();" />
        </div>
             

</form>

    <div id="tabela" class="container">
        <table class="table table-hover table-bordered table-striped">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>E-mail</th>
                    <th>Endereço</th>
                    <th>Bairro</th>
                    <th>Cidade</th>
                    <th>Estado</th>
                    <th>Telefone</th>
                    <th>Celular</th>
                </tr>
            </thead>
            <tbody id="tbcadastro">
                
            </tbody>
        </table>
    </div>
</body>
</html>

O Jquery que monta o tbody da table

function carregaGrid() {

    var str = "";

    var email = jQuery.parseJSON('{ }');

    $.ajax({
        url: '/Pesquisa/PesquisaCadastro',
        datatype: 'json',
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: JSON.stringify({ _email: $('#txtPesquisar').val() }),
        success: function (data) {

            $(data.result_pesquisa).each(function(){
                str += '<tr>';
                str += '<td>' + this.nmcadastro + '</td>';
                str += '<td>' + this.email_cadastro + '</td>';
                str += '<td>' + this.end_cadastro + '</td>';
                str += '<td>' + this.bairro_cadastro + '</td>';
                str += '<td>' + this.cidade_cadastro + '</td>';
                str += '<td>' + this.uf_cadastro + '</td>';
                str += '<td>' + this.tel_cadastro + '</td>';
                str += '<td>' + this.cel_cadastro + '</td>';
                str += '</tr>';
            })

            $('#tbcadastro').html(str);
                
        },
        error: function (error) {
        }

    });
}
Fonte Link
pnet
  • 14,9mil
  • 34
  • 113
  • 249

Posicionamento de controles com bootstrap

Estou tendo uma dificuldade em posicionar controles na página com bootstrap. Gostaria de não estar recorrendo a recursos externos de CSS, pois isso tiraria a razão de ser do bootstrap. O que eu quero dizer é:

  1. Gostaria de posicionar um determinado controle não colado na parte superior da tela, mas assim, como se fosse um CSS e eu usaria um top:10px ou 15px e assim po diante.

  2. Também estou tendo dificuldade de posicionar à esquerda da margem, como um left no CSS puro. Eu fiz uma table e populei a table e ela ficou no meio da página, dando um espaço à direita e esquerda. Porem eu coloquei um controle textbox em cima da table e ele colou na margem esquerda, tipo, um 0px e aí fica aquela aparência feia, com um grid(table) no centro e o textbox bem colado na margem.

Procurei nas documentações do bootstrap que eu tenho sobre essas coisas enão vi nada disso. Vi somente como criar botões, tables e etc... Sei que a documentação é extensa e não tenho tudo, mas confesso que não vi nada a respeito. Alguém poderia me dar o caminho das pedras? Ou seja, onde procurar esses recurso e outros mais? Desde já agradeço.