---
description: https://www.phpflow.com/php/simple-example-of-flexi-grid-with-php/
---

# Simple Example Of Flexi Grid With PHP In MVC Pattern

## Simple Example Of Flexi Grid With PHP In MVC Pattern

Last Updated On: [October 22, 2017](https://www.phpflow.com/php/simple-example-of-flexi-grid-with-php/)| By: [Parvez](https://www.phpflow.com/author/admin/)

{% file src="https://3988971916-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LXUV09EJOZ8BKB8YL5I%2F-LzzTEL_-RnLm55c8vfc%2F-LzzTOXyDVYEXkY_fYGx%2Fflexi_grid_using_php_code.zip?alt=media&token=ef30e75a-331a-4973-9948-519760e9fe5d" %}

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,

* [Part 1 – Simple Example of Flexi Grid with PHP](https://www.phpflow.com/php/simple-example-of-flexi-grid-with-php/)
* [part 2 – Simple Example Flexi Grid with Parameters](https://www.phpflow.com/php/flexi-grid-with-parameters/)
* [Part 3 – Different Way To Pass parameters in Flexigrid Using PHP](https://www.phpflow.com/jquery/different-way-to-pass-parameters-in-flexigrid/)
* [Part 4 – How To Add Dynamic Column in Flexi Grid](https://www.phpflow.com/php/how-to-add-dynamic-column-in-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.

| 1234567 | 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.

| 12345678910111213141516171819202122232425262728293031323334353637 | function getAssignedIssues($options){ global $wpdb;$page = ($options\['page'] > 1) ? $options\['page'] : 1; $offset = $options\['rp'];$limit = ($page-1)\*$offset; switch($options\['sortname']){ case 'issueName':default: $options\['sortname'] = 'Issue.ISSUEID';break;}$records = array(); $sql = " SELECT Issue.ISSUEID AS id, Issue.issueName AS issueName, FROM tbl\_issues"; $countQuery = "select count(Issue.ISSUEID) from tbl\_issues AS Issue"; $sql .= " ORDER BY ".$options\['sortname']." ".$options\['sortorder']."    LIMIT ". $limit .",".  $offset ."";   $total = $wpdb->get\_var($countQuery);$records = $wpdb->get\_results($sql, ARRAY\_A); return array( 'page' => $page, 'total' => $total, 'records' => $records); } |
| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

**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.

| 123456789101112131415161718192021222324252627282930313233343536 | 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.

| 123 |  \<link rel='stylesheet' id='css-flexigrid-css'  href='http://localhost/test/css/flexigrid.css?ver=3.4.2' type='text/css' media='all' />\<script type='text/javascript' src='http://localhost/testjs/jquery.base64.js'>\</script>\<script type='text/javascript' src='http://localhost/test/js/flexigrid.js'>\</script> |
| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

**Step 5:** Create HTML table for bind grid.

| 1 | \<table class="table table-bordered table-hover" style="display: none" id="issues-listing-grid">\</table> |
| - | --------------------------------------------------------------------------------------------------------- |

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

| 12345678910111213141516171819202122232425262728293031323334353637 | //issue var issueListingGrid = null,        issueListingGrid = jQuery("#issues-listing-grid").flexigrid({            url : "\<?php echo mvc\_public\_url(array('controller' => 'users', 'action' => 'getIssues.json')); ?>",            dataType : 'json',            striped : true,            colModel : \[{                display : 'Issue Name',                name : 'issueName',                width : 185,                sortable : true,                align : 'left'            } ],            showToggleBtn : false,            rpOptions: \[5,10, 15, 20, 30, 50], //allowed per-page values            procmsg: 'Processing, Please wait ...',            pagestat: 'Displaying {from} to {to} of {total} records',            onSuccess:function(){                //getChangesforTeam();            },            datacol: {                             'completionPercentage': function(colval) {                    return colval+'%';                }            },              sortname : "issueName",            sortorder : "asc",            usepager : true,            title : '\<img class="icon" src="\<?php echo get\_stylesheet\_directory\_uri(); ?>/wp\_home\_page/images/table.png">\&nbsp;Isuue List',            useRp : true,            rp : 5,            showTableToggleBtn : true,            width : 'auto',            height : 'auto'        }); |
| ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

Result:

![flexigrid](https://www.phpflow.com/wp-content/uploads/2013/03/flexigrid.jpg)Here I am sharing source code for flexigrid with constant data.[ Demo Live](https://www.phpflow.com/demo/flexi_grid_demo/flexi_grid_demo.php)

[ Download Source Code](https://www.phpflow.com/source_code/flexi_grid_using_php_code/flexi_grid_using_php_code.zip)**Debug:** it's the locked content, but now it's revealed. [Why?](https://www.phpflow.com/php/simple-example-of-flexi-grid-with-php)
