2012-01-11 23 views
10

Tôi có bảng sauRefresh KnockoutJS dữ liệu Trong DataTables

<table class="datatable zebra-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Issue</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: Publications"> 
     <tr> 
      <td><span data-bind="text: Name" /></td> 
      <td><span data-bind="text: IssueNumber" /></td> 
      <td><button type="button" class="btn" data-bind="click: $parent.DeletePublication">Delete</button></td> 
     </tr>  
    </tbody> 
</table> 

Dưới đây là một đoạn viewmodel:

function EditReaderViewModel() { 
    var self = this; 

    self.Publications = ko.observableArray([]); 

    self.OnAddPublicationSaveButtonClicked = function() { 
     //.. code omitted.  
     self.Publications.push(new Publication(publication.value, publication.label, publication.issueNumber)); 
    }; 
}; 

}

và đối tượng Publication binded đến bảng:

function Publication(id, name, issueNumber) { 
    var self = this; 

    self.Id = id; 
    self.Name = name; 
    self.IssueNumber = issueNumber; 
    self.LoadedFromDatabase = false; 
} 

Khi dữ liệu được nạp lần đầu tiên vào bảng và khởi tạo dữ liệu, ví dụ:

$(".datatable").dataTable({ // blahh }); 

Tất cả mọi thứ hoạt động tốt - các dữ liệu được nạp trong bảng, sắp xếp và lọc được làm việc vv

Bây giờ khi tôi thêm một mục mới vào mảng Ấn trong những điều viewmodel chỉ sụp đổ. Ví dụ, nói rằng tôi ban đầu có 1 mục trong mảng Publications, khi tôi thêm một mục khác, nó sẽ xuất hiện trong bảng cho đến khi tôi nhấp vào một tiêu đề cột để sắp xếp.

Dường như dữ liệu có danh sách dữ liệu nội bộ riêng của nó ở đâu đó không bao gồm Ấn phẩm mới mà tôi đã tạo.

Ai đó có thể hướng dẫn tôi cách xây dựng lại dữ liệu có thể định, có tính đến dữ liệu đó là từ chế độ xem KnockoutJS không?

Xin lưu ý rằng tôi đã xem xét Plugin ràng buộc này:

http://www.joshbuckley.co.uk/2011/07/knockout-js-datatable-bindings/

Vấn đề là khi tôi sử dụng này, tôi nhận được thông báo lỗi như:

tham số chưa biết yêu cầu ' 0 'từ nguồn dữ liệu cho hàng 0.

EDIT:

Tôi đang xem xét mã và tôi nghĩ rằng tôi thấy sự cố. Trong jQuery.DataTables.js có chức năng này function _fnGetCellData(oSettings, iRow, iCol, sSpecific)

trong chức năng đó có dòng này:

if ((sData=oCol.fnGetData(oData)) === undefined) 

nó sẽ gọi:

function _fnGetObjectDataFn(mSource) 

Bây giờ, trong function _fnGetObjectDataFn(mSource) có mã này được gọi là:

else 
{ 
    /* Array or flat object mapping */ 
    return function (data) { 
     return data[mSource]; 
    }; 
} 

data không phải là một mảng, nó là một đối tượng JSON có nghĩa là mã trên sẽ thất bại (return data[mSource];).

Tôi thực sự không chắc chắn phải làm gì ở đây.

EDIT - QUAN TRỌNG:

Là một trong những nhà bình luận đã nhận thấy, và tôi vừa khẳng định, việc tiếp cận

http://www.joshbuckley.co.uk/2011/07/knockout-js-datatable-bindings

sẽ gây ra một cảnh báo Trojan. Vì vậy, xin lưu ý rằng url này giờ là một NO-NO lớn.

+0

Cùng một vấn đề ở đây. Bạn đã tìm thấy giải pháp chưa? –

+0

@Petter - Tôi đã tìm được cách giải quyết vấn đề, nhưng nó liên quan đến việc xây dựng lại dữ liệu từ đầu. Về cơ bản, bảng HTML được lưu trữ trong một khung nhìn từng phần mà tôi tải lại mỗi khi tôi cần làm mới dữ liệu. Sau mỗi lần tải lại, tôi gọi plugin ".dataTable()" trên bảng đó. Vâng, đó là một chút dài dòng để cập nhật nội dung, nhưng nó thực sự nhanh chóng ở cấp độ giao diện người dùng. Không có sự chậm lại thực sự. –

+0

FWIW - Tôi nhận được cảnh báo từ Kaspersky khi tôi cố truy cập liên kết joshbuckley. "đối tượng HTTP độc hại ... đã phát hiện: Chương trình Trojan: 'HEUR: Trojan.Script.Iframer' (sửa đổi)". – mg1075

Trả lời

1

Bạn đề cập đến việc bạn đã sử dụng plugin có thể đặt dữ liệu và nhận được thông báo "Yêu cầu không xác định được yêu cầu '0' từ nguồn dữ liệu cho hàng 0".

Trong các kinh nghiệm trước đây của tôi bằng cách sử dụng dữ liệu mà không cần loại bỏ plugin, tôi nhận được lỗi này chỉ sử dụng nhiều cột hơn định nghĩa tiêu đề hoặc ngược lại. Bạn phải kiểm tra phần tbody và thead của bạn và làm cho nó chắc chắn rằng cả hai đều có cùng kích thước.

Hoặc có thể bạn đang sử dụng "aoColumnDefs" tùy chọn khi bạn khởi tạo table.Again kiểm tra các tùy chọn definiton và chắc chắn rằng bạn havent cố gắng đạt cột biết:

Ví dụ nếu bạn có một định nghĩa như thế này

"aoColumnDefs": [{ 
     "bSearchable": false, 
     "bVisible": false, 
     "aTargets": [0] 
    }, { 
     "bSortable": false, 
     "bSearchable": false, 
     "sWidth": "45px", 
     "aTargets": [2] 
    }] 

và nếu bạn chỉ có 2 phần này sẽ cho bạn lỗi đó. Vì bạn đang đạt cột thứ ba với aTargets: [2]

+0

Chúc mừng cho điều này. Tôi đã tìm thấy giải pháp thay thế mà tôi sẽ đăng trên đây khi tôi thêm gt thời gian. Về cơ bản nó liên quan đến việc tải dữ liệu cho bảng dưới dạng xem một phần ASP NET MVC; Sau đó tôi sử dụng jQuery để tải HTML của chế độ xem một phần đó vào div bảng chính trên trang của tôi. Sau đó tôi gọi phương thức '.dataTable()' của DataTable để khởi tạo lại bảng. –

0

Tôi đã gặp sự cố tương tự như bạn đã mô tả ở đây (và không có ý định khám phá liên kết "liên kết" sau cảnh báo Kaspersky, ngay cả khi nó thực sự an toàn.)

Đi một chút về cách tiếp cận được đề xuất ở đây KnockoutJs - how to use datatables with existing bound table, tôi đã kết thúc bằng cách sử dụng tuyến đường khi sử dụng loại trực tiếp trên bàn, tôi thêm vào lệnh knockout nếu kiểm tra nếu observableArray có ít nhất một hàng Dữ liệu.

<!-- if Publications.length() > 0 --> 
<table class="datatable zebra-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Issue</th> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- ko foreach: Publications --> 
     <tr> 
      <td><span data-bind="text: Name" /></td> 
      <td><span data-bind="text: IssueNumber" /></td> 
     </tr> <!-- /ko --> 
    </tbody> 
</table> 
<!-- /ko --> 

Khi tải Mô hình xem, tôi gọi hàm dataTables bên trong hàm thành công .ajax của tôi.

Sau đó, một phần khác để làm cho nó hoạt động là sử dụng dataTables "bStateSave": true, để mọi sắp xếp tôi đã thực hiện trước khi làm mới sẽ không bị mất.

3

Tôi biết đó là một chủ đề cũ hơn nhưng vì tôi đã tìm thấy nó khi tôi gặp vấn đề tương tự, tôi cảm thấy cần phải đăng giải pháp để những người khác có thể tìm thấy nó nhanh hơn.

Khi làm mới Bảng, bạn có thể đơn giản .clear() và sau đó .destroy() bảng. Sau đó, chỉ cần khởi tạo lại bảng bằng cách sử dụng .DataTable()

Mặc dù đó là một chút lộn xộn vì bạn thực sự xé xuống cấu trúc và xây dựng lại nó hoạt động rất trơn tru.

Bạn chỉ cần thêm số nhận dạng boolean mà bạn đặt thành true vào lần đầu tiên bạn khởi tạo bảng. Và tất nhiên bạn phải liên kết Bảng với một biến để có thể làm việc với ma trận DataTable API trên DOM Element.

if (managementLoadedDone){ 
      userTable.clear(); 
      userTable.destroy(); 
     } 

Fill dữ liệu trong bảng của bạn

userTable = $("#userTable").DataTable({responsive: true}); 
      usersLoaded = true; 
Các vấn đề liên quan