Knockout.js 数据表+；淘汰赛JS:“；“表中无数据”；和排序问题

正如我在下面的问题中提到的：我正在开发一个MVC应用程序，使用MVC4、knockoutJS、Web API、Bootstrap、MSSQL Server 2012等等。我使用DataTables jQuery库创建表，并使用knockoutJS将它们与数据库中的数据绑定。出现了以下两个问题：当我使用data bind=“foreach:regionsListModel.regions”绑定表时，它填充了我的表，但在表的末尾添加了一行“表中没有数据”，在表的页脚中显示“显示0到0个结果”，没有分页，当我尝试过滤结果时，它会完全清空表。当我用标题对列进行排序时也会发生同样的情况

我将再次发布代码片段

视图模型：

    var regionsModel = {
    regionId: ko.observable(),
    companyId: ko.observable(),
    name: ko.observable(),
    companyName: ko.observable()    
};

var regionsListModel = {
    regions: ko.observable()
};

function getRegions() {
    get(apiUrl + "Regions/GetRegions", {}, function (data) {
        regionsListModel.regions(data);
    });
}

function getRegion() {
    get(apiUrl + "Regions/GetRegion", { aiId: regionsModel.regionId() }, function (data) {
        regionsModel.regionId(data.RegionID);
        regionsModel.companyName(data.CompanyName);
        regionsModel.companyId(data.CompanyID);
        regionsModel.name(data.Name);
    });
}

function viewRegion() {
    $("#ViewRegionModal").modal('show');
    //regionsModel.regionId($('#ViewRegion').val());
    getRegion();
    return false;
}

视图的代码：

<table class="table table-striped table-bordered responsive" id="dtable">
                            <thead>
                                <tr>
                                    <th style="width: 20px;">ID</th>
                                    <th>Region Name</th>
                                    <th>Company Name</th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: regionsListModel.regions">
                                <tr id="ViewRegion" data-toggle="modal" data-bind="click: viewRegion, value: RegionID">
                                    <td data-bind="text: RegionID"></td>
                                    <td data-bind="text: Name"></td>
                                    <td data-bind="text: CompanyName"></td>
                                </tr>
                            </tbody>
                        </table>

---

如果有人像我一样遇到同样的问题，这里有一个解决方案，而且完全没有问题：

    function updateView() {
    $("#tableProblems").dataTable({
        "bDestroy": true,
        "sDom": "<'row-fluid dt-header'<'span6'f><'span6'>r>t<'row-fluid dt-footer'<'span6'i><'span6'p>>",
        "aaData": problemsModel.problems(),
        "aoColumns": [
            { "mDataProp": "ProblemID" },
            { "mDataProp": "CategoryName" },
            { "mDataProp": "DateOpenFormatted" },
            { "mDataProp": "DateClosedFormatted" },
            { "mDataProp": "ObjectName" },
            { "mDataProp": "Nickname" }
        ]
    });
}

函数updateView（）{
$（“#表问题”）.dataTable({
是的，
“sDom”：“t”，
“aaData”：problemsModel.problems（），
“aoColumns”：[
{“mDataProp”：“ProblemID”}，
{“mDataProp”：“CategoryName”}，
{“mDataProp”：“DateOpenFormatted”}，
{“mDataProp”：“DateClosedFormatted”}，
{“mDataProp”：“ObjectName”}，
{“mDataProp”：“昵称”}
]
});
}

我只是在页面初始化时使用了这部分代码，当我执行get*函数时，我只调用updateView（）函数，在视图端，我将tbody完全清空，剩下的由DataTables完成

---

（这是我正在开发的另一个组件的示例，不是区域，但原理是相同的）

你的问题是什么？好吧，我正在寻找方向来解决我提到的两个正在发生的问题。似乎从未调用过

getRegions

。另外，

getRegion

似乎是唯一在

regionsModel

中设置任何值的东西，但是它从中加载的URL依赖于这些值之一。感谢您注意，我刚刚编辑了这篇文章，并在调用函数的地方添加了代码。我尝试了几种使用KO和DataTables的方法，但还没能成功。即使使用jQuery来绘制表或表的某些部分，它也不起作用。我可能会尝试使用KoGrid，但如果有人有其他建议，我将不胜感激！

    function updateView() {
    $("#tableProblems").dataTable({
        "bDestroy": true,
        "sDom": "<'row-fluid dt-header'<'span6'f><'span6'>r>t<'row-fluid dt-footer'<'span6'i><'span6'p>>",
        "aaData": problemsModel.problems(),
        "aoColumns": [
            { "mDataProp": "ProblemID" },
            { "mDataProp": "CategoryName" },
            { "mDataProp": "DateOpenFormatted" },
            { "mDataProp": "DateClosedFormatted" },
            { "mDataProp": "ObjectName" },
            { "mDataProp": "Nickname" }
        ]
    });
}