我有一个带有两个引导程序选项卡的页面,每个选项卡包含一个数据表。仅在将fixedColumns集成到两个数据表中之后,才会开始发生以下行为。
在页面加载中,第一个表正确显示,并且fixedColumns正常工作。当我单击表2的选项卡时,将显示该表,但应在该表下方的页面内容显示在该表的顶部,并且fixedColumns不起作用。
表1:
表2:
Link to the snippet,尽管我很难让它呈现任何东西。
Javascript:
$(function () {
dataRetrievalpromise()
.then(function (result) {
generateTabsPromise(result)
.then(function (result) {
console.log(result);
createTableHTMLPromise(result)
.then(function (result) {
createTableColumnsAndDataPromise(result);
});
});
});
//Below works only when debugging/using breakpoints
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//$('.dTable:visible').each(function (e) {
// $(this).DataTable().columns.adjust().responsive.recalc();
//});
$.fn.dataTable.tables({ visible: true, api: true })
.columns.adjust()
.fixedColumns().relayout()
.responsive.recalc();
//.fixedHeader.adjust();
//.columns.adjust().redraw()
});
});
var generateTabsPromise = function (trainerJson) {
var promise = new Promise(function (resolve, reject) {
var result = {};
var tabInfo = [];
var allMonthsFromJson = Object.getOwnPropertyNames(trainerJson);
var tabHTML = '';
for (var i = 0; i < allMonthsFromJson.length; i++) {
tabInfo.push(allMonthsFromJson[i]);
}
for (var i = 0; i < tabInfo.length; i++) {
//Make first tab active
if (i == 0) {
tabHTML += '<li class="active"><a href="' + '#tab-' + tabInfo[i] + '" data-toggle="tab"> ' + tabInfo[i] + '</a></li>';
}
else {
tabHTML += '<li><a href="' + '#tab-' + tabInfo[i] + '" data-toggle="tab"> ' + tabInfo[i] + '</a></li>';
}
}
$(".nav-tabs").html(tabHTML);
result = { firstTab: tabInfo[0], jsonData: trainerJson, allMonthsInJson: allMonthsFromJson };
resolve(result);
});
return promise;
};
function createTableHTMLPromise(generateTabsResult) {
var promise = new Promise(function (resolve, reject) {
var tableHTML = '';
for (var i = 0; i < generateTabsResult.allMonthsInJson.length; i++) {
if (i === 0) {
tableHTML += '<div class="tab-pane active" id="' + 'tab-' + generateTabsResult.allMonthsInJson[i] + '">';
tableHTML += '<table class="table dTable" id="' + 'table-' + generateTabsResult.allMonthsInJson[i] + '" cellspacing="0" width="100%">' + '</table>';
tableHTML += '</div>';
}
else {
tableHTML += '<div class="tab-pane" id="' + 'tab-' + generateTabsResult.allMonthsInJson[i] + '">';
tableHTML += '<table class="table dTable" id="' + 'table-' + generateTabsResult.allMonthsInJson[i] + '" cellspacing="0" width="100%">' + '</table>';
tableHTML += '</div>';
}
}
$(".tab-content").html(tableHTML);
result = { allMonthsInJson: generateTabsResult.allMonthsInJson, jsonData: generateTabsResult.jsonData };
resolve(result);
});
return promise;
}
function createTableColumnsAndDataPromise(createTableHTMLResult) {
var promise = new Promise(function (resolve, reject) {
var result = {};
var columnResult = [];
for (var i = 0; i < createTableHTMLResult.allMonthsInJson.length; i++) {
var month = createTableHTMLResult.jsonData[createTableHTMLResult.allMonthsInJson[i]].metaData.month;
var numDays = createTableHTMLResult.jsonData[createTableHTMLResult.allMonthsInJson[i]].metaData.numDays;
var year = createTableHTMLResult.jsonData[createTableHTMLResult.allMonthsInJson[i]].metaData.year;
var tabName = createTableHTMLResult.allMonthsInJson[i];
columnResult.push({ "data": "managerName", title: "managerName", "name": "managerName", "defaultContent": "" });
columnResult.push({ "data": "employeeName", title: "employeeName", "name": "employeeName", "defaultContent": "" });
for (var j = 0; j < numDays; j++) {
if (j + 1 < 10) {
columnResult.push({ "data": month + "-0" + String(j + 1) + "-" + year, title: month + "-" + String(j + 1) + "-" + year, "name": month + "-" + String(j + 1) + "-" + year, "defaultContent": "" });
}
else {
columnResult.push({ "data": month + "-" + String(j + 1) + "-" + year, title: month + "-" + String(j + 1) + "-" + year, "name": month + "-" + String(j + 1) + "-" + year, "defaultContent": "" });
}
}
initiateTable(columnResult, createTableHTMLResult.jsonData[tabName].data, tabName);
columnResult = [];
tabName = "";
}
resolve(result);
});
return promise;
}
function initiateTable(columnArray, tableData, tab) {
//console.log("initiateTable called: " + tab);
var table = $("#table-" + tab).DataTable({
data: tableData,
"columns": columnArray,
"scrollX": true,
scrollCollapse: true,
"paging": false,
"searching": false,
"fixedColumns": {
leftColumns: 2
}
});
}
var dataRetrievalpromise = function () {
var jsonData = {};
var promise = new Promise(function (resolve, reject) {
//console.log('first method completed ');
resolve(jsonData = {
"Jan-2019": {
"metaData": {
"month": "Jan",
"numDays": 31,
"year": "2019"
},
"data": [
{
"managerName": "Person 1",
"employeeName": "Employee 1",
"Jan-01-2019": "<span style='background-color:green;'>Event 1</span>",
"Jan-03-2019": "Event #3"
},
{
"managerName": "Person 1",
"employeeName": "Employee 2",
"Jan-02-2019": "Event #2"
},
{
"managerName": "Person 1",
"employeeName": "Employee 3",
"Jan-01-2019": "Event #1"
}
]
},
"Feb-2019": {
"metaData": {
"month": "Feb",
"numDays": 28,
"year": "2019"
},
"data": [
{
"managerName": "Person 1",
"employeeName": "Employee 1",
"Feb-01-2019": "<span style='background-color:green;'>Event 1</span>",
"Feb-03-2019": "Event #3"
},
{
"managerName": "Person 1",
"employeeName": "Employee 2",
"Feb-06-2019": "Event #2"
},
{
"managerName": "Person 1",
"employeeName": "Employee 3",
"Feb-01-2019": "Event #1"
}
]
}
});
});
return promise;
};
HTML:
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/dataTables.bootstrap.css" rel="stylesheet" />
<link href="~/Content/fixedColumns.bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<div class="container">
<div role="tabpanel">
<ul class="nav nav-tabs"></ul>
<div class="tab-content"></div>
</div>
</div>
<script src="~/Scripts/bootstrap337.min.js"></script>
<script src="~/Scripts/jquery.dataTables.js"></script>
<script src="~/Scripts/dataTables.bootstrap.js"></script>
<script src="~/Scripts/dataTables.responsive.js"></script>
<script src="~/Scripts/dataTables.fixedColumns.js"></script>
<script src="~/Scripts/test2.js"></script>
答案 0 :(得分:0)
一切似乎都很好。唯一的是,制表符更改之后的事件侦听器无法像您在注释中提到的那样工作。
//Below works only when debugging/using breakpoints
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$.fn.dataTable.tables({ visible: true, api: true })
.columns.adjust()
.fixedColumns().relayout()
.responsive.recalc();
});
});
这是因为您正在动态呈现html内容,并且此时a[data-toggle="tab"]
元素不可用。最好在呈现选项卡和表格后放置该代码。
dataRetrievalpromise().then(function (result) {
generateTabsPromise(result).then(function (result) {
createTableHTMLPromise(result).then(function (result) {
createTableColumnsAndDataPromise(result);
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$.fn.dataTable.tables({ visible: true, api: true })
.columns.adjust()
.fixedColumns().relayout()
.responsive.recalc();
});
});
});
});