2012-02-27 29 views
9

Tôi đang làm việc tích hợp backbone.js với dataTables.Tôi làm cách nào để yêu cầu dataTables kiểm tra dữ liệu cập nhật trong bộ sưu tập xương sống?

Tôi có một jsfiddle đây: http://jsfiddle.net/mwagner72/ekgZk/17/

Cho đến nay tôi nghĩ tôi là gần gũi nhất với thiết lập này:

var Chapter = Backbone.Model; 
var chapters = new Backbone.Collection(); 

chapters.add(new Chapter({ page: 9, title: "The End" })); 
chapters.add(new Chapter({ page: 5, title: "The Middle" })); 
chapters.add(new Chapter({ page: 1, title: "The Beginning" })); 

$('#table_id_3').dataTable({ 
    "aoColumns": [ 
     {"sTitle": "Title", "mDataProp": "title"}, 
     {"sTitle": "Page #","mDataProp": "page"}], 
    sAjaxSource: "", 
    sAjaxDataProp: "", 
    fnServerData: function(sSource, aoData, fnCallback) { 
     console.log('here we go'); 
     fnCallback(chapters.toJSON()); 
    } 
}); 

này được sử dụng bộ sưu tập của tôi như là nguồn dữ liệu cho DataTable tôi.

Câu hỏi của tôi:

Làm cách nào để cho dữ liệuCó thể kiểm tra dữ liệu cập nhật trong bộ sưu tập?

Trả lời

14

Vì vậy, tôi đã tìm ra câu trả lời với một số trợ giúp từ allen trên trang dữ liệu jquery dataTables. mẹo là sử dụng fnReloadAjax() sẽ vẽ lại dữ liệu của bạn dựa trên bộ sưu tập một lần nữa.

$('#table_id_3').dataTable({ 
    "aoColumns": [ 
     { "sTitle": "Title", "mDataProp": "title" }, 
     { "sTitle": "Page #", "mDataProp": "page" }], 
    sAjaxSource: "", 
    sAjaxDataProp: "", 
    fnServerData: function(sSource, aoData, fnCallback){ 
     console.log(chapters.toJSON()); 
     fnCallback(chapters.toJSON()); 
    } 
}); 

chapters.add(new Chapter({page: 4, title: "The next bunny"})); 

var oTable3 = $('#table_id_3').dataTable(); 
oTable3.fnReloadAjax(); 

Tôi đã một jsfiddle nằm ở đây: http://jsfiddle.net/mwagner72/ekgZk/

+2

này hoạt động, nhưng nếu có ai là một chút như tôi và không bao giờ thực sự đã có một cái nhìn tại các fiddle, hàm fnReloadAjax là một plugin từ http: // datatables.net/plug-ins/api (Ít nhất điều đó không rõ ràng đối với tôi) – ivarni

3

Bạn nên tạo Backbone.View trỏ đến trường hợp dữ liệu và được liên kết với bộ sưu tập chương của bạn. Bạn có thể sử dụng hàm render của khung nhìn để đọc từ bộ sưu tập và tái tạo lại lưới. Ngoài ra, bạn có thể ràng buộc sự kiện "thay đổi" trên bộ sưu tập để kích hoạt chức năng hiển thị của chế độ xem, do đó bộ sưu tập của bạn và chế độ xem của bạn sẽ được đồng bộ hóa.

Các vấn đề liên quan