Simple Example of Flexi Grid with PHP in MVC Pattern

In this post we will learn how to use flexigrid with php. Flexigrid is very useful jquery plug-in for HTML grid listing table. It has many features like sorting, pagination and reloading. Flexi grid provides flexibility to the developer to add hooks with grid event. This is very easy and siimple to integrate flexigrid with PHP. Flexigrid is an open source project so don’t worry about license.

Also Checkout other tutorials of flexi grid,

We will implement flexigrid with PHP in MVC pattern.

Below are simple steps to with full db script:

Step 1: First we will create a table into db.
[code type=sql]
CREATE TABLE IF NOT EXISTS tbl_issues (
ISSUEID int(11) NOT NULL AUTO_INCREMENT,
issueName varchar(255) NOT NULL
PRIMARY KEY (ISSUEID)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO tbl_issues (ISSUEID, issueName) VALUES
(10, ‘issue3’);

Step 2: Fetch the data in model class

Step 3: After fetching data from database,we will call model method into controller class action method and format the results according flexigrid table format.
[code type=sql]
public function getIssues() {
global $current_user;

$data = $this->User->getAssignedIssues(array(
‘page’ => isset($post[‘page’]) ? intval($post[‘page’]) : 1,
‘rp’ => isset($post[‘rp’]) ? intval($post[‘rp’]) : 5,
‘sortname’ => isset($post[‘sortname’]) ? trim($post[‘sortname’]) : ”,
‘sortorder’ => isset($post[‘sortorder’]) ? trim($post[‘sortorder’]) : ‘ASC’
));

$response = array(
‘page’ => $data[‘page’],
‘total’ => $data[‘total’],
‘rows’ => array()
);

foreach($data[‘records’] as $record){
$response[‘rows’][] = array(
‘id’=> $record[‘id’],
‘cell’ => array(
‘id’ => $record[‘id’],
‘issueName’ => $record[‘issueName’]

)
);
}

$this->render_view(_default’, array(
‘locals’ => array(
‘response’ => $response
)
));
exit(0);

}

Step 4: Now we will add css and js library file into head section of view.
[code type=sql]

Step 5: Create HTML table for bind grid.

Step 6: After adding jquery and flexi grid js file in head part of view file. We will format grid layout. we will add below code in bottom of view file.

Result:

flexigrid

Here I am sharing source code for flexigrid with constant data.