Javascript jquery数据表：不正确；显示<；范围>；属于<；总计>；参赛作品；将显示消息

我正在开发一个ASP.NET网页，其中数据将显示在jquery数据表中。我能够显示数据，但我面临的问题是，“显示条目”信息显示的值不正确。

小提琴手：

HTML:

    <table id="CustomFilterOnTop" class="display nowrap" width="100%"></table>  

JS

var Report4Component = (function () {
    function Report4Component() {
        //contorls
        this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
        //data table object
        this.customFilterOnTopGrid = null;
        //variables
        this.result = null;
    }
    Report4Component.prototype.ShowGrid = function () {
        var instance = this;
        //add footer
        $('#' + instance.customFilterOnTopControl)
            .append('<tfoot><tr><th colspan="2" class="total-text">Total</th><th class="total-value"></th></tr></tfoot>');
        //create the datatable object
        instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
            columns: [
                { data: "Description", title: "Desc" },
                { data: "Status", title: "Status" },
                { data: "Count", title: "Count" }
            ],
            "paging": true,
            scrollCollapse: true,
            "scrollX": true,
            scrollY: "300px",
            deferRender: true,
            scroller: true,
            dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">i<"clear">>',
            buttons: [
                {
                    text: 'Load All',
                    action: function (e, dt, node, config) {
                        instance.ShowData(10000);
                    }
                }
            ],
            initComplete: function (settings) {
                var api = this.api(settings);
                //now, add a second row in header which will hold controls for filtering. 
                $(api.table().header()).append('<tr role="row" id="FilterRow">' +
                    '<th>Desc</th>' +
                    '<th>Status</th>' +
                    '<th>Count</th>' +
                    '</tr>');
                //add input controls for filtering
                $('#FilterRow th', api.table().header()).each(function () {
                    var title = $('#' + instance.customFilterOnTopControl + ' thead th').eq($(this).index()).text();
                    $(this).html('<input type="text" onclick="return false" placeholder="Search ' + title + '" class="form-control" />');
                });
                //todo: refactor this code. this is for displaying the scrollbar below the tfoot instead of tbody
                //when multiple tables are present, use tablename.find to get the specific class object
                //this code is not tested with other options
                $('.dataTables_scrollBody').css({
                    'overflow-x': 'hidden',
                    'border': '0'
                });
                $('.dataTables_scrollFoot').css('overflow', 'auto');
                $('.dataTables_scrollFoot').on('scroll', function () {
                    $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                });
            },
            footerCallback: function (tfoot, data, start, end, display) {
                var api = this.api();
                if (instance.result == null || instance.result.Total == undefined) {
                    return;
                }
                $(api.column(2).footer()).html(instance.result.Total);
            }
        });
        $("div.Notes").html('<div class="alert alert-warning">This is a notes section part of the table dom.</div>');
    };
    Report4Component.prototype.BindEvents = function () {
        var instance = this;
        $("#FilterRow th input").on('keyup change', function () {
            instance.customFilterOnTopGrid
                .column($(this).parent().index() + ':visible')
                .search("^" + $(this).val(), true, false, true) //uses regular expression and checks only for starts with
                .draw();
        });
    };
    Report4Component.prototype.ShowData = function (limit) {
        if (limit === void 0) { limit = 100; }
        var instance = this;
        instance.customFilterOnTopGrid.clear(); //latest api function
        instance.result = instance.GetData(limit);
        instance.customFilterOnTopGrid.rows.add(instance.result.RecordList);
        instance.customFilterOnTopGrid.draw();
    };
    Report4Component.prototype.GetData = function (limit) {
        //structure of the response from controller method
        var resultObj = {};
        resultObj.Total = 0;
        resultObj.RecordList = [];
        for (var i = 1; i <= limit; i++) {
            resultObj.Total += i;
            var record = {};
            record.Description = "This is a test description of record " + i;
            record.Status = ["A", "B", "C", "D"][Math.floor(Math.random() * 4)] + 'name text ' + i;
            record.Count = i;
            resultObj.RecordList.push(record);
        }
        return resultObj;
    };
    return Report4Component;
}());
$(function () {
    var report4Component = new Report4Component();
    report4Component.ShowGrid();
    report4Component.BindEvents();
    report4Component.ShowData();
});
function StopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    }
    else {
        evt.cancelBubble = true;
    }
}

var Report4Component=（函数（）{
函数报告4组件（）{
//控制者
this.customFilterOnTopControl=“CustomFilterOnTop”；//表id
//数据表对象
this.customFilterOnTopGrid=null；
//变数
this.result=null；
}
Report4Component.prototype.ShowGrid=函数（）{
var实例=这个；
//添加页脚
$（“#”+实例.customFilterOnTopControl）
.append（‘总计’）；
//创建datatable对象
instance.customFilterOnTopGrid=$（'#'+instance.customFilterOnTopControl）.DataTable({
栏目：[
{数据：“说明”，标题：“说明”}，
{数据：“状态”，标题：“状态”}，
{数据：“计数”，标题：“计数”}
],
“分页”：正确，
对,，
“scrollX”：正确，
滚动：“300px”，
是的，
卷轴：是的，
dom:'rt'，
按钮：[
{
文本：“全部加载”，
动作：函数（e、dt、节点、配置）{
实例.ShowData（10000）；
}
}
],
初始化完成：功能（设置）{
var api=this.api（设置）；
//现在，在标题中添加第二行，它将保存用于筛选的控件。
$（api.table（）.header（））.append（“”+
“描述”+
“地位”+
“伯爵”+
'');
//添加用于筛选的输入控件
$（'#FilterRow th'，api.table（）.header（））。每个（函数（）{
var title=$（'#'+instance.customFilterOnTopControl+'thead th'）.eq（$（this.index（））.text（）；
$（this.html（“”）；
});
//todo:重构此代码。用于在tfoot下方显示滚动条，而不是tbody
//当存在多个表时，使用tablename.find获取特定的类对象
//此代码不使用其他选项进行测试
$（'.dataTables_scrollBody'）.css({
'溢出-x'：'隐藏'，
“边框”：“0”
});
$（'.dataTables_scrollFoot'）.css（'overflow'，'auto'）；
$（'.dataTables_scrollFoot'）。在（'scroll'，函数（）{
$（'.dataTables_scrollBody'）.scrollLeft（$（this.scrollLeft（））；
});
},
footerCallback：函数（tfoot、数据、开始、结束、显示）{
var api=this.api（）；
if（instance.result==null | | instance.result.Total==未定义）{
返回；
}
$（api.column（2.footer（））.html（instance.result.Total）；
}
});
$（“div.Notes”）.html（'这是表dom的Notes部分'）；
};
Report4Component.prototype.BindEvents=函数（）{
var实例=这个；
$（“#FilterRow th input”）.on（'keyup change'，function（）{
instance.customFilterOnTopGrid
.column（$（this）.parent（）.index（）+'：visible'）
.search（“^”+$（this）.val（），true，false，true）//使用正则表达式并仅检查以
.draw（）；
});
};
Report4Component.prototype.ShowData=功能（限制）{
如果（limit==void 0）{limit=100；}
var实例=这个；
instance.customFilterOnTopGrid.clear（）；//最新的api函数
instance.result=instance.GetData（限制）；
instance.customFilterOnTopGrid.rows.add（instance.result.RecordList）；
instance.customFilterOnTopGrid.draw（）；
};
Report4Component.prototype.GetData=函数（限制）{
//控制器响应的结构方法
var resultObj={}；
结果j.Total=0；
resultObj.RecordList=[]；
对于（var i=1；i对JSFiddle进行了一些修改（heh），我想我已经发现了这个问题的原因

问题摘要：

有一个问题，滚动条不知道添加了所有行（使用
rows.add（）
而不是使用行初始化表）增加了表的物理维度，因此认为初始的0行表是当前大小。这会导致它错误地计算可见行数。
draw（）
不会有任何帮助，因为它不会重新创建表，只会创建正确的数据。表的内部维度被错误地提供给了scroller。这可能无法通过您决定在不完全销毁和重新创建表的情况下加载数据的方式解决

解决方案：

    <table id="CustomFilterOnTop" class="display nowrap" width="100%"></table>  

由于您在加载数据之前创建并加载了表/事件，因此滚动条不知何故没有意识到表的Y维度已更改（创建的表包含0行，因此它认为没有空间容纳1行以上的数据）。我不确定您应该如何更新滚动条，但我找到了一个解决方案。如果您不喜欢此解决方案，则必须检查在构建表期间加载数据的可能性

我所做的就是通过添加虚拟行来更改HTML表：

<table id="CustomFilterOnTop" class="display nowrap" width="100%">
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
<tr><td>asdf</td><td>asdf</td><td>asdf</td></tr>
</table>


asdfasdfasdf
asdfasdfasdf
asdfas