Datatables dynamische kolommen toevoegen.
Ik ben aan het spelen met datatables.
Op zich heb ik dit redelijk onder de knie, dus so far so good geen problemen.
Ook Ajax met json lukt allemaal perfect.
Nu komt het:
Ik wil datatables op een dynamische manier in kunnen laden. Immers, is het uiteindelijk de bedoeling dat hij voor meerdere doeleinde word gebruikt, en onder het motto, een goeie programmeur is een luie is dan een dynamische manier wel prettig. :)
De code die ik nu heb is als volgd:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$(document).ready( function () {
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"
}];
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();
});
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"
}];
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();
});
In de code columns: cols, dat is het stukje wat dynamisch moet worden, en dat heb ik al.
Deze code werkt.
Alleen er moet een AJAX call gedaan worden om die var data = [{}] opgehaald te worden.
Uit mijn database poep ik de volgende verkorte versie json uit:
Code (php)
1
{"data":[{"id":"19105","ticket":"1500104"},{"id":"19108","ticket":"1500107"}]}
zoals je ziet heb ik eerst een data object, vervolgens een array met id en ticket.
Deze 2 laatste heb ik nodig, en daar zit mijn probleem. Deze krijg ik niet te pakken.
Dus mijn vraag is in vergelijking met mijn werkende voorbeeld, hoe krijg ik dit voor elkaar?
Er zijn nog geen reacties op dit bericht.