Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

cleyton47

grid com javascript

Por , em Javascript

Recommended Posts

cleyton47    0

cleyton47
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

cleyton47    0

cleyton47
Postado
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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ok, desliga os erros de css e de rede.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alan Walking    5

Alan Walking
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

cleyton47    0

cleyton47
Postado
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:

<script src=”SeuSCRIPT” type=”text/javascript” language=”Javascript”>

<script src=”http://code.jquery.com/jquery-1.9.0.min.js“></script>

O correto é:

/*Primeiro declarar a biblioteca Jquery*/
<script src=”http://code.jquery.com/jquery-1.9.0.min.js“></script>

/*Depois declarar os seus scripts que irão estar na biblioteca*/
<script src=”SeuSCRIPT” type=”text/javascript” language=”Javascript”>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito