PHP Sample

First you have to include the javascript libraries

    <link type="text/css" href="../css/mtg/mytablegrid.css" rel="stylesheet">
    <link type="text/css" href="../css/mtg/calendar.css" rel="stylesheet"> 
    <script type="text/javascript" src="../scripts/lib/prototype.js"></script>
    <script type="text/javascript" src="../scripts/lib/scriptaculous.js"></script>
    <script type="text/javascript" src="../scripts/mtg/mytablegrid.js"></script>
            

note: The order of the libraries is important.

Then you define a table model like this New features are highlighted

				var tableModel = {
					options : {
						width: '640px',
						title: 'JAW Motors Inventory',
						addSettingBehavior : false,
						pager: {
						pageParameter : 'page'
					},
					onCellBlur : function(element, value, x, y, id) {
						//alert(value);            
					},
					toolbar : {
						elements: [MyTableGrid.ADD_BTN, MyTableGrid.DEL_BTN, MyTableGrid.SAVE_BTN],
						onSave: function() {
							alert('on save handler');
						},
						onAdd: function() {
							alert('on add handler');
						},
						onDelete: function() {
							alert('on delete handler');
						}
					},
					rowClass : function(rowIdx) {
						var className = '';
						if (rowIdx % 2 == 0) {
							className = 'hightlight';
						}
						return className;
					}
				},
				columnModel : [
					{
						id : 'carId',
						title : 'Id',
						width : 30,
						editable: true,
						sortable: false,
						editor: new MyTableGrid.CellCheckbox({
							selectable : true
						})
					},
					{
						id: 'generalInfo',
						title: 'General Info',
						children : [
							{
								id : 'manufacturer',
								title : 'Manufacturer',
								width : 140,
								sortable: true,
								editable: true
							},
							{
								id : 'model',
								title : 'Model',
								width : 90,
								editable: true
							},
							{
								id : 'year',
								title : 'Year',
								width : 60,
								editable: true,
								editor: new MyTableGrid.CellInput({
								    validate : function(value, input){
								        return parseInt(value) > 1900;
								    }
								})
							}
						]
					},
					{
						id : 'price',
						title : 'Price',
						width : 70,
						type: 'number',
						editable: true
					},
					{
						id : 'origCountry',
						title : 'Origin Country',
						width : 100,
						editable: true,
						editor: new MyTableGrid.ComboBox({
							list: countryList
						})                
					},
					{
						id : 'used',
						title : 'Used',
						width : 50,
						editable: true,
						align: 'center',
						editor: new MyTableGrid.CellCheckbox({
							getValueOf: function(value) {
								var result = 'No';
								if (value) result = 'Yes';
								return result;
							},
							onClick: function(value, checked, element) {
								alert('hola ' + value + ' ' + checked  + ' ' + element);
							}
						})
					},
					{
						id : 'expirationDt',
						title : 'Expiration Date',
						width : 100,
						editable: true,
						editor: new MyTableGrid.CellCalendar({
							validate : function (value, input) {
								return true;      
							}
						})
					},
					{
						id : 'browseId',
						title : 'Select client',
						width : 100,
						editable: true,
						editor: new MyTableGrid.BrowseInput({
							onClick : function() {
								alert('on click event');
							},
							afterUpdate : function() {
								alert('after update event');
							}
						})                
					}
				],
				url: 'get_all_cars.php'
				};
            

As you see you have to define a php page that provides you with the data in json format

                <?php
                    header('Content-type: application/json');
    
                    $rowsByPage = 10;
                    $page = $_REQUEST['page'];
                    if ($page == null) $page = 1;
                    $sort = $_REQUEST['sortColumn'];
                    if ($sort == null) $sort = 'model';
                    $ascDescFlg = $_REQUEST['ascDescFlg'];
                    if ($ascDescFlg == null) $ascDescFlg = 'ASC';
    
                    $sortColumn = 'manuf_name'; 
                    if ($sort == 'year') 
                        $sortColumn = 'model_year';
                    else if ($sort == 'model') 
                        $sortColumn = 'model_name';
                    else if ($sort == 'price')    
                        $sortColumn = 'car_ask_price';
    
                    $con = mysql_connect("<YOUR SERVER>", "<YOUR USER>", "<YOUR PASSWORD>");
    
                    if (!$con)  {
                        die('Could not connect: ' . mysql_error());
                    }
    
                    mysql_select_db("jawdb", $con);
    
                    $query = 'select count(1) ' .
                             'from cars_for_sale cfs, ' .
                             '     car_models cm, ' .
                             '     manufacturers m ' .
                             'where cfs.model_id = cm.model_id and ' .
                             'cm.manuf_id = m.manuf_id';
    
                    $result = mysql_query($query);
                    $row = mysql_fetch_array($result);
                    $count = $row[0];
    
                    $numberOfPages = 0;
                    $from = 0;
                    $to = 0;
                    $rows = array();
    
                    if ($count > 0) {
                        $numberOfPages = floor($count / $rowsByPage); 
                        if (($count % $rowsByPage) > 0) $numberOfPages++;
                        if ($page > $numberOfPages) $page = $numberOfPages;
                        $from = (($page - 1) * $rowsByPage);
                        $to = ($page * $rowsByPage) - 1;
                        if ($to > $count) $to = $count; 
    
                        $query = 'select a.* from ( '.
                                 'select m.manuf_name, ' .
                                 '       cm.model_id, ' .
                                 '       cm.model_name, ' .
                                 '       cm.model_year, ' .
                                 '       cfs.car_id, ' .
                                 '       cfs.car_ask_price, ' .
                                 '       date_format(ifnull(cfs.car_date_acquired, now()), \'%m/%d/%Y\') car_date_acquired ' .
                                 'from cars_for_sale cfs, ' .
                                 '     car_models cm, ' .
                                 '     manufacturers m ' .
                                 'where cfs.model_id = cm.model_id and ' .
                                 'cm.manuf_id = m.manuf_id ' .
                                 'order by ' . $sortColumn . ' ' . $ascDescFlg . ') a ' .
                                 'limit ' . $from . ',' . $to;
    
                        $result = mysql_query($query);
                        $rows = array();
                        $idx = 0;
    
                        while($row = mysql_fetch_array($result)) {
                            $rows[$idx++] = array($row['car_id'], $row['manuf_name'], $row['model_name'], $row['model_year'], $row['car_ask_price'],$row['car_date_acquired']);
                        }
                    } 
                    mysql_close($con);
                ?>
                {
                    options: {
                        pager: {
                            currentPage: <?php echo $page?>,
                            total: <?php echo $count?>,
                            from: <?php echo ($from + 1)?>,
                            to: <?php echo ($to + 1)?>,
                            pages: <?php echo $numberOfPages?>
                        }
                    },
                    rows : <?php print json_encode($rows); ?>
                }