grid com javascript

cleyton47 · Maio 14, 2014

Estou tentando fazer uma grid para listar clientes quando me deparei com uma muito legal em bootstrap, porém o botão do filtro não está funcionando como vi no exemplo , segue me código e exemplo. alguém pode me ajudar?

exemplo : http://bootsnipp.com/snippets/featured/panel-table-with-filters-per-column

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <link href="../css/bootstrap.css" rel="stylesheet">
      
        
        
<style type="text/css">
       
         .filterable {
    margin-top: 15px;
}
.filterable .panel-heading .pull-right {
    margin-top: -20px;
}
.filterable .filters input[disabled] {
    background-color: transparent;
    border: none;
    cursor: auto;
    box-shadow: none;
    padding: 0;
    height: auto;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
    color: #333;
}
.filterable .filters input[disabled]::-moz-placeholder {
    color: #333;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
    color: #333;
}

 </style>
        
        
        
  <script language="Javascript">
    
 //funcao dos filtros


/*
Please consider that the JS part isn't production ready at all, I just code it to show the concept of merging filters and titles together !
*/
$(document).ready(function(){
    $('.filterable .btn-filter').click(function(){
        var $panel = $(this).parents('.filterable'),
        $filters = $panel.find('.filters input'),
        $tbody = $panel.find('.table tbody');
        if ($filters.prop('disabled') == true) {
            $filters.prop('disabled', false);
            $filters.first().focus();
        } else {
            $filters.val('').prop('disabled', true);
            $tbody.find('.no-result').remove();
            $tbody.find('tr').show();
        }
    });

    $('.filterable .filters input').keyup(function(e){
        /* Ignore tab key */
        var code = e.keyCode || e.which;
        if (code == '9') return;
        /* Useful DOM data and selectors */
        var $input = $(this),
        inputContent = $input.val().toLowerCase(),
        $panel = $input.parents('.filterable'),
        column = $panel.find('.filters th').index($input.parents('th')),
        $table = $panel.find('.table'),
        $rows = $table.find('tbody tr');
        /* Dirtiest filter function ever ;) */
        var $filteredRows = $rows.filter(function(){
            var value = $(this).find('td').eq(column).text().toLowerCase();
            return value.indexOf(inputContent) === -1;
        });
        /* Clean previous no-result if exist */
        $table.find('tbody .no-result').remove();
        /* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
        $rows.show();
        $filteredRows.hide();
        /* Prepend no-result row if all rows are filtered */
        if ($filteredRows.length === $rows.length) {
            $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="'+ $table.find('.filters th').length +'">No result found</td></tr>'));
        }
    });
});



</script>
        
    </head>
    <body>




<div class="container">
    <h3>The columns titles are merged with the filters inputs thanks to the placeholders attributes</h3>
    <hr>
    <p>Inspired by this <a href="http://bootsnipp.com/snippets/featured/panel-tables-with-filter">snippet</a></p>
    <div class="row">
        <div class="panel panel-primary filterable">
            <div class="panel-heading">
                <h3 class="panel-title">Users</h3>
                <div class="pull-right">
                    <button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button>
                </div>
            </div>
            <table class="table">
                <thead>
                    <tr class="filters">
                        <th><input type="text" class="form-control" placeholder="#" disabled></th>
                        <th><input type="text" class="form-control" placeholder="First Name" disabled></th>
                        <th><input type="text" class="form-control" placeholder="Last Name" disabled></th>
                        <th><input type="text" class="form-control" placeholder="Username" disabled></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
        </div>  
    </div>
</div>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
       <script type="text/javascript" src="js/bootstrap.min.js"></script>
       <script type="text/javascript" src="../js/scripts.js"></script>
       <script type="text/javascript" src="../js/jquery.min.js"></script>  
      
    </body>
</html>

William Bruno · Maio 14, 2014

aparece algum erro no console ?

Ctrl + Shift + J no Firefox

troque:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
       <script type="text/javascript" src="js/bootstrap.min.js"></script>
       <script type="text/javascript" src="../js/scripts.js"></script>
       <script type="text/javascript" src="../js/jquery.min.js"></script>

por

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
       <script type="text/javascript" src="js/bootstrap.min.js"></script>
       <script type="text/javascript" src="../js/scripts.js"></script>

para parar de chamar o core do jquery 2 vezes.

cleyton47 · Maio 14, 2014

Obrigado por responder, fiz o teste com o script porém sem sucesso.. :(

o que aparece no console:

Propriedade desconhecida “-moz-border-bottom-right-radius”. Declaração ignorada. www.google.com.br:1

Pseudoclasse ou pseudoelemento desconhecido “-webkit-input-placeholder”. Regra ignorada devido a seletor incorreto. grid-cliente.php:25

Pseudoclasse ou pseudoelemento desconhecido “-ms-input-placeholder”. Regra ignorada devido a seletor incorreto. grid-cliente.php:31

Propriedade desconhecida “box-sizing”. Declaração ignorada. bootstrap.css:84

Propriedade desconhecida “box-sizing”. Declaração ignorada. bootstrap.css:186

Propriedade desconhecida “box-sizing”. Declaração ignorada. bootstrap.css:192

Pseudoclasse ou pseudoelemento desconhecido “-webkit-search-cancel-button”. Regra ignorada devido a seletor incorreto. bootstrap.css:196

Propriedade desconhecida “box-sizing”. Declaração ignorada. bootstrap.css:297

Esperada cor mas encontrado “auto”. Esperada cor mas encontrado “-webkit-focus-ring-color”. Esperado o término do valor mas encontrado “-webkit-focus-ring-color”. Erro no processamento do valor de “outline”. Declaração ignorada. bootstrap.css:335

Propriedade desconhecida “box-sizing”. Declaração ignorada. bootstrap.css:1882

Esperado o término do valor mas encontrado “\9 ”. Erro no processamento do valor de “margin-top”. Declaração ignorada. bootstrap.css:1888

Esperada cor mas encontrado “auto”. Esperada cor mas encontrado “-webkit-focus-ring-color”. Esperado o término do valor mas encontrado “-webkit-focus-ring-color”. Erro no processamento do valor de “outline”. Declaração ignorada. bootstrap.css:1913

Pseudoclasse ou pseudoelemento desconhecido “-webkit-outer-spin-button”. Regra ignorada devido a seletor incorreto. bootstrap.css:1917

Pseudoclasse ou pseudoelemento desconhecido “-ms-input-placeholder”. Regra ignorada devido a seletor incorreto. bootstrap.css:1966

Pseudoclasse ou pseudoelemento desconhecido “-webkit-input-placeholder”. Regra ignorada devido a seletor incorreto. bootstrap.css:1970

Propriedade desconhecida “user-select”. Declaração ignorada. bootstrap.css:2272

Esperada cor mas encontrado “auto”. Esperada cor mas encontrado “-webkit-focus-ring-color”. Esperado o término do valor mas encontrado “-webkit-focus-ring-color”. Erro no processamento do valor de “outline”. Declaração ignorada. bootstrap.css:2277

Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:2301

Propriedade desconhecida “-moz-osx-font-smoothing”. Declaração ignorada. bootstrap.css:2699

Esperado “none” ou URL mas encontrado “progid”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:3596

Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:5437

Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:5452

Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:5461

Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:5470

Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:5479

Propriedade desconhecida “zoom”. Declaração ignorada. bootstrap.css:5486

Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:5919

Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:5928

Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6002

Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6007

Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6088

Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6094

Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6406

Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:6410

Esperado “none” ou URL mas encontrado “progid”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6413

Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:6419

Esperado “none” ou URL mas encontrado “progid”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6422

Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6431

Esperado o término do valor mas encontrado “\9 ”. Erro no processamento do valor de “background-color”. Declaração ignorada. bootstrap.css:6490

ReferenceError: $ is not defined

William Bruno · Maio 14, 2014

Ok, desliga os erros de css e de rede.

Ai fica só com os erros/alertas de javascript.

Alan Walking · Maio 14, 2014

Você tem que utilizar exatamente a mesma versão do Bootstrap.

No exemplo diz que é a 3.1.0

Mas você está utilizando uma versão muito antiga do jQuery, 1.11.0

O Bootstrap nesta versão 3.1.0 utiliza o jQuery 2.1.0

Tente isso:

- Boostrap 3.1.0

- jQuery 2.1.0

cleyton47 · Maio 14, 2014

Obrigado pelo conselho Alan, utilizei o Jquery (<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> ), porém também não tive sucesso o botão do filtro ainda não funciona...

William deixei só o alerta e erros do javascript e apresentou a seguinte msg:

ReferenceError: $ is not defined

Consegui arrumar pessoal vlw pela ajuda de vcs!!!

peguei o erro que apareceu no console e coloquei no google

o erro era exatamente :

2° – Você está utilizando o seu script antes de chamar a biblioteca?

Modo errado:

O correto é:

/*Primeiro declarar a biblioteca Jquery*/

/*Depois declarar os seus scripts que irão estar na biblioteca*/

Entrar

Arquivado

grid com javascript

Recommended Posts

cleyton47 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

cleyton47 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alan Walking 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

cleyton47 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carregamento preloading

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante