cách tải biến JSON cục bộ bằng cách sử dụng jquery datatable

Question

Tôi có một tập dữ liệu JSON cục bộ. Tôi muốn sử dụng plugin jquery datatable để hiển thị nó. Có bất kỳ thiết lập hoặc cấu hình bên trong plugin datatable để hiển thị dữ liệu? Tất cả những gì tôi có thể tìm thấy là thực hiện cuộc gọi AJAX và cuộc gọi máy chủ.

Cảm ơn sự giúp đỡ.

Answer 1

Bạn có thể cung cấp DataTables với dữ liệu 4 cách khác nhau

• DOM
• Javascript array
• Ajax source
• Server side processing

Trong trường hợp của bạn, bạn sẽ muốn sử dụng tùy chọn thứ hai (Javascript Array). Bạn sẽ cần phải dịch hình dạng của đối tượng JSON của bạn thành một đối tượng mảng.

Dưới đây là một ví dụ

var json = { 
    BrowserStats : [ 
    { engine: "Trident", browser: "IE 4.0", platform: "Win 95+", version: 4 }, 
    { engine: "Trident", browser: "IE 5.0", platform: "Win 95+", version: 5 }, 
    { engine: "Trident", browser: "IE 5.5", platform: "Win 95+", version: 5.5 } 
    ] 
}; 

var data = jQuery.map(json.BrowserStats, function(el, i) { 
    return new [el.engine, el.browser, el.platform, el.version]; 
}); 

$('#example').dataTable({ 
    "aaData": data, 
    "aoColumns": [ 
    { "sTitle": "Engine" }, 
    { "sTitle": "Browser" }, 
    { "sTitle": "Platform" }, 
    { "sTitle": "Version"} 
    ] 
}); 

Answer 2

Bạn có thể nhận json tập tin địa phương của bạn thực hiện một cuộc gọi ajax bình thường, với một số hãy cẩn thận (xem http://en.wikipedia.org/wiki/Same_origin_policy, hoặc jQuery's .getJSON using local files stopped working on Firefox 3.6.13, fwiw)

Nhưng nó chắc chắn ta có thể làm:

$.getJSON('page.json', function(data) { 
    /* do something with each item in data */ 
}); 

Answer 3

Bạn có thể đặt tham số AjaxSource trỏ đến Số liệu của bạn:

$('#example').dataTable({ 
    "sAjaxSource": 'dataset.json' 
}); 

Điều này sẽ tải tất cả dữ liệu một lần và đặt chúng vào DataTable. Xem thêm chi tiết về số http://www.datatables.net/examples/data_sources/ajax.html.

Jovan

Answer 4

Sử dụng data tùy chọn để cung cấp dữ liệu cho một bảng.

Ví dụ:

var table_data = [ 
    [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ], 
    [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ] 
]; 

$('#example').DataTable({ 
    data: table_data 
}); 

Nếu dữ liệu của bạn là một chuỗi ở định dạng JSON, bạn có thể muốn phân tích nó đầu tiên với một trong hai $.parseJSON() hoặc JSON.parse().

Xem this jsFiddle để biết mã và trình diễn.

Answer 5

Giải quyết các vấn đề với các jessegavinanswer:

$(document).ready(function(){ 

var json = { 
    BrowserStats : [ 
    { engine: "Trident", browser: "IE 4.0", platform: "Win 95+", version: 4 }, 
    { engine: "Trident", browser: "IE 5.0", platform: "Win 95+", version: 5 }, 
    { engine: "Trident", browser: "IE 5.5", platform: "Win 95+", version: 5.5 } 
    ] 
}; 

var data = jQuery.map(json.BrowserStats, function(el, i) { 
    return [[el.engine, el.browser, el.platform, el.version]]; 
}); 

$('#example').dataTable({ 
    "aaData": data, 
    "aoColumns": [ 
    { "sTitle": "Engine" }, 
    { "sTitle": "Browser" }, 
    { "sTitle": "Platform" }, 
    { "sTitle": "Version"} 
    ] 
}); 
}); 

https://jsfiddle.net/byejn8ye/