When specifying an array column the default formatter simply outputs the JSON.stringify()
result of the supplied array. This column is meant to be used in conjunction with
a custom formatter/parser to achieve your desired results.
There are no additional options when using the array column type however it is intended to be used in conjunction with the column formatter option to create your desired cell contents.
The below shows a basic array column where the cell value
is a valid JSON string, including quotes around property names,
that describes parameters for satyr.io's image API.
The custom formatter transforms the parsed array into multiple <img/>
to be used as the cell contents.
Image |
---|
[{"theme":1,"width":200,"height":200},{"theme":2,"width":200,"height":200},{"theme":3,"width":200,"height":200}] |
[{"theme":1,"width":200,"height":300},{"theme":2,"width":200,"height":300},{"theme":3,"width":200,"height":300}] |
[{"theme":1,"width":200,"height":100},{"theme":2,"width":200,"height":100},{"theme":3,"width":200,"height":100}] |
function satyrFormatter(value){
if (value !== null){
var result = "";
for (var i = 0, l = value.length; i < l; i++){
result += '<img src="http://satyr.io/'+value.width+'x'+value.height+'/'+value.theme+'"/>';
}
return result;
}
return "";
}
<table id="array-column-example-1" class="table">
<thead>
<tr>
<th data-type="array" data-formatter="satyrFormatter">Images</th>
</tr>
</thead>
<tr>
<td>[{"theme":1,"width":200,"height":200},{"theme":2,"width":200,"height":200},{"theme":3,"width":200,"height":200}]</td>
</tr>
<tr>
<td>[{"theme":1,"width":200,"height":300},{"theme":2,"width":200,"height":300},{"theme":3,"width":200,"height":300}]</td>
</tr>
<tr>
<td>[{"theme":1,"width":200,"height":100},{"theme":2,"width":200,"height":100},{"theme":3,"width":200,"height":100}]</td>
</tr>
</table>
The array can also be supplied using the data-value
attribute on the cell element.
<table>
<thead>
<tr>
<th data-type="array" data-formatter="satyrFormatter">...</th>
...
</tr>
</thead>
<tr>
<td data-value='[{"theme":1,"width":200,"height":200},...]'></td>
</tr>
...
</table>
Implementing an array column through the options requires the column's type
option be set to "array"
and that the name
of the column matches an array property in the row data. The
formatter
option should also be supplied to create your cell contents.
jQuery(function($){
$('.table').footable({
"columns": [{
"type": "array",
"name": "satyr",
"formatter": function(value){
if (value !== null){
var result = "";
for (var i = 0, l = value.length; i < l; i++){
result += '<img src="http://satyr.io/'+value.width+'x'+value.height+'/'+value.theme+'"/>';
}
return result;
}
return "";
},
...
},{
...
}],
"rows": [{
"satyr": [{
"theme":1,
"width":200,
"height":200
},{
"theme":2,
"width":200,
"height":200
},{
"theme":3,
"width":200,
"height":200
}],
...
},{
...
}]
});
});