Question

我想用knockoutjs objervable数组填充我的dataTable。这是我的javascript代码：

function AppViewModel()
{
var self = this;
self.tableData = ko.observableArray();

 $.ajax({
    type: "GET",
    url: "<?php echo $this->config->base_url('api/categoryList')?>",    
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
            console.log(result);
            self.tableData(result);
        },

    error: function (err) {
            alert("err");
        }
      });// you have missed this bracket

}

var vm = new AppViewModel();
ko.applyBindings(vm);

这是我的HTML：

我从ajax请求得到的json objest是：

{
    "aaData": [
        {
            "client_Id": "",
            "categoryId": "1",
            "categoryName": "Individual",
            "categoryDescription": "",
            "lastUpdatedBy": ""
        },
        {
            "client_Id": "",
            "categoryId": "2",
            "categoryName": "Firm",
            "categoryDescription": "",
            "lastUpdatedBy": ""
        },
        {
            "client_Id": "",
            "categoryId": "3",
            "categoryName": "Private Limited Company",
            "categoryDescription": "",
            "lastUpdatedBy": ""
        },
        {
            "client_Id": "",
            "categoryId": "5",
            "categoryName": "company",
            "categoryDescription": "",
            "lastUpdatedBy": ""
        }
    ]
}

我得到的对象不是javascript中的函数错误而且DataTable无法重新初始化警报。

<table class="table table-bordered" 
    data-bind="
        dataTable: { 
            aaData: tableData, 
            options: { 
                        bJQueryUI: true, 
                        aoColumns: [ 
                            { sTitle: 'categoryName', mData: 'categoryName' }, 
                            { sTitle: 'categoryDescription', mData: 'categoryDescription' } 
                        ] 
                    } 
        }" 
/>

请帮助解决这个问题。谢谢。

Answer 1

您使用非数组的对象填充observableArray：

success: function (result) {
    console.log(result);
    self.tableData(result);

你说那个

result = {
    "aaData": [
        {"client_Id":"","categoryId":"1","categoryName":"Individual","categoryDescription":"","lastUpdatedBy":""},
        {"client_Id":"","categoryId":"2","categoryName":"Firm","categoryDescription":"","lastUpdatedBy":""},
        {"client_Id":"","categoryId":"3","categoryName":"Private Limited Company","categoryDescription":"","lastUpdatedBy":""},
        {"client_Id":"","categoryId":"5","categoryName":"company","categoryDescription":"","lastUpdatedBy":""}
    ]
}

因此您需要使用observableArray填充result.aaData：

success: function (result) {
    console.log(result);
    self.tableData(result.aaData);

编辑：

查看您正在使用的数据表bindingHandler的来源（Knockout.js DataTable bindings），您的绑定选项不正确。您应该在aaData重播data：

<table class="table table-bordered" 
    data-bind="
        dataTable: { 
            data: tableData,  // <-- Here!
            options: {
                ...

Answer 2

试试吧！这就是我将knockout与datatables集成的方法，但我不得不为淘汰代码添加一些自定义事件...

我希望他们将事件添加到淘汰源...... 注意：此小提琴的链接不起作用 <击> [的jsfiddle]

 <tbody data-bind="DataTablesForEach: {data: people, options: {jQueryUI:true,scrollY:200,paging:false,scrollCollapse:true, dom: 'rti'}}">

使用knockout observable数组填充dataTable

2 个答案:

编辑：