DataTables + KnockoutJS: "No data in the table" and sorting issues

Question

As I've mentioned in the following question: How do I pass an ID from View to the ViewModel as a parameter for GET function? I'm developing an MVC application, using MVC4, knockoutJS, Web API, Bootstrap, MSSQL Server 2012 and so forth. I'm using DataTables jQuery library for creating tables and binding them with data from the DB using knockoutJS. The following two issues are occuring: when I bind the table with a data-bind="foreach: regionsListModel.regions", it populates my table, but it adds a row "No data in the table" at the end of it, in the table footer it says "Showing 0 to 0 of 0 results", no pagination, and when I try to filter the results it empties the table completely. The same happens when I sort a column with it's header.

I'll post the code snippets again.

ViewModel:

    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;
}

Code for the view:

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

The picture of the problem: http://i.imgur.com/CNRnRlW.png

Any help would be appreciated!

EDIT: Adding the code that calls the getRegions (it is located in the Regions.js file, and the ViewModel is placed in RegionsData.js, both are loaded when the page is loaded).

$(function () {
    ko.applyBindings(regionsModel);

    getRegions();
    getCompanies();

    $("#NewRegionButton").click(function () {
        $("#NewRegionModal").modal('show');
        return false;
    });

    $("#ViewRegion").click(function () {
        $("#ViewRegionModal").modal('show');
        return false;
    });

    $("#NewRegionModalClose").click(function () {
        clearFields();
        $("#NewRegionModal").modal('hide');
        return false;
    });

    $("#NewRegionSave").click(function () {
        newRegion();
        $("#NewRegionModal").modal('hide');
        return false;
    });

    $("#ViewRegionClose").click(function () {
        $("#ViewRegionModal").modal('hide');
        return false;
    });

    $("#ViewRegionEdit").click(function () {
        $("#ViewRegionModal").modal('hide');
        $("#EditRegionModal").modal('show');
        return false;
    });

    $("#RegionUpdateSave").click(function () {
        updateRegion();
        $("#EditRegionModal").modal('hide');
        return false;
    });

    $("#ViewRegionEditClose").click(function () {
        clearFields();
        $("#EditRegionModal").modal('hide');
        return false;
    });
})

Answer 1

If anyone comes to the same problem like I did, here's the solution, and it's completely knockout-free:

    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" }
        ]
    });
}

I just used this part of code at the initialization of page, and when I do the get* function, I just call the updateView() function, on the View side, I left tbody completely empty, DataTables does the rest.

(This is an example of another component I'm developing, not the Regions, but the principle is the same)