DataTable both fixedColumns and scroller enabled issue
DataTable both fixedColumns and scroller enabled issue
gaojz
Posts: 2Questions: 2Answers: 0
<div id="PageBox" class="page-container container-fluid">
<div class="main-container" id="main-container">
<div class="container-inner">
<div id="DataReportList" class="report">
<table id="DataReportTable" class="cell-border">
<thead>
<tr><th valign="middle" class="location-column " rowspan="1">Location</th><th valign="middle" class="date-column " rowspan="1">Date</th><th rowspan="1" class="v-align">Number</th><th rowspan="1" class="v-align">Times</th></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var tbodyJson = { "HeaderHtml": "<tr><th valign=\"middle\" class=\"location-column \" rowspan=\"1\">Location</th><th valign=\"middle\" class=\"date-column \" rowspan=\"1\">Date</th><th rowspan=\"1\" class=\"v-align\">Number</th><th rowspan=\"1\" class=\"v-align\">Times</th></tr>", "Total": 63, "Rows": [["LEDCITIBank ", "2014-07-01", "43571", "148890"], ["LEDCITIBank ", "2014-07-02", "48064", "169057"], ["LEDCITIBank ", "2014-07-03", "50984", "180653"], ["LEDCITIBank ", "2014-07-04", "50718", "173505"], ["LEDCITIBank ", "2014-07-05", "45895", "155924"], ["LEDCITIBank ", "2014-07-06", "43986", "149236"], ["LEDCITIBank ", "2014-07-07", "55107", "176880"], ["LEDCITIBank ", "2014-07-08", "51659", "181139"], ["LEDCITIBank ", "2014-07-09", "53150", "186335"], ["LEDCITIBank ", "2014-07-10", "52247", "178998"], ["LEDCITIBank ", "2014-07-11", "53542", "181778"], ["LEDCITIBank ", "2014-07-12", "41873", "138226"], ["LEDCITIBank ", "2014-07-13", "41696", "139473"], ["LEDCITIBank ", "2014-07-14", "50986", "178121"], ["LEDCITIBank ", "2014-07-15", "53732", "210509"], ["LEDCITIBank ", "2014-07-16", "61054", "237926"], ["LEDCITIBank ", "2014-07-17", "65811", "222373"], ["LEDCITIBank ", "2014-07-18", "58850", "203358"], ["LEDCITIBank ", "2014-07-19", "52947", "179587"], ["LEDCITIBank ", "2014-07-20", "44239", "147512"], ["LEDCITIBank ", "2014-07-21", "57797", "182626"], ["LEDCITIBank ", "2014-07-22", "52473", "179929"], ["LEDCITIBank ", "2014-07-23", "52599", "180758"], ["LEDCITIBank ", "2014-07-24", "61585", "189922"], ["LEDCITIBank ", "2014-07-25", "53966", "183916"], ["LEDCITIBank ", "2014-07-26", "47656", "157493"], ["LEDCITIBank ", "2014-07-27", "36709", "118410"], ["LEDCITIBank ", "2014-07-28", "50182", "175092"], ["LEDCITIBank ", "2014-07-29", "52371", "183763"], ["LEDCITIBank ", "2014-07-30", "53576", "187956"], ["LEDCITIBank ", "2014-07-31", "55369", "194128"], ["LEDCITIBank ", "2014-08-01", "64007", "201137"], ["LEDCITIBank ", "2014-08-02", "56481", "195084"], ["LEDCITIBank ", "2014-08-03", "45103", "150229"], ["LEDCITIBank ", "2014-08-04", "50149", "176157"], ["LEDCITIBank ", "2014-08-05", "51521", "180242"], ["LEDCITIBank ", "2014-08-06", "52263", "182949"], ["LEDCITIBank ", "2014-08-07", "52302", "182392"], ["LEDCITIBank ", "2014-08-08", "53829", "189116"], ["LEDCITIBank ", "2014-08-09", "47112", "159364"], ["LEDCITIBank ", "2014-08-10", "44099", "150863"], ["LEDCITIBank ", "2014-08-11", "51103", "182085"], ["LEDCITIBank ", "2014-08-12", "40592", "118457"], ["LEDCITIBank ", "2014-08-13", "41325", "121364"], ["LEDCITIBank ", "2014-08-14", "39815", "115640"], ["LEDCITIBank ", "2014-08-15", "45599", "133359"], ["LEDCITIBank ", "2014-08-16", "40683", "117075"], ["LEDCITIBank ", "2014-08-17", "31526", "89822"], ["LEDCITIBank ", "2014-08-18", "35514", "104060"], ["LEDCITIBank ", "2014-08-19", "37677", "110030"], ["LEDCITIBank ", "2014-08-20", "37354", "108381"], ["LEDCITIBank ", "2014-08-21", "41713", "120711"], ["LEDCITIBank ", "2014-08-22", "25747", "70651"], ["LEDCITIBank ", "2014-08-23", "41452", "126306"], ["LEDCITIBank ", "2014-08-24", "32404", "97472"], ["LEDCITIBank ", "2014-08-25", "41769", "131051"], ["LEDCITIBank ", "2014-08-26", "43112", "134112"], ["LEDCITIBank ", "2014-08-27", "42860", "132395"], ["LEDCITIBank ", "2014-08-28", "43354", "133373"], ["LEDCITIBank ", "2014-08-29", "45077", "138586"], ["LEDCITIBank ", "2014-08-30", "39816", "121757"], ["LEDCITIBank ", "2014-08-31", "32464", "99246"], ["LEDCITIBank ", "2014-09-01", "38579", "121659"]] },
currentPage = 0;
function getReportData(pageSize, pageIndex) {
var data = [];
var start = pageSize * pageIndex;
if (tbodyJson.Total > start) {
for (var i = start; i < (start + Math.min(pageSize, (tbodyJson.Total - start))) ; i++) {
data.push(tbodyJson.Rows[i]);
}
}
return data;
}
$(function () {
var needMerge = $(".report > table > thead").find(".need-merge");
if (needMerge.length) {
$(".report > table > thead").find(".v-align").css("line-height", "50px");
}
var topBoxHeight = $("#TopBox").outerHeight(true);
var footerHeight = $("#footer").outerHeight(true);
var tableHeight = $(window).height() - topBoxHeight - footerHeight - (needMerge.length ? 160 : 140);
var dataTable = $("#DataReportTable").dataTable({
paging: true,
ordering: false,
searching: false,
serverSide: false,
info: false,
scrollY: 400,
scrollX: "100%",
scrollCollapse: true,
deferRender: true,
dom: "rtiS",
scroller: {
boundaryScale: 0.75,
loadingIndicator: true
},
ajax: function (data, callback, settings) {
callback({
draw: data.draw || 1,
data: getReportData(data.length || 20, currentPage),
recordsTotal: tbodyJson.Total,
recordsFiltered: tbodyJson.Total
});
}
//data: tbodyJson.Rows
});
var fc = new $.fn.dataTable.FixedColumns(dataTable, {
leftColumns: 2,
heightMatch: "none"
});
$(window).resize(function () {
dataTable.fnDraw();
});
});
</script>
Above is my html code. But when I drag the X scroll bar, the table head fixed, however the left column not fixed. Anybody encounters this issue?
This discussion has been closed.