Simple Example of Flexi Grid with PHP

In this post we will learn how to use flexi grid with php. Flexi grid is very useful jquery plug-in for listing elements. It has many features like sorting, pagination and reloading. Flexi grid provides flexibility to the developer to add hooks with grid event. This is magical combination flexi grid with PHP. Flexi grid is open source project.

We will implement flexi grid with PHP in MVC pattern.

Below are simple steps to with full db script:

Step 1: First we will create a table into db.

1
2
3
4
5
6
7
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 and format the results according flexi grid format.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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.

1
2
3
<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 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 in head part of view file. We will format grid layout. we will add below code in bottom of view file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//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

Here I am sharing source code for flexi grid with constant data.
The following two tabs change content below.
Hi, This is Parvez Alam from India. I am software developer with 4 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

Latest posts by Parvez (see all)

One thought on “Simple Example of Flexi Grid with PHP

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>