我有一個網格視圖，其中有 2 列（食物和操作）。在 FOOD 列中，我正在顯示我的選單。在 OPERATIONS 列中，我有 2 個按鈕（DELETE和EDIT）。我想要的是如果 FOOD 是“HAMBURGER”，我希望這兩個按鈕可見，否則我想隱藏它們。 這是我想要的演示
我已經在 jQuery 中嘗試過這段代碼。但我不認為條件實作是否正確。
Menu = $('#tblMenu').DataTable({
columns: [
{ "data": "FOOD", responsivePriority: 1, "searchable": true },
{
"data": null,
render: function (data, type, row) {
btn = '<div >';
btn = '<a href="/editMenu?id=' row.idOrder '\">EDIT</a>';
btn = '<a id="deleteMenu" href="/deleteMenu?id=' row.idOrder '\">DELETE</a>';
//Condition
if (data.find("FOOD") != "HAMBURGER") {
/*btn =*/ $('<a href="/editMenu?id=' row.idOrder '\">EDIT</a>').hide();
$('<a href="/deleteMenu?id=' row.idOrder '\">DELETE</a>').hide();
} else {
$('<a href="/editMenu?id=' row.idOrder '\">EDIT</a>').show();
$('<a 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>
uj5u.com熱心網友回復：
我注意到正在使用DataTables以及Bootstrap。我假設 OP 有 BS4，因為 DataTables 還沒有 BS5 的樣式表。有關示例加載的外部檔案串列，請參見圖 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
在dataTable()插件中，columnDefs引數和render: function()屬性用于解決問題。見圖二。
圖二
{
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 hljs-subst">${status}">
<a href="/editMenu?id=${row.idOrder}" >EDIT</a>
<a href="/deleteMenu?id=${row.idOrder}" >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 hljs-subst">${status}">
<a href="/editMenu?id=${row.idOrder}" >EDIT</a>
<a href="/deleteMenu?id=${row.idOrder}" >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>uj5u.com熱心網友回復：
在我制作完這個演示后不久，這個問題就改變了。因此，此答案并不完全適合 datatables.net 的場景，但它提供了有關您可以實施的策略的提示。
在您的最新代碼中，您嘗試根據輸入資料評估條件并動態制作一些元素以填充表格。
您還可以有第二列包含每一行上的按鈕，但只是根據該行中給定類的存在來顯示/隱藏該單元格。
在準備好檔案的情況下，我正在遍歷所有表格行，如果Hamburger在第一個單元格上找到該值，則將 class 添加到整行enabled。這種情況將觸發 css 規則將該單元格設定為可見而不是隱藏。
$(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>uj5u.com熱心網友回復：
你能告訴我們更多你的代碼嗎？你在這里使用 jQuery，
//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
});
});
請更新更多關于您要達到的目標的問題，您當前正在選擇元素的所有實體，但不是使用
$("#a").show(); // ID based
$(".a").show(); //Selecting with class names
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/517969.html
下一篇：計算整數中零的個數