dynamic column headers via ajax
dynamic column headers via ajax
imtrying
Posts: 2Questions: 1Answers: 1
I'm working with small data sets (< 10k rows) therefore returning all data in a single ajax call so all datatables processing is handled client side, no additional ajax calls for pagination, sorting, etc. I'm using a single jsp page for multiple reports therefore do not want to define any column header info on initialization. Instead, all data, including column headers, will be defined in json server side. The sample code provided by curveddesign here works perfectly for me but I'd prefer using arrays rather than objects for the data source just to keep server side code simpler and cleaner. Here is the exact code from the forum post in the link above:
<script>
jQuery( document ).ready( function( $ ) {
// Code using $ as usual goes here.
$('#demo').html( '<table id="example" class="display" cellspacing="0" width="100%"></table>' );
$.ajax( {
"url": 'objects-dynamic.txt',
"success": function ( json ) {
$('#example').dataTable( json );
},
"dataType": "json"
} );
});
</script>
<body>
<div id="demo"></div>
</body>
</html>
{
"data":[
{
"Index": 4,
"Name": "Bob",
"Age": 7,
"Image": "None"
},
{
"Index": 2,
"Name": "Timmy",
"Age": 4,
"Image": "None"
},
{
"Index": 3,
"Name": "Heather",
"Age": 55,
"Image": "<img height='85' width='85' src='image.jpg'/>"
},
{
"Index": 5,
"Name": "Sally",
"Age": 22,
"Image": "None"
}
],
"columns": [
{ "title": "Index", "data" : "Index" },
{ "title": "Name", "data": "Name" },
{ "title": "Age", "data": "Age" },
{ "title": "Image", "data": "Image" }
]
}
As I've said, this works perfectly but I'd prefer to define the data in arrays as follows to keep things more simple:
{
"data":[
[
4,
"Bob",
7,
"None"
],
[
2,
"Timmy",
4,
"None"
],
[
3,
"Heather",
55,
"Image"
],
[
5,
"Sally",
22,
"None"
]
],
"columns": [
[ "title": "Index" ],
[ "title": "Name" ],
[ "title": "Age" ],
[ "title": "Image" ]
]
}
Using the data defined in arrays, as above, works fine except the resulting column headers in datatables are empty. Is it possible to define data in arrays, including column headers, in my server-side data source? I've played with xhr and ajax.dataSrc to intercept ajax returned and manually update column headers and they sort of work but are not exactly what I want and instead of those options I'd rather live with the working objects definitions (as above) in my data source.
This question has an accepted answers - jump to answer
Answers
I found inspiration in a jsfiddle Allan posted in one of his comments. This may not be the best solution but it works. Defining dynamic column headers in json array-type data source using ajax.
I used a shortened version of the standard arrays.txt as the data source and simply added the column names definition.
Works for me.
Good to hear you got it working :-)
Allan