Flexigrid - Lightweight but rich data grid

[eluser]Czarchaic[/eluser]
Hello all. I've been fascinated by this plugin for the last couple of days and I stumbled into this forum. I took some existing code I've been using and modified it for a very straight forward example of the use of this awesome plugin with CI. Excellent work Paulo!
The DB

Code:

<?php   // CREATE TABLE `dbname`.`homes` (
    // `id` INT( 10 ) NOT NULL AUTO_INCREMENT ,
    // `price` FLOAT( 14 ) NOT NULL ,
    // `sqft` FLOAT( 10 ) NOT NULL ,
    // `bedrooms` INT( 2 ) NOT NULL ,
    // `pool` INT( 1 ) NOT NULL ,
    // `description` VARCHAR( 250 ) NOT NULL ,
    // PRIMARY KEY ( `id` )
    // ) ENGINE = MYISAM
?>

The Model
homesmodel.php

Code:

<?php
class Homesmodel extends Model {




    function __construct() {
        parent::Model();
    }

/* RETURNS AN ARRAY WITH TWO ITEMS
        'homes'=> THE RESULT OBJECT    
        'total'=> NUMBER OF TOTAL RESULTS OF THE QUERY WITHOUT LIMIT AND OFFSET */

    function fetch_homes($sortname='price',$sortorder='desc',$limit=10,$offset=1,$query=null,$qtype=null) {

    $this->db->from('homes');
    $this->db->order_by($sortname,$sortorder);
    
    if(! is_null($query)) {
    
        /* GET TOTAL ROWS BEFORE THE LIMIT */
        $this->db->like($qtype,$query);
        $total = $this->db->get()->num_rows();
        
        /* RESET THE DB QUERY SINCE IT WAS ALREADY USED */
        $this->db->like($qtype,$query);
    }
    
    else {//NO QUERY
    $total = $this->db->get()->num_rows();
    }
        /* RESET THE DB QUERY*/
        $this->db->from('homes');
        $this->db->order_by($sortname,$sortorder);
        $this->db->limit($limit,$offset);
        $q = $this->db->get();
        $arr = array('homes'=>$q,'total'=>$total);
        return $arr;
}
    
}
?>

The View
view_homes.php

Code:

<?php
/* CODE IGNITER, JQUERY FLEXIGRID DEMO
WITH JSON TABLE UPDATING AND SEARCH */

/* LOAD THE FLEXIGRID STYLESHEET */
echo link_tag('css/flexigrid.css');
echo link_tag('css/homes.css');?>


<!-- THE FLEXIGRID TABLE -->
<table id="flexigrid_homes"></table>

&lt;!-- LOAD JQUERY AND FLEXIGRID --&gt;




&lt;!-- script--&gt;
    
function alertSelected() {
    var alert_text = '';
    var selected_rows = $("table#flexigrid_homes").find("tr.trSelected").get();
    if(selected_rows.length > 0) {
        alert_text = 'You selected the following row ids:' ;
    }
    else {
        alert_text = 'You did dnot select any rows';
    }
    $.each(selected_rows,function(i,n) {
        var id = $(n).attr("id");
        alert_text += id.substr(3)+", ";
    });
    alert(alert_text);
    /* console.log(alert_text); */
}

function selectAll() {
    var rows = $("table#flexigrid_homes").find("tr").get();
    if(rows.length > 0) {
    $.each(rows,function(i,n) {
        $(n).addClass("trSelected");
    });
    }
}

function deselectAll() {
    var selected_rows = $("table#flexigrid_homes").find("tr").get();
    if(selected_rows.length > 0) {
    $.each(selected_rows,function(i,n) {
        $(n).removeClass("trSelected");
    });
    }
}

function invertSelection() {
    var rows = $("table#flexigrid_homes").find("tr").get();
    $.each(rows,function(i,n) {
        $(n).toggleClass("trSelected");
    });
}

function bind_single_select() {
  if ( ! $("input#single").length>0) {
    $("span.single_select").prepend("&lt;input type='checkbox' name='single' id='single' /&gt;");
  }
$("table#flexigrid_homes").find("tr").click(function() {
        if($("input#single").attr("checked")) {
            $(".trSelected").removeClass("trSelected");
            $(this).addClass("trSelected");
        }
        });
}
$(document).ready(function() {
            $("table#flexigrid_homes").flexigrid({
            url: '/CI_BASE/index.php/homes/flex',
            dataType: 'json',
            colModel : [
                {display: 'Id', name : 'id', width : 40, sortable : true, align: 'left'},
                {display: 'Description', name : 'description', width : 300, sortable : true, align: 'left'},
                {display: 'Price', name : 'price', width : 100, sortable : true, align: 'left'},
                {display: 'Square Footage', name : 'sqft', width : 100, sortable : true, align: 'right'},
                {display: 'Bedrooms', name : 'bedrooms', width : 100, sortable : true, align: 'right'},
                {display: 'Pool', name : 'pool', width : 30, sortable : true, align: 'center'},
                ],
            searchitems : [
                {display: 'Description', name : 'description', isdefault: true},
                ],
            buttons : [
                {name: 'Alert Selected', bclass: 'alert_selected',onpress: alertSelected},
                {separator: true},
                {name: 'Select All', bclass: 'alert_selected',onpress: selectAll},
                {name: 'Deselect All', bclass: 'alert_selected',onpress: deselectAll},
                {name: 'Invert Selection', bclass: 'alert_selected',onpress: invertSelection},
                {separator: true},
                {name: 'Single Select', bclass: 'single_select',onpress: bind_single_select},
                ],
            sortname: "price",
            sortorder: "desc",
            usepager: true,
            title: 'Homes',
            procmsg: "Searching the MASSIVE homes database",
            useRp: true,
            rp: 5,
            rpOptions: [5,10,20,50],
            showTableToggleBtn: true,
            height: '150',
            onSuccess: bind_single_select
        });

});

Next post the Controller