The most basic example with the zero configuration, with a table converted into flexigrid (Show sample code)
$('.flexme').flexigrid();
| Col 1 | Col 2 | Col 3 is a long header name | Col 4 |
|---|---|---|---|
| This is data 1 with overflowing content | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
Table converted into flexigrid with height, and width set to auto, stripes remove. (Show sample code)
$('.flexme2').flexigrid({height:'auto',striped:false});
| Col 1 | Col 2 | Col 3 is a long header name | Col 4 |
|---|---|---|---|
| This is data 1 with overflowing content | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
| This is data 1 | This is data 2 | This is data 3 | This is data 4 |
Flexigrid with a dynamic data, paging, search, toolbar, and connected to an JSON file. (Show sample code)
$("#flex1").flexigrid
(
{
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true}
],
searchitems : [
{display: 'ISO', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "iso",
sortorder: "asc",
usepager: true,
title: 'Countries',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);