Issue with 2 similar data tables on same page having scrolling enabled
Issue with 2 similar data tables on same page having scrolling enabled
avanis
Posts: 1Questions: 0Answers: 0
I have a scenario where I load two datatables, but not at the same time, while on is displayed other remains hidden.The datatable I display the first gets displayed correctly but the the datatable I display the second time has its' headers shrinked.
JS Code:
function intradayGrid(data, elementId) {
elementId = $(elementId).DataTable({
"autoWidth": false,
"dom": '<"top"i>rt<"bottom"flp><"clear">',
"stateSave": true,
"responsive": false,
"bFilter": true,
"renderer": "bootstrap",
"searching": true,
"scroller": true,
"deferRender": true,
"scrollY": '200px',
"bScrollCollapse": true,
"paging": true,
data: data,
"stripeClasses": ['odd', 'even'],
"language": {
"emptyTable": "No records found",
"zeroRecords": "No Matching Records Found"
},
"columnDefs": [
{
targets: 0,
className: "text-left",
"data": "quantity",
"width": '100%',
render: function (data) {
if (Math.floor(data) !== data) {
return commaSeparated(data, true)
} else {
return commaSeparated(data, false)
}
}
},
{
targets: 1,
className: "text-left",
"data": "instrument",
"width": '100%',
},
{
targets: 2,
className: "text-left",
"data": "price",
"width": '100%',
render: function (data, type, row) {
return currencyFormatter(data)
}
},
{
targets: 3,
className: "text-left",
"data": "marketValue",
"width": '100%',
render: function (data, type, row) {
return currencyFormatter(data)
}
},
{
targets: 4,
className: "text-left",
"data": "securityDescription",
"width": '100%',
},
{
targets: 5,
className: "text-left",
"data": "securityType",
"width": '100%',
render: function (data, type, row) {
switch (data) {
case "MUTUAL_FUND":
return "Mutual Fund"
case "BOND":
return "Bond"
case "STOCK":
return "Stock"
case "DIRECT_INVESTMENT":
return "Direct Investment"
case "OPTION":
return "Option"
case "CLOSED_END_FUND":
return "Closed End Fund"
default:
return 'UIT'
}
}
},
],
"order": [
[0, 'asc']
]
});
$(elementId).css('display', elementId);
//intradayTable.columns.adjust().draw();
yadcf.init(elementId, [{
column_number: 0,
filter_type: 'text',
filter_default_label: '',
style_class: 'filterClass'
},
{
column_number: 1,
filter_type: 'text',
filter_default_label: ''
},
{
column_number: 2,
filter_type: "text",
filter_default_label: ''
},
{
column_number: 3,
filter_type: "text",
filter_default_label: ''
},
{
column_number: 4,
filter_type: "text",
filter_default_label: ''
},
{
column_number: 5,
filter_type: 'text',
filter_default_label: '',
},
], {
//filters_position: 'header',
cumulative_filtering: true,
onInitComplete: function () {
yadcf.exResetAllFilters(elementId);
}
});
}
Here elementId is dynamic and decides to load which table.I have 2 datatables with exact same info but appear on different parts of the page so are binded with a different css.
Below is the html code:
``` <div class="account-position-right panel-form " style="display:block">
<div class="bottom-content full-width">
<div class="position-form-right">
<form class="form-inline">
<table
class="table table-bordered intraday-tbl-bottom theme-table table-striped display nowrap"
id="intraday-tbl-bottom"
cellpadding="0"
width="100%">
<thead width="100%">
<tr>
<th>Quantity</th>
<th>Symbol</th>
<th>Price</th>
<th>Market Value</th>
<th>Description</th>
<th>Class</th>
</tr>
</thead>
<tfoot class="tableFilterHead">
<tr>
<th id="tableFilterquantity"></th>
<th id="tableFilterinstrument"></th>
<th id="tableFilterprice"></th>
<th id="tableFiltermarketValue"></th>
<th id="tableFiltersecurityDescription"></th>
<th id="tableFiltersecurityType"></th>
</tr>
</tfoot>
<tbody></tbody>
</table>
</form>
</div>
</div>
</div>
```
if i remove the scrollY component it works but I need to restrict the scrolling to a particular height.
And the problem arises only with one table and not the other.
Replies
Sounds like you need to use
columns.adjust()when unhiding the second table.Kevin