Show / Hide button base on column value - Jquery

User_789465
October 14, 2022
205 views
2 votes
3 Answers

I have a Grid View where i have 2 columns (FOOD and OPERATIONS). In FOOD column I am showing my menu. In OPERATIONS column, I have 2 buttons (DELETE and EDIT).
What I want is if FOOD is "HAMBURGER" I want the two buttons to be visible, otherwise I want to hide them.
Here is the demonstration of what I want

I have tried this code in jQuery. But I don’t think if the condition implementation is correct.

Menu = $('#tblMenu').DataTable({
        columns: [
            { "data": "FOOD", responsivePriority: 1, "searchable": true },
            {
                "data": null,
                render: function (data, type, row) {
                    btn = '<div class="d-flex">';
                    btn += '<a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>';
                    btn += '<a class="btn btn-danger" id="deleteMenu" href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>';
                    
                    //Condition
                    if (data.find("FOOD") != "HAMBURGER") {
                        /*btn +=*/ $('<a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>').hide();
                        $('<a class="btn btn-danger"  href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>').hide();
                    } else {
                        $('<a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>').show();
                        $('<a class="btn btn-danger"  href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>').show();
                    }

                    btn += '</div>';
                    return btn;
                }, 
            }
        ]
    });
    
//HTML
<table class="table align-middle table-bordered text-center w-100" style="font-size:75%; " id="tblMenu">
    <thead class="table-primary">
        <tr>
            <th class="align-middle">FOOD</th>
            <th class="align-middle">OPERATIONS</th>
        </tr>
    </thead>
</table>

Answers

- AaronMagpantay
- October 14, 2022 at 10:12 am
- 0 votes
0
Can you show us more of your code? You are using jQuery here,
```
//Sets your ready function    
$(document).ready(function () {

                $("#Delete").click(function () {

                    $("a").hide(); //Selecting the <a> and hiding it on click
                });
                $("#show").click(function () {
                    $("a").show();//Selecting the <a> and showing it on click



                });
            });
```
Please update more on your question of what you are trying to achieve, you are currently select to all instance of element, not though, use
```
$("#a").show(); // ID based
$(".a").show(); //Selecting with class names
```
Login or Signup to reply.

The question was changed few moments after I finished crafting this demo. So this answer doesn’t perfectly fit the scenario with the datatables.net but yet it gives hints on a strategy you could implement.

In your latest code you are trying to evaluate a condition based on the input data and crafting some elements on the fly to fill the table.

You could yet have a second column containing the buttons on each single row but just show/hide that cell based on the existence of a given class in that row.

Here on document ready I’m looping through all the table rows and if the value Hamburger is found on the first cell, to the whole rows we add the class enabled. Such condition will trigger the css rule styling that cell as visible opposed to hidden.

$(document).ready(function () {
  //for each row in the table
  $('table.foods > tbody > tr').each((i,row)=>{
    //grabs the text value from the first cell in the row,
    const foodValue = $(row).find('td:first-child').text();    
    //and if it's hamburger,
    if(foodValue == 'Hamburger'){
      //adds the class enabled to the row
      $(row).addClass('enabled');
    }      
  });
});

/**************************************************************
 * Styles to show/hide rows having/not having the enabled class
 **************************************************************/

table.foods > tbody > tr > td:nth-child(2) {
  visibility: hidden;
}

table.foods > tbody > tr.enabled > td:nth-child(2) {
  visibility: visible;
}

/**************************************************************
 * Styles for better presentation
 **************************************************************/

table.foods {
  border-collapse: collapse;
  width: 100%;
}

table.foods th {
  text-align: center;
}

table.foods td,
table.foods th {
  border: solid 2px black;
  padding: 1rem;
}

.action {
  border: solid 2px;
  border-radius: 5px;
  padding: .5rem 1rem;
  background: white;
}

.edit {
  border-color: red;
  color: red;
}

.delete {
  border-color: blue;
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="foods">
  <thead>
    <th>FOOD</th>
    <th>DRINK</th>
  </thead>
  <tbody>
    <tr>
      <td>Hamburger</td>
      <td>
        <button type="button" class="action edit">EDIT</button>
        <button type="button" class="action delete">DELETE</button>
      </td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>
        <button type="button" class="action edit">EDIT</button>
        <button type="button" class="action delete">DELETE</button>
      </td>
    </tr>
    <tr>
      <td>Pizza</td>
      <td>
        <button type="button" class="action edit">EDIT</button>
        <button type="button" class="action delete">DELETE</button>
      </td>
    </tr>
  </tbody>
</table>

I noticed that DataTables is being used as well as Bootstrap. I assumed that OP has BS4 since DataTables has yet to have a stylesheet for BS5. See Figure I for the list of external files loaded for the example.

Figure I

bootstrap.min.css v4.6.1
dataTables.bootstrap4.min.css v1.10.21
jquery.min.js v3.6.1
popper.min.js v1.16.1
bootstrap.bundle.min.js v4.6.1
jquery.dataTables.min.js v1.10.21

In the dataTable() plugin, columnDefs parameter and render: function() property were used to resolve the problem. See Figure II.

Figure II

{
  targets: 1, // This is rendering buttons in the second column
  data: null, // This uses the whole source (dataSet)
  render: function(data, type, row, meta) {
    /**
     * If data.item (OP: data.FOOD) is not "CONFIGURABLE" (OP: "HAMBURGER")...
     * >status< = "hidden" otherwise it's = "" (nothing)
     */
    let status = data.item !== "CONFIGURABLE" ? "hidden" : "";
    /**
     * Only a single string is needed. Note that >status< is a class 
     * (see CSS in example). It's important that the "hidden" class is
     * added to your CSS exactly how it is in the example CSS. BS styles
     * are difficult to override so if changed it may not work.
     */
    const btn = `
      <div class="btn-group ${status}">
        <a href="/editMenu?id=${row.idOrder}" class="btn btn-info">EDIT</a>
        <a href="/deleteMenu?id=${row.idOrder}" class="btn btn-danger">DELETE</a>
      </div>`;
      return btn;
    }
  }

const dataSet = [{item:0, config:""}, {item:"CONFIGURABLE", config:""},{item:2, config:""},{item:"CONFIGURABLE", config:""},{item:4, config:""},{item:5, config:""},{item:"CONFIGURABLE", config:""},{item:7, config:""},{item:"CONFIGURABLE", config:""},{item:8, config:""},{item:9, config:""},{item:"CONFIGURABLE", config:""}];

const Menu = $('#tblMenu').DataTable({
  data: dataSet,
  columns: [{
    title: "Item"
  }, {
    title: ""
  }],
  columnDefs: [{
      targets: 0,
      data: "item"
    },
    {
      targets: 1,
      data: null,
      render: function(data, type, row, meta) {
        let status = data.item !== "CONFIGURABLE" ? "hidden" : "";
        const btn = `
          <div class="btn-group ${status}">
            <a href="/editMenu?id=${row.idOrder}" class="btn btn-info">EDIT</a>
            <a href="/deleteMenu?id=${row.idOrder}" class="btn btn-danger">DELETE</a>
          </div>`;
        return btn;
      }
    }
  ]
});

.btn-group.hidden {
  display: none;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
  <style></style>
</head>

<body>
  <main class="container">
    <section class="row">
      <div class="col mt-5">
        <table id="tblMenu" class="table align-middle table-bordered text-center w-100" style="font-size:75%;">
          <thead class="table-primary">
            <tr>
              <th class="align-middle"></th>
              <th class="align-middle"></th>
            </tr>
          </thead>
        </table>
      </div>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

  <script></script>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Show / Hide button base on column value – Jquery

Answers