我正在使用bootstrap-3并在加载时隐藏一些表。 这是我的HTML代码
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="box box-info">
<div class="box-header">
@*<h3 class="box-title">Raise Invoice </h3>*@
<div class="btn-group" style="float:right">
<button type="button" class="btn btn-info">Export</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
@*<li><a href="#"><img src="~/Content/js/plugins/images/excel.png" /> Excel</a></li>
<li><a href="#"><img src="~/Content/js/plugins/images/pdf.png" /> PDF</a></li>
<li><a href="#"><img src="~/Content/js/plugins/images/csv.png" /> CSV</a></li>*@
<li><a href="@Url.Action("RaiseInvoiceReport", new { type = "EXCEL" })" id="excelExport"><img src="~/Content/js/plugins/images/excel.png" /> Excel</a></li>
<li><a href="@Url.Action("RaiseInvoiceReport", new { type="PDF"})"><img src="~/Content/js/plugins/images/pdf.png" /> PDF</a></li>
<li><a href="@Url.Action("RaiseInvoiceReportCsv")"><img src="~/Content/js/plugins/images/csv.png" /> CSV</a></li>
</ul>
</div>
<div class="btn-group" style="float:right;padding-right: 1%;">
<button type="button" class="btn btn-info" id="GenerateInvoice"><img src="~/Content/js/plugins/images/add.png" height="17" width="20" /> Generate Invoice</button>
</div>
@*<a href="#" class="t-add-user-link"><i class="t-add-new-user-icon" </i><span>Add new user</span></a>*@
</div>
</div>
@if(Model.message!="")
{
<div id="InputError" class="ErrorDiv" style="color: #D8000C; margin: 8px 0px;padding:5px;background-color: #FFBABA;">
<i class="fa fa-times-circle" style="font-size:17px"><strong> Error!</strong></i>
<ul>
<li>@Model.message</li>
</ul>
</div>
}
else
{
<div id="InputError" class="ErrorDiv" >
</div>
}
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" id="phaseTab">
<li class="active"><a href="#tab_1" id="RequirementsTab" data-toggle="tab">Screen / Task</a></li>
<li><a href="#tab_2" id="ChangeRequestTab" data-toggle="tab">Change Request</a></li>
</ul>
<div class="panel panel-default">
<div class="panel-body">
<div class="tab-content">
<div style="width:100%" class="tab-pane active " id="tab_1">
<table style="width:100%" class="table table-striped table-bordered table-hover" id="dataTables-RequirementsInvoice">
<thead style="background-color:#E0EEEE">
<tr>
<th>Screen / Task</th>
<th >Product</th>
<th >Source Control Code</th>
<th >SOW Estimate</th>
<th >Complexity</th>
<th >Sprint</th>
<th>Phase</th>
<th>Overall Estimate</th>
<th >Estimated Hours</th>
<th >Actual Hours</th>
<th class="hidden">Created Date</th>
<th class="hidden">Created By</th>
<th class="hidden">Updated Date</th>
<th class="hidden">Updated By</th>
<th class="hidden">Row Version</th>
<th >Invoice Hours</th>
<th >Amount</th>
<th class="hidden">Release Date</th>
<th >Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>RequirementName</td>
<td>ProductName</td>
<td>1235</td>
<td>SowEffort</td>
<td>ComplexityName</td>
<td>SprintName</td>
<td>PhaseName</td>
<td>OverallEstimate</td>
<td>EstimatedHours</td>
<td>ActualHours</td>
<td class="hidden">CreatedDate</td>
<td class="hidden">CreatedBy</td>
<td class="hidden">UpdatedDate</td>
<td class="hidden">UpdatedBy</td>
<td class="hidden">RowVersion</td>
<td>InvoiceHours</td>
<td>Amount</td>
<td class="hidden">ReleaseDate</td>
<td><input type="checkbox" class="flat-red"></td>
</tr>
</tbody>
</table>
</div>
<div style="width:100%" class="tab-pane " id="tab_2">
<table style="width:100%" class="table table-striped table-bordered table-hover" id="dataTables-ChangeRequestInvoice">
<thead style="width:100%; background-color:#E0EEEE">
<tr>
<th >Screen / Task</th>
<th >Description</th>
<th>Product</th>
<th>Source Control Code</th>
<th>Estimated Hours</th>
<th>Hours Spent</th>
<th class="hidden">Created Date</th>
<th class="hidden">Created By</th>
<th class="hidden">Updated Date</th>
<th class="hidden">Updated By</th>
<th class="hidden">Row Version</th>
<th>Invoice Hours</th>
<th>Amount</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr >
<td>ChangeRequestName</td>
<td>Description</td>
<td>ProductName</td>
<td>SourceControlId</td>
<td>EstimatedHours</td>
<td>HoursSpent</td>
<td class="hidden">CreatedDate</td>
<td class="hidden">CreatedBy</td>
<td class="hidden">UpdatedDate</td>
<td class="hidden">UpdatedBy</td>
<td class="hidden">RowVersion</td>
<td>InvoiceHours</td>
<td >Amount</td>
<td><input type="checkbox" class="flat-red"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
现在我正在初始化数据表：
var RequirementInvoiceTable=$('#dataTables-RequirementsInvoice').DataTable({
"scrollX": true,
"scrollCollapse": true,
"oLanguage": {
"sInfoEmpty": '',
"sEmptyTable": "No Data Available",
}
});
var ChangeRequestInvoiceTable=$('#dataTables-ChangeRequestInvoice').DataTable({
"scrollX": true,
"fixedHeader": true,
"scrollCollapse": true,
"oLanguage": {
"sInfoEmpty": '',
"sEmptyTable": "No Data Available",
}
});
当我给XScroll时，数据表hedder不起作用：是的 它适用于在页面加载时可见的第一个表，并且不会为隐藏的页面进行调用。 看到图像 click below to see screenshot
