I have a JSON and I am loading JSON data in dataTable inside the bootstrap tabs. I have set a common width (i.e column 1 width=20% and column 2 width=80%) for all the tables but it is applying for the first table inside the first tab. Datatable initializations such as "width" should reflect across the tables inside the tabs. Please help! Thanks in advance!
<!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>
