Generate table contents through click action

Question

Generate table contents through click action

Navigation

#1 by (1 votes)

0

I'm having a web project that needs to implement functions to generate the contents of a table according to the chosen item. For example in my dashboard I have a tower icon, and just below I have a table with all the equipment listed. The question, I have several icons of towers in the dashboard and the table are all equipment registered. As you can see below:

Wherethepatchpanel100islinkedtothelittleprincesstowerandtheothertwotheparaisotower.Instead,Iwouldlikeyoutoclickonaparticulartowertolistonlytheequipmentinthattower.

Myhtmldashboard:

<divclass="row">
<input type="hidden" name="torre.id" value="${t?.id}" /> #{list
items:torres, as:'t'}
<div class="col-lg-1 col-sm-1">
    <img class="img-circle img-responsive"
        src="/public/images/torre-green.svg">
    <h5><center>${t.nome}</center></h5>
</div>
#{/list}

<div class="col-lg-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <i class="fa fa-cubes"></i> Detalhes Patch panels
            </h3>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th>Patch panel</th>
                            <th>MAC</th>
                            <th>IP</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        #{list items:patch, as:'p'}
                        <tr>
                            <td>${p.nome}</td>
                            <td>${p.mac}</td>
                            <td>${p.ip}</td>
                            <td>${p.status}</td>
                        </tr>
                        #{/list}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

When registering a new patchpanel I say which tower it is linked to, so my tower model has a patchpanel list:

 @Entity
 public class Torre extends Model {

@Required
public String nome;
@Required
public String endereco;
@Required
public String bairro;
@Required
public String cidade;
public String pontoRef;

public String latitude;

public String longitude;

public String altura;
@Required
public String sustentavel;

@OneToMany(mappedBy="torre")
public List<Patchpanel> patchpanels;

@Enumerated(EnumType.STRING)
public Status status;

public Torre() {
    status = Status.ATIVO;
}

javascript java jquery

asked by anonymous 27.07.2017 / 02:09

1 answer

Delete records without refreshing page Show logged in user name

score 1 · Accepted Answer

Set an id for each tower in <tr> and then filter them by the value of input .

$(".torre").on('click', function(event){

    var torre = $(this).find('input').val();
  
    $('#tabela-patch tbody tr').filter(function() {
        if($(this).attr('data-id') != torre.toLowerCase()){
          $(this).css('display', 'none');
        }else{
           $(this).css('display', '');
        }
    });
});

$("#btn-exibirTodas").click(function(event){
  $('#tabela-patch tbody tr').filter(function() {
    $(this).css('display', '');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  
  <div class="col-sm-1 col-xs-2">
    <a href="javascript:void(0)" class="torre">
      <input type="hidden" name="torre.id" value="paraiso" />
      <img class="img-circle img-responsive" width="100px" src="http://images.gofreedownload.net/radio-wireless-tower-cor-11607.jpg"><h5><center>PARAISO</center></h5></a></div><divclass="col-sm-1 col-xs-2">
    <a href="javascript:void(0)" class="torre">
      <input type="hidden" name="torre.id" value="princesinha" />
      <img class="img-circle img-responsive" width="100px" src="http://images.gofreedownload.net/radio-wireless-tower-cor-11607.jpg"><h5><center>PRINCESINHA</center></h5></a></div></div><divclass="col-lg-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <i class="fa fa-cubes"></i> Detalhes Patch panels
            </h3>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped" id="tabela-patch">
                    <thead>
                        <tr>
                            <th>Patch panel</th>
                            <th>MAC</th>
                            <th>IP</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-id="paraiso">
                            <td>Patch Panel 1</td>
                            <td>94:19:54:::</td>
                            <td>192.168.0.1</td>
                            <td>ATIVO</td>
                        </tr>
                        <tr data-id="paraiso">
                            <td>Patch Panel 12</td>
                            <td>94:22:22:22:22:22</td>
                            <td>192.168.0.2</td>
                            <td>ATIVO</td>
                        </tr>
                        <tr data-id="princesinha">
                            <td>Patch Panel 100</td>
                            <td>44:44:44:44:44:44</td>
                            <td>192.168.0.10</td>
                            <td>ATIVO</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<a href="#" id="btn-exibirTodas">Exibir todas</a>

OBS: Put on Whole Page to see better