DataTable both fixedColumns and scroller enabled issue

DataTable both fixedColumns and scroller enabled issue

gaojzgaojz 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.