Example #4: Separate your widget from your data source
View source
<div id="placeholder"></div>
<script type="text/javascript">
//<![CDATA[
PlexiGrid.create('placeholder', {
"elementId": 'my_plexigrid',
"perPage": 30,
"perPageChoices": [30],
"title": "Countries",
"allowTableToggle": true,
"pagination": true,
"width": 800,
"sortName": "name",
"sortDir": "desc",
"sorting": true,
"url": "countries.json",
"columnModel": [
{"name": "flag", "label": "Flag", "width": 40},
{"name": "name", "sortable": true, "label": "Name", "width": 180},
{"name": "iso", "sortable": true, "label": "ISO", "align": "center", "width": 80},
{"name": "iso3", "sortable": true, "label": "ISO3", "width": 80},
{"name": "printable_name", "invisible": true, "label": "Printable Name", "width": 200}
],
"storeStyle": true,
"applyStyle": true,
"styleName": 'example_04'
}).reload();
//]]>
</script>