javascript - 使动态生成的表的最后一列浮动
问题描述
我有一个函数，它以 json 作为输入，然后生成一个表，但由于数据太多，没有。列更多。即使我有一个水平滚动条，要查看最后一列（最重要的列），也需要进行太多滚动。我是 CSS 新手，不知道是否可以浮动最后一列，所以即使我不滚动，最后一列总是包裹在表格的右侧部分，并在我滚动时打开。这样我就可以看到表格的最后一列。
这是示例 json 数据：
var myContacts = [{
"owner": "swapneil",
"fleet_name": "RancorService",
"creation_date": "09-03-2020",
"environment": "RancorService/JP",
"vip_port": 80,
"partition": "YES",
"protocol": "HTTP",
"monitor": "Consistent (http-ping)",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (36)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RancorService",
"creation_date": "09-03-2020",
"environment": "RancorService/JP",
"vip_port": 443,
"partition": "YES",
"protocol": "TCP",
"monitor": "NC",
"lbset": "NC (>1 Vip's in same LB)",
"predictor": "NC (leastconns,ROUNDROBINSHOULD BE ROUNDROBIN)",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (9000)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Non-Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionAwareBaseLayer",
"creation_date": "09-03-2020",
"environment": "RegionAwareBaseLayer/NA",
"vip_port": 80,
"partition": "YES",
"protocol": "HTTP",
"monitor": "Consistent (http-ping)",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (56)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "NC : >1 VIP's MISSING TIER-1 TAG",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionAwareBaseLayer",
"creation_date": "09-03-2020",
"environment": "RegionAwareBaseLayer/NA",
"vip_port": 443,
"partition": "NO",
"protocol": "TCP",
"monitor": "Consistent (ssl-ping)",
"lbset": "Consistent",
"predictor": "NC :SHOULD BE ROUNDROBIN",
"spillover": "Consistent",
"vip_cka": "NC : SHOULD BE DISABLED (YES)",
"max_conns": "Consistent : (9000)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionMappingService",
"creation_date": "09-03-2020",
"environment": "RegionMappingService/EU",
"vip_port": 80,
"partition": "YES",
"protocol": "HTTP",
"monitor": "Consistent (http-ping)",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (16)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionMappingService",
"creation_date": "09-03-2020",
"environment": "RegionMappingService/EU",
"vip_port": 443,
"partition": "YES",
"protocol": "TCP",
"monitor": "NC",
"lbset": "NC (>1 Vip's in same LB)",
"predictor": "NC :SHOULD BE ROUNDROBIN",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (9000)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Non-Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionAwareBaseLayer",
"creation_date": "09-03-2020",
"environment": "RABLIndexer/EU",
"vip_port": 80,
"partition": "NO",
"protocol": "HTTP",
"monitor": "Consistent (http-ping)",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "NC : SHOULD BE DISABLED (YES)",
"max_conns": "MAX-CONNS WITH DEFAULT VALUE : 15",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Non-Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionMappingService",
"creation_date": "09-03-2020",
"environment": "RegionMappingService/JP",
"vip_port": 80,
"partition": "YES",
"protocol": "HTTP",
"monitor": "NC",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (40)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionMappingService",
"creation_date": "09-03-2020",
"environment": "RegionMappingService/JP",
"vip_port": 443,
"partition": "YES",
"protocol": "TCP",
"monitor": "NC",
"lbset": "NC (>1 Vip's in same LB)",
"predictor": "NC :SHOULD BE ROUNDROBIN",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (9000)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Non-Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
}
];
这是将json转换为表的函数：
function generateDynamicTable(myContacts) {
var noOfContacts = myContacts.length;
if (noOfContacts > 0) {
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
table.style.width = '50%';
table.setAttribute('border', '1');
table.setAttribute('cellspacing', '0');
table.setAttribute('cellpadding', '5');
// retrieve column header ('Name', 'Email', and 'Mobile')
var col = []; // define an empty array
for (var i = 0; i < noOfContacts; i++) {
for (var key in myContacts[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE TABLE HEAD .
var tHead = document.createElement("thead");
// CREATE ROW FOR TABLE HEAD .
var hRow = document.createElement("tr");
// ADD COLUMN HEADER TO ROW OF TABLE HEAD.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
hRow.appendChild(th);
}
tHead.appendChild(hRow);
table.appendChild(tHead);
// CREATE TABLE BODY .
var tBody = document.createElement("tbody");
// ADD COLUMN HEADER TO ROW OF TABLE HEAD.
for (var i = 0; i < noOfContacts; i++) {
var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD
for (var j = 0; j < col.length; j++) {
var td = document.createElement("td");
if (col[j] == 'monitor' && myContacts[i][col[j]] == 'NC') {
var a = document.createElement('a');
var linkText = document.createTextNode("Ext. link");
a.appendChild(linkText);
a.title = "Check details";
a.href = "http://example.com";
td.appendChild( a );
} else {
td.innerHTML = myContacts[i][col[j]];
};
bRow.appendChild(td);
}
tBody.appendChild(bRow)
}
table.appendChild(tBody);
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("demo");
divContainer.appendChild(table);
}
};
有人可以帮忙吗？？
在评论框中的建议之后，我做了以下更改：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css">
<style type="text/css">
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
}
} );
} );
</script>
并在 generateDynamicTable() 函数中添加了这些行：
table.setAttribute('id','example');
table.setAttribute('class', 'stripe row-border order-column');
但我仍然没有得到结果。
解决方案
由于您选择尝试使用 DataTables，因此您无需编写自己的代码来从 json 数据生成表。DataTables 已经有这个：data: jsonTableData，但你确实需要 thead（声明列），在下面的示例中，我编写了一个自动生成这些的简单方法。表格必须存在于 html DOM 上才能使 DataTables 工作，因此您会在 html 的正文部分找到一个 id=example 的空表格。我已在代码中添加注释以进行澄清，但如果您需要进一步解释，请随时询问。
这是代码片段：
// variables
var columns_title = [];
var jsonTableData;
var myContacts1 = [{
"owner": "swapneil",
"fleet_name": "RancorService",
"creation_date": "09-03-2020",
"environment": "RancorService/JP",
"vip_port": 80,
"partition": "YES",
"protocol": "HTTP",
"monitor": "Consistent (http-ping)",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (36)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RancorService",
"creation_date": "09-03-2020",
"environment": "RancorService/JP",
"vip_port": 443,
"partition": "YES",
"protocol": "TCP",
"monitor": "NC",
"lbset": "NC (>1 Vip's in same LB)",
"predictor": "NC (leastconns,ROUNDROBINSHOULD BE ROUNDROBIN)",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (9000)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Non-Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionAwareBaseLayer",
"creation_date": "09-03-2020",
"environment": "RegionAwareBaseLayer/NA",
"vip_port": 80,
"partition": "YES",
"protocol": "HTTP",
"monitor": "Consistent (http-ping)",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (56)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "NC : >1 VIP's MISSING TIER-1 TAG",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionAwareBaseLayer",
"creation_date": "09-03-2020",
"environment": "RegionAwareBaseLayer/NA",
"vip_port": 443,
"partition": "NO",
"protocol": "TCP",
"monitor": "Consistent (ssl-ping)",
"lbset": "Consistent",
"predictor": "NC :SHOULD BE ROUNDROBIN",
"spillover": "Consistent",
"vip_cka": "NC : SHOULD BE DISABLED (YES)",
"max_conns": "Consistent : (9000)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionMappingService",
"creation_date": "09-03-2020",
"environment": "RegionMappingService/EU",
"vip_port": 80,
"partition": "YES",
"protocol": "HTTP",
"monitor": "Consistent (http-ping)",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (16)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionMappingService",
"creation_date": "09-03-2020",
"environment": "RegionMappingService/EU",
"vip_port": 443,
"partition": "YES",
"protocol": "TCP",
"monitor": "NC",
"lbset": "NC (>1 Vip's in same LB)",
"predictor": "NC :SHOULD BE ROUNDROBIN",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (9000)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Non-Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionAwareBaseLayer",
"creation_date": "09-03-2020",
"environment": "RABLIndexer/EU",
"vip_port": 80,
"partition": "NO",
"protocol": "HTTP",
"monitor": "Consistent (http-ping)",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "NC : SHOULD BE DISABLED (YES)",
"max_conns": "MAX-CONNS WITH DEFAULT VALUE : 15",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Non-Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionMappingService",
"creation_date": "09-03-2020",
"environment": "RegionMappingService/JP",
"vip_port": 80,
"partition": "YES",
"protocol": "HTTP",
"monitor": "NC",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (40)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
},
{
"owner": "swapneil",
"fleet_name": "RegionMappingService",
"creation_date": "09-03-2020",
"environment": "RegionMappingService/JP",
"vip_port": 443,
"partition": "YES",
"protocol": "TCP",
"monitor": "NC",
"lbset": "NC (>1 Vip's in same LB)",
"predictor": "NC :SHOULD BE ROUNDROBIN",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (9000)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Non-Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "Consistent"
}
];
var myContacts2 = [{
"owner": "2_swapneil",
"fleet_name": "2_RancorService",
"creation_date": "09-03-2020",
"environment": "RancorService/JP",
"vip_port": 80,
"partition": "YES",
"protocol": "HTTP",
"monitor": "Consistent (http-ping)",
"lbset": "Consistent",
"predictor": "Consistent",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (36)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "2Consistent"
},
{
"owner": "2_swapneil",
"fleet_name": "2_RegionMappingService",
"creation_date": "09-03-2020",
"environment": "RegionMappingService/JP",
"vip_port": 443,
"partition": "YES",
"protocol": "TCP",
"monitor": "NC",
"lbset": "NC (>1 Vip's in same LB)",
"predictor": "NC :SHOULD BE ROUNDROBIN",
"spillover": "Consistent",
"vip_cka": "Consistent :(NO)",
"max_conns": "Consistent : (9000)",
"vip_cipher": null,
"vip_cip": "Consistent",
"vip_tier": "Consistent(Non-Tier1)",
"vip_siloed": "Consistent(Non-SILOED)",
"vip_globalized": "Consistent(Non-GLOBALIZED)",
"vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag": "Consistent(RETAIL_TAG)",
"down_stat_flush": "Consistent :(ENABLED)",
"vip_type": "Consistent (BACKEND)",
"server_port": "Consistent",
"vip_server_timeout": "Consistent",
"vip_client_timeout": "Consistent",
"persistent_method": "Consistent",
"persistent_timeout": "2Consistent"
}
];
var myContacts3 = [{
"someColumn1": "lorem ipsum 1-1",
"someColumn2": "lorem ipsum 1-2",
"someColumn3": "09-03-2020",
"someColumn4": "lorem ipsum 1-4",
"someColumn5": 1,
"someColumn6": "YES",
"someColumn7": "HTTP",
"someColumn8": "lorem ipsum 1-8",
"someColumn9": "lorem ipsum 1-9",
"someColumn10": "lorem ipsum 1-10",
"someColumn11": "lorem ipsum 1-11",
"someColumn12": "lorem ipsum 1-12",
"someColumn13": "lorem ipsum 1-13",
"someColumn14": null,
"someColumn15": "lorem ipsum 1-15",
"someColumn16": "lorem ipsum 1-16",
},
{
"someColumn1": "lorem ipsum 2-1",
"someColumn2": "lorem ipsum 2-2",
"someColumn3": "09-03-2020",
"someColumn4": "lorem ipsum 2-4",
"someColumn5": 2,
"someColumn6": "YES",
"someColumn7": "HTTP",
"someColumn8": "lorem ipsum 2-8",
"someColumn9": "lorem ipsum 2-9",
"someColumn10": "lorem ipsum 2-10",
"someColumn11": "lorem ipsum 2-11",
"someColumn12": "lorem ipsum 2-12",
"someColumn13": "lorem ipsum 2-13",
"someColumn14": null,
"someColumn15": "lorem ipsum 2-15",
"someColumn16": "lorem ipsum 2-16",
}
];
//init DataTable
function initDataTable(){
// first we will destroy the old DataTable if it exists
if ( $.fn.dataTable.isDataTable('#example') ) {
$('#example').DataTable().destroy();
$('#example').empty();
}
// clearing old column titles
columns_title = [];
// generating columns.title; https://datatables.net/reference/option/columns.title
// alternatively you could write thead insitde the table and specify column titles
$.each(jsonTableData[0], function(key) {
columns_title.push({
"data": key,
"title": key
});
});
// initializing the DataTable
var table = $('#example').DataTable( {
data: jsonTableData,
columns: columns_title,
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 0,
rightColumns: 1
}
} );
}
// document ready / pick which json to use and run initDataTable()
$(document).ready(function() {
// picking which json data to use when the page loads
jsonTableData = myContacts1;
initDataTable();
} );
// "dynamically" changing the table
function loadContacts(x){
switch(x) {
case 1:
jsonTableData = myContacts1;
break;
case 2:
jsonTableData = myContacts2;
break;
case 3:
jsonTableData = myContacts3;
break;
default:
jsonTableData = myContacts1;
}
initDataTable();
}<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js"></script>
<body>
<div>
<button onclick="loadContacts(1)">Load Contacts 1</button>
<button onclick="loadContacts(2)">Load Contacts 2</button>
<button onclick="loadContacts(3)">Load Contacts 3</button>
</div>
<div>
<table id="example" class="stripe row-border order-column" style="width:100%">
</table>
</div>
</body>PS 我建议运行代码片段，然后单击“整页”以更好地查看结果。
PPS我猜json数据是由一些API发送的，所以你应该添加一个检查json数据是否为空。
推荐阅读
- python - 我的 Python 关于 'TypeError: '<' 在 'function' 和 'float' 的实例之间不支持有什么问题
- javascript - Jquery 已安装，为什么我的 ajax 不是函数？
- javascript - 从对象数组中返回名称数组
- python - 如何多次从字符串中获取子字符串
- ruby-on-rails - 'rails new' 抛出 Sqlite 错误
- python - 为什么我所有的海生地块都融为一个地块？
- java - 将 long 编码为 int，反之亦然
- macos - 如何找回钥匙串访问权限
- javascript - 启动用电子构建的应用程序不起作用
- javascript - JavaScript xPath 命令不会在每次运行时与 Selenium Java 程序混合运行