We are facing issues for tabulator on IE11, in our application we have dashboard where we trying to display multiple tabulator tables on click of each card.
We are able to view only one table after adding the polyfill scripts but we are unable to view the other tables we're unable to see multiple tabulators on same html page in IE11 the same is working fine in chrome/Mozilla. We tried rearranging the scripts but still the same issue and there in no error on console or the log.
we've attached the dashboard html page which consists of all the code.
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title th:text="#{label.Title}"></title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/bootstrapupdate.min.css}"/>
<link rel="stylesheet" th:href="@{/css/font.css}"/>
<link rel="stylesheet" th:href="@{/css/select2.min.css}"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" th:src="@{/js/jquery3.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap4.3.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery1.12.4.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/select2.min.js}"></script>
<script type="text/javascript" th:src="@{/js/tabulator.min.js}"></script>
<script type="text/javascript" th:src="@{/js/moment.js}"></script>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
<link rel="stylesheet" th:href="@{/css/tabulator.css}"/>
<script> var jqv3 = jQuery.noConflict(); </script>
</head>
<body id="page-top" >
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-md-12 mb-4" style="margin-bottom: 2px !important;">
<h1 class="h3 text-gray-800 headerText" style="float:left; font-size: 19px;"><label class="inline mb" th:text="#{label.Buyer}"></label> <label class="inline mb" th:text="#{label.Dashboard}"></label></h1>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2 zoom box active" style="cursor: pointer;" id="onloadId">
<div class="card-body card-link" data-toggle="collapse" href="#collapseDraft" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Draft</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.draftCount}"></div>
<img th:src="@{/img/draft.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-success shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapsePublish" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Published</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.publishedCount}"></div>
<img th:src="@{/img/publish.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-query shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapseInquery" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-query text-uppercase mb-1">In Query Stage</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.inQueryCount}"></div>
<img th:src="@{/img/query.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-response shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapseInresponse" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-response text-uppercase mb-1">In Response Stage</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.inResponseCount}"></div>
<img th:src="@{/img/inresponse.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapseShortlist" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Shortlisted</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.shortlistedCount}"></div>
<img th:src="@{/img/shortlist.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-danger shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapseSelect" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Selected</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.selectedCount}"></div>
<img th:src="@{/img/selected.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-info shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapseClosed" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Closed</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.closedCount}"></div>
<img th:src="@{/img/closed.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="collapseDraft" class="collapse show" data-parent="#accordion">
<div class="card-body">
<div class="content" id="draftTable"></div>
</div>
</div>
<div id="collapsePublish" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="content" id="publishTable"></div>
</div>
</div>
<div id="collapseInquery" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="content" id="inQueryTable"></div>
</div>
</div>
<div id="collapseInresponse" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="content" id="inResponseTable"></div>
</div>
</div>
<div id="collapseShortlist" class="collapse" data-parent="#accordion">
<div class="card-body">
<div id="shortlistTable"></div>
</div>
</div>
<div id="collapseSelect" class="collapse" data-parent="#accordion">
<div class="card-body">
<div id="selectedTable"></div>
</div>
</div>
<div id="collapseClosed" class="collapse" data-parent="#accordion">
<div class="card-body">
<div id="closedTable"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<script type="text/javascript" th:src="@{/js/vendor-portal.min.js}"></script>
<script th:inline="javascript">
//draftTable Start Dashboard
var tabledata = [];
var draftRfxObj = [[${draftRfx}]];
if(draftRfxObj == "{}"){
draftRfxObj = tabledata;
}else{
draftRfxObj = JSON.parse(draftRfxObj);
}
var publishedRfxObj = [[${publishedRfx}]];
if(publishedRfxObj == "{}"){
publishedRfxObj = tabledata;
}else{
publishedRfxObj = JSON.parse(publishedRfxObj);
}
var inQueryRfxObj = [[${inQueryRfx}]];
if(inQueryRfxObj == "{}"){
inQueryRfxObj = tabledata;
}else{
inQueryRfxObj = JSON.parse(inQueryRfxObj);
}
var inResponseRfxObj = [[${inResponseRfx}]];
if(inResponseRfxObj == "{}"){
inResponseRfxObj = tabledata;
}else{
inResponseRfxObj = JSON.parse(inResponseRfxObj);
}
var shortlistedRfxObj = [[${shortlistedRfx}]];
if(shortlistedRfxObj == "{}"){
shortlistedRfxObj = tabledata;
}else{
shortlistedRfxObj = JSON.parse(shortlistedRfxObj);
}
var selectedRfxObj = [[${selectedRfx}]];
if(selectedRfxObj == "{}"){
selectedRfxObj = tabledata;
}else{
selectedRfxObj = JSON.parse(selectedRfxObj);
}
var closedRfxObj = [[${closedRfx}]];
if(closedRfxObj == "{}"){
closedRfxObj = tabledata;
}else{
closedRfxObj = JSON.parse(closedRfxObj);
}
var allRfxForBuyerObj = [[${allRfxForBuyer}]];
if(allRfxForBuyerObj == "{}"){
allRfxForBuyerObj = tabledata;
}else{
allRfxForBuyerObj = JSON.parse(allRfxForBuyerObj);
}
var table = new Tabulator("#draftTable", {
height:310,
data:draftRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"show",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", formatter:"textarea", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false},
{title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Planned Publish Date", field:"plannedPublishedDate", widthGrow:2},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
],
initialSort:[
{column:"plannedPublishedDate", dir:"asc"},
],
});
//draft Table End Dashboard
//Publish Table Start Dashboard
var table = new Tabulator("#publishTable", {
height:310,
data:publishedRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"show",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false},
{title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Planned Publish Date", field:"plannedPublishedDate", widthGrow:2},
{title:"Actual Publish Date", field:"actualPublishedDate", widthGrow:2},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:1},
],
initialSort:[
{column:"actualPublishedDate", dir:"asc"},
],
});
//Publish Table End Dashboard
//In Query Table Start Dashboard
var table = new Tabulator("#inQueryTable", {
height:310,
data:inQueryRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"show",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false},
{title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"Query Start Date", field:"queryResolutionStartDate", widthGrow:2},
{title:"Query End Date", field:"queryResolutionEndDate", widthGrow:2},
{title:"Query Raised", field:"queryRaised", widthGrow:2},
{title:"Query Resolved", field:"queryResolved", widthGrow:2},
],
initialSort:[
{column:"queryResolutionStartDate", dir:"asc"},
],
});
//In Query Table End Dashboard
//inResponseTable Start Dashboard
var tabledata = [];
var table = new Tabulator("#inResponseTable", {
height:310,
data:inResponseRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"hide",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false,},
{title:"Voucher Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"Response Start Date", field:"inResponseStartDate", widthGrow:2},
{title:"Response End Date", field:"inResponseEndDate", widthGrow:2},
{title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
{title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
],
initialSort:[
{column:"inResponseStartDate", dir:"asc"},
],
});
//inResponseTable Table End Dashboard */
//shortlist Table Start Dashboard
var tabledata = [];
var table = new Tabulator("#shortlistTable", {
height:310,
data:shortlistedRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"hide",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false,},
{title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
{title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
{title:"No of Suppliers Shortlisted", field:"suppliersShortlistedCount", widthGrow:2},
{title:"Date of Shortlisting", field:"shortlistingDate", widthGrow:2},
],
initialSort:[
{column:"shortlistingDate", dir:"asc"},
],
});
//shortlist Table End Dashboard
//selected Table Start Dashboard
var tabledata = [];
var table = new Tabulator("#selectedTable", {
height:310,
data:selectedRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"hide",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false,},
{title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
{title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
{title:"No of Suppliers Shortlisted", field:"suppliersShortlistedCount", widthGrow:2},
{title:"Date of Shortlisting", field:"shortlistingDate", widthGrow:2},
{title:"Date of Selection", field:"selectionDate", widthGrow:2},
],
initialSort:[
{column:"selectionDate", dir:"asc"},
],
});
//selected Table End Dashboard
//Closed Table Start Dashboard
var tabledata = [];
var table = new Tabulator("#closedTable", {
height:310,
data:closedRfxObj,
layout:"fitColumns",
pagination:"local",
placeholder:"Currently No Records Available.",
paginationSize:8,
responsiveLayout:"hide",
columns:[
{title:"Title", field:"title", widthGrow:1},
{title:"Rfx Id", field:"rfxHeaderId",visible:false,},
{title:"RFX Number", field:"voucherNo", widthGrow:1, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
{title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
{title:"No of Suppliers Shortlisted", field:"suppliersShortlistedCount", widthGrow:2},
{title:"Date of Shortlisting", field:"shortlistingDate", widthGrow:2},
{title:"Date of Selection", field:"selectionDate", widthGrow:2},
{title:"Closure Date", field:"closureDate", widthGrow:1},
],
initialSort:[
{column:"closureDate", dir:"asc"},
],
});
//Closed Table End Dashboard
</script>
<script th:inline="javascript">
$(document).ready(function(){
$('.box').click(function(){
if($('.active').length){
$('.active').not($(this)).removeClass('active').addClass('box');
}
$(this).removeClass('box').addClass('active');
});
});
</script>
</body>
</html>
There are two issues with your code that i can identify.
The first is that you are creating all the tables on the same table variable (ie the second table is replacing the first table on the same variable), while this wont stop the tables working it is bad practice and also it means there is no way to call any functions on them after they have been created, which brings me onto my second point.
The reason the tables aren't showing is likely because the tables are hidden when they are created. Due to the way the DOM works, the table has to be visible when it is created in order for Tabulator to calculate how the table should be laid out.
Most modern browsers allow access to an ES8 feature, the resizeObserver which tells Tabulator when its containing element has changed visibility or been resized, which allows it to redraw itself when needed. Unfortunately older browsers like IE do not have this, which means that Tabulator has no idea when it has been made visible.
This means that you need to call the redraw function on the table when it becomes visible:
table.redraw();
Which is why you will need to declare all your tables to separate variables so that you can call the redraw function on each of them as needed.
If storing them all in separate variables is a problem for some reason then if you are using Tabulator 4.5 or higher you can look up tables by CSS selector using the following code:
var table = Tabulator.prototype.findTable("#example-table")