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/calendar_date_select.js"></script> 
    <script type="text/javascript" src="../scripts/mtg/format_american.js"></script> 
    <script type="text/javascript" src="../scripts/mtg/MyTableGrid.js"></script>
    <script type="text/javascript" src="../scripts/mtg/KeyTable.js"></script>
    <script type="text/javascript" src="../scripts/mtg/controls.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'
                        },
                        rowClass : function(rowIdx) {
                            var className = '';
                            if (rowIdx % 2 == 0) {
                                className = 'hightlight';
                            }
                            return className;
                        },
                        toolbar : {
                             elements: [MyTableGrid.SAVE_BTN],
                             onSave: function() {
                                  alert('on save handler');
                             }
                        }
                    },
                    columnModel : [
                        {
                            id : 'carId',
                            title : 'Id',
                            width : 30,
                            editable: true,
                            editor: 'checkbox',
                            sortable: false
                        },
                        {
                               id: 'generalInfo',
                               title: 'GeneralInfo',
                               children: [
                                   {
                                        id : 'manufacturer',
                                        title : 'Manufacturer',
                                        width : 140,
                                        editable: true,
                                        sortable: false
                                   },
                                   {
                                        id : 'model',
                                        title : 'Model',
                                        width : 120,
                                        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 : 'dateAcquired',
                            title : 'Date acquired',
                            width : 120,
                            editable: true,
                            editor: new MyTableGrid.CellCalendar()                
                         },
                        {
                            id : 'origCountry',
                            title : 'Origin Country',
                            width : 100,
                            editable: true,
                            editor: new MyTableGrid.ComboBox({
                                 list: countryList
                            })                
                         }
                    ],
                    url: 'get_all_cars1.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); ?>
                }