Employee Directory

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


PHP/HTML Source:
<?php

require_once 'raxan/pdi/autostart.php';

// system configuration
Raxan::loadConfig('config.php'); // load external config file
Raxan::config('site.timezone','America/Toronto'); // set timezone

class EmployeePage extends RaxanWebPage {

    protected $db;
    protected $pgNumber, $pageSize;

    protected function _config() {
        $this->pageSize = 10;
        // enable or diable debugging
        $this->Raxan->config('debug',false);
    }

    protected function _init() {
        $this->source('views/employees.html');
        try {
            // see config.php for connection info
            // For employee sample data visit http://dev.mysql.com/doc/
            $this->db = $this->Raxan->connect('employees'); // connect to db
        }
        catch (Exception $e) {
            $this->db = null;
            $msg = $this->getView('connection-failed.html');
            $this->flashmsg($msg,'bounce','rax-box error');
        }
    }

    protected function _load() {
        // get current page. Defaults to 1 if 'emp-page-number' is not set
        $this->pgNumber = & $this->data('emp-page-number',1,true);

        // delegate events
        $this->pager->delegate('a','click','.changePage');
        $this->emplist->delegate('tr','click','.rowClick');
    }

    protected function _prerender() {
        if ($this->db) $this->loadEmployees();
        else  $this->panel1->remove(); // remove table content
    }

    // -- Event handlers

    protected function changePage($e){
        $this->pgNumber = $e->intVal();
        if (!$this->pgNumber) $this->pgNumber = 1;
    }

    protected function rowClick($e){
        $id = $e->intVal() | 0;   // sanitize: convert to number
        if (!$e->ctrlKey && !$e->metaKey) $this->data('emp-selected-ids',$id);
        else {  // multiple selection
            $oldId = & $this->data('emp-selected-ids');
            if (!is_array($oldId)) $oldId = array($oldId);
            $oldId[] = $id;
        }
    }

    protected function loadEmployees() {

         // count # of rows in database
        $rowCount = & $this->data('emp-row-count');
        if (!$rowCount) {
            $rows = $this->db->query('select count(*) as total from employees');
            $rowCount = $rows->fetchColumn(0);
        }

        // load employees for current page
        $lower = (($this->pgNumber-1) * $this->pageSize)+1;
        $offset = $this->pageSize;
        $sql = "select *,concat(first_name,' ',last_name) as 'name' from employees order by emp_no limit ".$lower.', '.$offset;
        $rows = $this->db->query($sql);
        $this->emplistBody->bind($rows,array(
            'altClass' => 'even',
            'selectClass' => 'rax-selected-pal rax-metalic',
            'key'=>'emp_no',
            'selected' => $this->data('emp-selected-ids'),
            'initRowCount' => $lower,
            'format' => array(
                'name'=>'capitalize',
                'birth_date'=>'date:d M, Y'
             )
        ));

        // add hover effect to table rows
        c('#emplist tbody tr')->hoverClass('hover');
    
        // setup pager
        $maxpage = ceil($rowCount/$this->pageSize);
        $pages = $this->Raxan->paginate($maxpage,$this->pgNumber,array(
            'tpl' => '<a href="#{VALUE}" title="Page {VALUE}" class="{ROWCLASS}">{VALUE}</a>',
            'itemClass' => 'rax-active-pal',
            'selectClass' => 'rax-selected-pal rax-metalic border1',
            'delimiter'=>'',
        ));
        if ($maxpage > 1) {
            $pages.='<a href="#'.($this->pgNumber+1).'" title="Next Page" class="rax-active-pal">'.
            '<span class="ui-icon ui-icon-triangle-1-e"></span></a>';
        }
        if ($this->pgNumber> 1 && $this->pgNumber < $maxpage ) {
            $pages = '<a href="#'.($this->pgNumber-1).'" title="Prvious Page" class="rax-active-pal">'.
            '<span class="ui-icon ui-icon-triangle-1-w"></span></a>'.$pages;
        }
        $this->pager->html($pages);
    }

}

?>

Plugin Source:

HTML/JavaScript Source (views/employees.html):
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Employee Listing</title>
	<link href="../raxan/ui/css/master.css" rel="stylesheet" type="text/css" />
	<!--[if lt IE 8]><link rel="stylesheet" href="../raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
	<link href="../raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .title {
                padding:10px;
                border-width: 2px;
                margin-bottom: 0;
            }
            #pager {
                border-width: 2px;
                margin-right: 10px;
                margin-bottom: 10px;
            }
            #pager a {
                vertical-align: middle;
                display: inline-block !important;
                display: inline; /* for ie6  */
                width: 16px;
                height: 16px;
                padding: 3px;
                text-align: center;
                margin-right: 1px;
            }
            
            .note {
                padding: 10px;
                clear: both;
                border-top: solid 1px #bbb;
                color: #555;
            }
        </style>
</head>

<body>
    <div class="container c30 prepend-top">
        <div class="rax-backdrop">
            <div class="rax-content-pal">
                <h2 class="title rax-header-pal round-top rax-metalic" ><img src="views/images/people.png" width="36" height="36" class="align-middle rtm"  />Employee Directory</h2>
                <div class="flashmsg"></div>
                <div id="panel1" class="container">
                    <table id="emplist" class="rax-table mouse-cursor" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr class="tbl-header">
                                <td>&nbsp;</td><td class="c3">Emp #</td><td class="c10">Name</td><td>Gender</td><td>Birth Date</td>
                            </tr>
                        </thead>
                        <tbody id="emplistBody">
                            <tr class="{ROWCLASS}" data-event-value="{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" class="right"></div>
                    <div class="note rax-glass round-bottom">Click to selected a record. Press the Ctrl (PC) or Meta (MAC) key to select multiple rows.</div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Data Source: