Employee Data Table

Click to selected a record. Press the Ctrl (PC) or Meta (MAC) key to select multiple rows.

PHP Source:

<?php

require_once 'raxan/pdi/gateway.php';

//Raxan::config('debug',true);
Raxan::config('site.timezone','America/Toronto');

class EmployeePage extends RaxanWebPage {

    protected $db;
    protected $pgNumber;

    protected function _init() {
        $this->source('views/employees.html');
        // reset page data on first load
        $this->resetDataOnFirstLoad = true;
        // connect to db
        $this->db = Raxan::connect('examples');
        if (!$this->db){
            $this->halt('<h2>Unable to connect to the MySQL Database.</h2>
                Please make sure you have properly configured your MySQL database connection. <br />
                You can download the employee sample database from the
                MySQL website (<a href="http://dev.mysql.com/doc/">http://dev.mysql.com/doc/</a>)
            ');
        }
    }

    protected function _load() {
        // get current page
        $this->pgNumber = & $this->data('page') || $this->data('page',1);
        // bind events
        $this['#pager a']->delegate('click','.changePage');
        $this['#emplist tr']->delegate('click','.rowClick');
    }

    protected function _prerender() {
        $this->loadEmployees();
    }
    
    protected function changePage($e){
        $this->pgNumber = (int)$e->value;
        if ($this->isCallback) $this->loadEmployees();
    }

    protected function rowClick($e){
        $id = (int)$e->value;   // sanitize: convert to number
        if (!$e->ctrlKey && !$e->metaKey) $this->data('selected.empno',$id);
        else {  // multiple selection
            $oldid = & $this->data('selected.empno');
            if (!is_array($oldid)) $oldid = array($oldid);
            $oldid[] = $id;
        }
    }

    protected function loadEmployees() {
        $table = $this['#emplist tbody'];
        // setup templates
        $tpl = $table->html();
        $tplAlt = $table->find('tr')->addClass('even')->end()->html();
        $tplSelected = $table->find('tr')->attr('class','select')->end()->html();
        // load employees
        $rows = $this->getEmployees();
        $this['#emplist tbody']->bind($rows,array(
            'page' => $this->pgNumber,
            'pageSize' => 10,
            'tpl' => $tpl,
            'tplAlt' => $tplAlt,
            'tplSelected' => $tplSelected,
            'key'=>'emp_no',
            'selected' => $this->data('selected.empno'),
            'format' => array(
                'name'=>'capitalize',
                'birth_date'=>'date:d M, Y'
             )
        ));
        // add hover effect to table rows
        C('#emplist tbody tr')->hoverClass('hover');
    
        // setup pager
        $tpl = $this->pager->html();
        $maxpage = ceil(count($rows)/10); 
        $this->pager->html('Page: '.Raxan::paginate($maxpage,$this->pgNumber,array(
            'tpl' => $tpl,
            'tplFirst' => '<a href="#{FIRST}" title="First">First</a> .'.$tpl,
            'tplLast' => $tpl.' . <a href="#{LAST}" title="Last">Last</a>',
            'tplSelected' =>'<span class="lightgray hlf-pad">{VALUE}</span>', 'delimiter'=>'.',
        )));
    }

    protected function getEmployees() {
        $ds = $this->db->query("select *,concat(first_name,' ',last_name) as 'name' from employees order by emp_no");
        return $ds->fetchAll(PDO::FETCH_ASSOC);
    }
}

RaxanWebPage::Init('EmployeePage');

?>

Plugin Source:

HTML Source (views/employees.html):

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Employee Listing</title>
	<link href="../raxan/styles/master.css" rel="stylesheet" type="text/css" />
	<!--[if IE]><link rel="stylesheet" href="../raxan/styles/master.ie.css" type="text/css"><![endif]-->
	<link href="../raxan/styles/default/theme.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container c30">
        <p>&nbsp;</p>
        <div class="panel">
            <div class="pb1"></div><div class="pb2"></div><div class="pm1">
                <h2 class="pnl-header" ><img src="views/images/people.png" width="36" height="36" class="right"  />Employees</h2>
                <table id="emplist" class="mouse-cursor white" cellpadding="0" cellspacing="0">
                    <thead>
                        <tr class="tbl-header"><td class="c1">&nbsp;</td><td class="c3">Emp #</td><td class="c10">Name</td><td>Gender</td><td>Birth Date</td></tr>
                    </thead>
                    <tbody>
                        <tr  class="v:{emp_no}"><td>{ROWCOUNT}</td><td>{emp_no}</td><td>{name}</td><td>{gender}</td><td>{birth_date}</td></tr>
                    </tbody>
                </table>
                <div id="pager" align="right" class="pnl-footer"><a class="hlf-pad" href="#{VALUE}">{VALUE}</a></div>
            </div><div class="pb2 pb3"></div><div class="pb1 pb4"></div>
            <hr class="space" />
            <p>Click to selected a record. Press the Ctrl (PC) or Meta (MAC) key to select multiple rows.</p>
        </div>
    </div>

</body>

</html>

Data Source: