DataTables + KnockoutJS: «Нет данных в таблице» и вопросы сортировки

Question

Как я уже говорил в следующем вопросе: How do I pass an ID from View to the ViewModel as a parameter for GET function? Я разрабатываю приложение MVC с использованием MVC4, knockoutJS, Web API, Bootstrap, MSSQL Server 2012 и так далее. Я использую библиотеку jQuery DataTables для создания таблиц и связывания их с данными из БД с помощью knockoutJS. Возникают следующие две проблемы: когда я привязываю таблицу с помощью data-bind = "foreach: regionsListModel.regions", она заполняет мою таблицу, но она добавляет строку «Нет данных в таблице» в конце ее, в в нижнем колонтитуле таблицы указано «Показывать 0 до 0 из 0 результатов», нет разбивки на страницы, и когда я пытаюсь отфильтровать результаты, он полностью опустошает таблицу. То же самое происходит, когда я сортирую столбец с его заголовком.

Я отправлю фрагменты кода снова.

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

Код для вида:

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

Изображение проблемы: http://i.imgur.com/CNRnRlW.png

Любая помощь будет оценен по достоинству!

EDIT: добавление кода, вызывающего getRegions (он находится в файле Regions.js, а ViewModel помещается в RegionsData.js, оба загружаются при загрузке страницы).

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

Если кто-то приходит к той же проблеме, как я сделал, вот решение, и это полностью Нокаут бесплатно:

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

Я просто использовал эту часть кода при инициализации страницы и когда я выполняю функцию get *, я просто вызываю функцию updateView(), на стороне View, я оставил tbody полностью пустым, DataTables делает все остальное.

(Это пример другого компонента я разрабатываю, а не регионов, но принцип тот же)