【发布时间】：2021-12-08 09:47:26
【问题描述】：
我有一个 JSON，我正在引导选项卡内的 dataTable 中加载 JSON 数据。我为所有表格设置了一个通用宽度（即第 1 列宽度=20% 和第 2 列宽度=80%），但它适用于第一个选项卡内的第一个表格。诸如“宽度”之类的数据表初始化应该反映在选项卡内的表中。请帮忙！ 提前致谢！
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs myTab"> </ul>
<div class="tab-content myTabContent"> </div>
<h3>Selected Data:</h3>
<table class="selectedTableData table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>TEXT</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
$(function() {
var tempJson = {
"edi": {
"name": "EDI",
"data": [{
"id": "1",
"text": "edi1"
},{
"id": "2",
"text": "edi2"
},{
"id": "3",
"text": "edi3"
},{
"id": "4",
"text": "edi4"
},{
"id": "5",
"text": "edi5"
}]
},
"api": {
"name": "API",
"data": [{
"id": "01",
"text": "api1"
},{
"id": "02",
"text": "api2"
},{
"id": "03",
"text": "api3"
}],
},
"supply": {
"name": "SUPPLY",
"data": [{
"id": "001",
"text": "supply1"
},{
"id": "003",
"text": "supply3"
}]
},
"test": {
"name": "TEST",
"data": [{
"id": "0001",
"text": "test1"
},{
"id": "0002",
"text": "test2"
},{
"id": "0003",
"text": "test3"
},{
"id": "0004",
"text": "test4"
},{
"id": "0005",
"text": "test5"
},{
"id": "0006",
"text": "test6"
},{
"id": "0007",
"text": "test7"
},{
"id": "0008",
"text": "test8"
},{
"id": "0009",
"text": "test9"
}]
}
};
var renderDatatable = function(tableId, data) {
euffnDataTable = $("#" + tableId).DataTable({
columns: [{ data: "id", width: "20%",
render: function(data, type, row) {
if (type == 'display') {
return '<input type="checkbox" id="sel_' + row.id + '" class="editor-active template_checkbox" />';
}
return data;
},
className: 'selectFlow',
},
{ data: "text", width: "80%" },
],
data: data,
dom: "Bfrtip",
ordering: true,
pageLength: 3,
order: [ [0, "asc"] ],
createdRow: function(row, data, dataIndex) {
$(row).attr("template-id", data.id);
}
});
}
$.each(tempJson, function(k, v) {
let tabList = '<li><a data-toggle="tab" href="#menu_' + k + '">' + v.name + '</a></li>';
$(".myTab").append(tabList);
let tabContent = '<div id="menu_' + k + '" class="tab-pane fade">' +
'<table id="' + k + 'Table" class="bptable display table table-striped table-bordered table-sm lbp-table-grid-header order-column nowrap" style="width:100%; margin:0 !important;"><thead><tr><th>Select</th><th>Flow Name</th></tr></thead></table>' +
'</div>';
$(".myTabContent").append(tabContent);
$(".myTab li:first-child").addClass("active");
$(".myTabContent .tab-pane:first-child").addClass("in active");
renderDatatable(k + "Table", v.data);
});
var rowArr = [];
var table = $(".bptable").DataTable();
$(".bptable").on("click", ".template_checkbox", function() {
rowArr = [];
$(this).closest("tr").toggleClass('selected');
let rowData = table.rows(".selected").data();
$.each(rowData, function(k, v) {
rowArr.push(v);
});
var uniqueRowArr = [...new Set(rowArr)];
console.log(uniqueRowArr);
$(".selectedTableData tbody").empty();
$.each(uniqueRowArr, function(key, val) {
$(".selectedTableData tbody").append('<tr selected-row-id="' + val.id + '"> <td>' + val.id + '</td> <td>' + val.text + '</td> <td><a class="removeData" href="javascript:;"><span class="glyphicon glyphicon-remove"></span></a></td></tr>');
});
});
$(".selectedTableData").on("click", ".removeData", function() {
var selectedRowId = $(this).closest("tr").attr("selected-row-id");
$(".bptable tbody tr").each(function() {
var templateId = $(this).attr("template-id");
if (selectedRowId == templateId) {
$(this).removeClass("selected");
$(this).find(".template_checkbox").prop('checked', false);
}
});
$(this).closest("tr").remove();
});
// TAB click event
$('.myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//console.log("tab clicked!");
$(".bptable").DataTable().draw();
});
});
</script>
</body>
</html>【问题讨论】：
标签： jquery datatables tabs dynamic-tables