Example #3: Create your own dynamic tables.
View source
<div id="placeholder"></div>
<script type="text/javascript">
//<![CDATA[
PlexiGrid.create('placeholder', {
"currentPage": 1,
"totalPages": 1,
"perPage": 30,
"perPageChoices": [30],
"totalEntries": 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}
],
"records": [
{"name": "ZIMBABWE", "iso3": "ZWE", "flag": "<img alt=\"ZIMBABWE\" src=\"flags/zw.gif\" title=\"ZIMBABWE\" />", "iso": "ZW", "id": 226, "printable_name": "Zimbabwe", "numcode": 716},
{"name": "ZAMBIA", "iso3": "ZMB", "flag": "<img alt=\"ZAMBIA\" src=\"flags/zm.gif\" title=\"ZAMBIA\" />", "iso": "ZM", "id": 225, "printable_name": "Zambia", "numcode": 894},
{"name": "YEMEN", "iso3": "YEM", "flag": "<img alt=\"YEMEN\" src=\"flags/ye.gif?1125322980\" title=\"YEMEN\" />", "iso": "YE", "id": 224, "printable_name": "Yemen", "numcode": 887},
...
{"name": "TAIWAN, PROVINCE OF CHINA", "iso3": "TWN", "flag": "<img alt=\"TAIWAN, PROVINCE OF CHINA\" src=\"flags/tw.gif?1125322980\" title=\"TAIWAN, PROVINCE OF CHINA\" />", "iso": "TW", "id": 197, "printable_name": "Taiwan, Province of China", "numcode": 158}
]
});
//]]>
</script>