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
<?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
<?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
<?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>
<!-- LOAD JQUERY AND FLEXIGRID -->
<!-- script-->
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("<input type='checkbox' name='single' id='single' />");
}
$("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
. 
