jak załadować dynamiczny json do jquery datatable

Chcę załadować dynamiczne dane do mojego datownika JQuery. Oznacza to, że zanim otrzymam dane json z serwera, nie wiem, jakie pola zawierają, ale jestem pewien, że json jest ważny. Będzie wygląda jak poniżej,jak załadować dynamiczny json do jquery datatable

"data": [ 
{ 
    "first_name": "Airi", 
    "last_name": "Satou", 
    "position": "Accountant", 
    "office": "Tokyo", 
    "start_date": "28th Nov 08", 
    "salary": "$162,700" 
}, 
{ 
    "first_name": "Angelica", 
    "last_name": "Ramos", 
    "position": "Chief Executive Officer (CEO)", 
    "office": "London", 
    "start_date": "9th Oct 09", 
    "salary": "$1,200,000" 
}

]

czasami może to zawiera tylko 'first_name' i 'last_name'.

Szukałem przez długi czas, wszystkie próbki określają "aoColumnsDef" lub "aoColumns". Ale nie znam dokładnych danych. Czy istnieje sposób na wypełnienie datownik JQuery przy użyciu nazwy pola w json jako nagłówek tabeli i wartość pola jako treść tabeli? Na przykład dane json zawierają tylko dwa pola, "first_name" i "last_name", tabela powinna zawierać dwie kolumny "first_name" i "last_name". Jeśli json zawiera 3 pola, tabela powinna wyświetlać 3 kolumny. Jestem pewien, że wszystkie elementy w "danych" mają te same pola.

Z góry dziękuję!

Źródło

2015-07-06 Allen4Tech

Rozumiem, że nie wiem, jaki rodzaj obiektu zamierzasz odbierać w tablicy danych, ale wszystkie obiekty w tablicy będzie równa? – josedefreitasc

@josedefreitasc yes! – Allen4Tech

Twoje przykładowe dane, pętlę nad pierwszym rekordzie jako swoich „przykład” danych, a następnie utworzyć definicje kolumn w locie tak:

EDIT: przykładem oryginalnego kodu z XHR zadzwoń do pobierania danych

$(document).ready(function() { 
 
    
 
    //callback function that configures and initializes DataTables 
 
    function renderTable(xhrdata) { 
 
    var cols = []; 
 

 
    var exampleRecord = xhrdata[0]; 
 

 
    var keys = Object.keys(exampleRecord); 
 

 
    keys.forEach(function(k) { 
 
     cols.push({ 
 
     title: k, 
 
     data: k 
 
      //optionally do some type detection here for render function 
 
     }); 
 
    }); 
 

 
    var table = $('#example').DataTable({ 
 
     columns: cols 
 
    }); 
 

 
    table.rows.add(xhrdata).draw(); 
 
    } 
 

 
    //xhr call to retrieve data 
 
    var xhrcall = $.ajax('/path/to/data'); 
 

 
    //promise syntax to render after xhr completes 
 
    xhrcall.done(renderTable); 
 
});

var data = [{ 
 
    "first_name": "Airi", 
 
    "last_name": "Satou", 
 
    "position": "Accountant", 
 
    "office": "Tokyo", 
 
    "start_date": "28th Nov 08", 
 
    "salary": "$162,700" 
 
}, 
 
{ 
 
    "first_name": "Angelica", 
 
    "last_name": "Ramos", 
 
    "position": "Chief Executive Officer (CEO)", 
 
    "office": "London", 
 
    "start_date": "9th Oct 09", 
 
    "salary": "$1,200,000" 
 
}]; 
 

 
$(document).ready(function() { 
 
    var cols = []; 
 
    
 
    var exampleRecord = data[0]; 
 
    
 
    //get keys in object. This will only work if your statement remains true that all objects have identical keys 
 
    var keys = Object.keys(exampleRecord); 
 
    
 
    //for each key, add a column definition 
 
    keys.forEach(function(k) { 
 
    cols.push({ 
 
     title: k, 
 
     data: k 
 
     //optionally do some type detection here for render function 
 
    }); 
 
    }); 
 
    
 
    //initialize DataTables 
 
    var table = $('#example').DataTable({ 
 
    columns: cols 
 
    }); 
 
    
 
    //add data and draw 
 
    table.rows.add(data).draw(); 
 
});

body { 
 
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #333; 
 
    background-color: #fff; 
 
} 
 

 

 
div.container { 
 
    min-width: 980px; 
 
    margin: 0 auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 

 
    <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" /> 
 
    <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script> 
 

 
    <meta charset=utf-8 /> 
 
    <title>DataTables - JS Bin</title> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <table id="example" class="display" width="100%"> 
 
     </table> 
 
    </div> 
 
    </body> 
 
</html>

Źródło

2015-07-06 17:07:46 BLSully

Naprawdę dzięki za życzliwą odpowiedź! Jestem początkującym jquery, jeśli pobrać dane z serwera przez ajax, jak, jak sobie z tym poradzić? Zbadałem wiele przykładów danych jquery, kod ajax powinien być w metodzie DataTable(), takich jak: table.DataTable() {serverSide: true, ajax: 'url'} – Allen4Tech

Biorąc pod uwagę fakt, że nie znasz schematu z góry, lepiej skorzystać z normalnych wywołań xhr, aby pobrać swoje dane i wykonać wywołanie DataTables dopiero po zakończeniu Xhr. Zaktualizuje odpowiedź, podając ten przykład: – BLSully

Dzięki! xhrdata [0] zwraca mi '[' – Allen4Tech

Co powiecie na zbudowanie prostej tabeli html z otrzymanego JSON-a i dopiero po tej kompilacji DataTable przy użyciu utworzonej tabeli.

var table = $("#tableId"); 
table.append('<thead>....</thead>'); 
table.append('<tbody>....</tbody>'); 

table.DataTable();

Źródło

2015-07-06 15:43:06 Sargon

Chociaż twoja odpowiedź wskazuje na właściwy kierunek, opcja 'pobierz' jest tutaj bez znaczenia. –

Tak, ale będzie potrzebne, jeśli przeładujesz tabelę za pomocą połączenia asynchronicznego. W każdym razie usunę to na razie. DZIĘKI! – Sargon

Masz na myśli, po odzyskaniu json, dynaically tworzenie tabeli html przez ciąg html kompilacji, a następnie przekonwertować go do jquery datatable? – Allen4Tech

jak załadować dynamiczny json do jquery datatable

Odpowiedz

Powiązane problemy