Home > flexigrid, javascript, jquery > Flexigrid and Codeigniter with Advanced Searching (with example)

Flexigrid and Codeigniter with Advanced Searching (with example)

Original site http://flexigrid.eyeviewdesign.com

New Features:

– multiple searching criteria
– customization input type (text, select, or date)

All feedback, improvements, etc are very welcome.. 🙂

this is development version, you can download example here

Requirements:

– codeigniter 1.7.2 (Download)
– jquery-1.4.2.min.js
– jquery-ui.min.js
– flexigrid.js (added new custom script, include in download package)
– jquery-ui.css
– flexigrid.css

Install:

– extract .rar to CI folder

– open your contoller (ie: CI_Folder\system\application\controllers\flexigrid.php)

– configure flexigrid helper, and customize variable $colModel, example:

// $this->load->model('ajax_model');
// $records = $this->ajax_model->get_select_countries();
// $options is result set, generate from database
$options = Array (
 Array ( 'code' => 'AFG', 'name' => 'AFG' ),
 Array ( 'code' => 'DZA', 'name' => 'DZA' ),
 Array ( 'code' => 'ASM', 'name' => 'ASM' ),
 Array ( 'code' => 'AND', 'name' => 'AND' ),
 Array ( 'code' => 'AGO', 'name' => 'AGO' )
);

// create select option string format
foreach( $records as $v ) {
 $options .= $v['code'] .':'. $v['name'] . ';';
}
$options = substr($options, 0, -1);

/*
 * 0 - display name
 * 1 - width
 * 2 - sortable
 * 3 - align
 * 4 - searchable (2 -> yes and default, 1 -> yes, 0 -> no.)
 * 5 - option for search type and select option (type = text, date, select, default type is text)
 */
$colModel['id'] = array('ID',40,TRUE,'center',2);
$colModel['iso'] = array('ISO',40,TRUE,'center',0);
$colModel['name'] = array('Name',180,TRUE,'left',1);
$colModel['printable_name'] = array('Printable Name',120,TRUE,'left',1,'options' => array('type' => 'date'));
$colModel['iso3'] = array('ISO3',130, TRUE,'left',1, 'options' => array('type' => 'select', 'edit_options' => $options));
$colModel['numcode'] = array('Number Code',80, TRUE, 'right',1, 'options' => array('type' => 'select', 'edit_options' => ":All;AND:AND;KK:KK;RE:RE"));
$colModel['actions'] = array('Actions',80, FALSE, 'right',0);

Screenshoot:

  1. Fabio
    03/09/2010 at 14:12

    Hi,(Sorry for my bad Google-english)
    Thanks a lot for work, really well done.
    I found a bug on the research, if the first field has entered the select option can not be reset.
    However, it is just what I was looking for, thanks again!

    • gembelzillonmendonk
      16/09/2010 at 10:25

      thank you for comment,
      for now, I can’t fix this bug, because I’m little busy..
      maybe, you can fix on your own..
      🙂

  2. chillisauce
    24/09/2010 at 01:17

    Hi this is really great thank you. One question, if I am returning a dataset that requires multiple table joins, how do I put this into the build query for the flexigrid.

    Just to give example:
    Your code does select from one table like- $this->db->select(‘id,iso,name,printable_name,iso3,numcode’)->from($table_name);
    $this->CI->flexigrid->build_query();

    But if I had a query like ‘select id,iso,name,printable_name,iso3,numcode, table2.population from countries JOIN table2 on id = table2.id’

    How can I still build the query? Hope you can help.

    • chillisauce
      24/09/2010 at 02:00

      Think I worked it out using the manual:
      $this->db->select(‘*’);
      $this->db->from(‘blogs’);
      $this->db->join(‘comments’, ‘comments.id = blogs.id’);
      $this->CI->flexigrid->build_query();

      To do a left join you add ‘left’ as third parameter on join()

      • Nkumar
        13/11/2011 at 11:14

        search option is not working if I am using JOIN in flexigrid. Please help me if you are having any solution.

  3. chillisauce
    24/09/2010 at 19:35

    I noticed the search does not work in IE7? Works in FF and Chrome.

    Error: Object doesn’t support this property or method.

    Can you help to get it working in IE7? Please reply its urgent.

    • fabio
      08/10/2010 at 05:44

      change de doFind function variable name:

      doFind: function () {
      var groupOp = $(g.sDiv).find(“select[name=groupOp]”).val();
      var squery = ‘{“groupOp”:”‘ + groupOp + ‘”,”rules”:[‘;
      $(‘.sDiv2’).each( function(idx) {
      field = $(“select[name=qtype]”, this).val();
      operation = $(“select[name=op]”, this).val();
      dati = ”;

      var i = $(“select[name=qtype]”, this).get(0).selectedIndex;

      if ($(“.qsbox.q”+i, this).css(“display”) == “inline”) {
      dati = $(“.qsbox.q”+i, this).val();
      }else{
      dati = $(“.qsbox.default”, this).val();
      }
      squery += ‘{“field”:”‘+field+'”,”op”:”‘+operation+'”,”data”:”‘+dati+'”},’;
      });

      squery = squery.substring(squery.length-1,0) + ‘]}’;
      p.filters = squery;
      p.newp = 1;

      this.populate();
      },

      This work for me.

    • gembelzillonmendonk
      28/12/2010 at 10:33

      Hi chillisauce,

      sorry for late response,..

      find and update the following line in flexigrid.js :


      // op = $("select[name=op]", this).val();
      operator = $("select[name=op]", this).val();


      // squery += '{"field":"'+field+'","op":"'+op+'","data":"'+data+'"},';
      squery += '{"field":"'+field+'","op":"'+operator+'","data":"'+data+'"},';

      I hope your problem solved,.
      It works in IE8
      thank’s

  4. 24/05/2012 at 03:55

    hi
    is there any simple flexigird with multiple filters (not for CI) or how can I use this multiple filter functionality in my simple php project

  5. book
    27/02/2013 at 09:12

    book :
    i not could download your sample code.

  6. 20/03/2013 at 23:04

    Bug solved!!
    When more one instance of flexigrid and search execute

    doFind: function () {
    var groupOp = $(g.sDiv).find(“select[name=groupOp]”).val();
    var squery = ‘{“groupOp”:”‘ + groupOp + ‘”,”rules”:[‘;

    //var myVar = $(g.sDiv).find(‘.sDiv2’);
    //console.log( myVar );

    //$(‘.sDiv2’).each( function(idx) {
    $(g.sDiv).find(‘.sDiv2’).each( function(idx) {

    //console.log( idx + “: ” + $(this).text() );

    field = $(“select[name=qtype]”, this).val();
    operator = $(“select[name=op]”, this).val();
    data = ”

    var i = $(“select[name=qtype]”, this).get(0).selectedIndex;

    if ($(“.qsbox.q”+i, this).css(“display”) == “inline”) {
    data = $(“.qsbox.q”+i, this).val();
    }else{
    data = $(“.qsbox.default”, this).val();
    }

    squery += ‘{“field”:”‘+field+'”,”op”:”‘+operator+'”,”data”:”‘+data+'”},’;
    })

    squery = squery.substring(squery.length-1,0) + ‘]}’;
    p.filters = squery;
    p.newp = 1;

    this.populate();
    },

    I hope the fix will be helpful!!.

  7. 20/03/2013 at 23:17

    Added suport for multiple db

    /libraries/flexigrid.php

    public function build_query($limit = TRUE, $db = NULL)
    {
    if (is_null($db)){
    if ($this->post_info[‘swhere’]){
    $this->CI->db->where($this->post_info[‘swhere’]);
    }

    $this->CI->db->order_by($this->post_info[‘sortname’], $this->post_info[‘sortorder’]);

    if ($limit){
    $this->CI->db->limit($this->post_info[‘rp’], $this->post_info[‘limitstart’]);
    }

    } else {

    if ($this->post_info[‘swhere’]){
    $db->where($this->post_info[‘swhere’]);
    }

    $db->order_by($this->post_info[‘sortname’], $this->post_info[‘sortorder’]);

    if ($limit){
    $db->limit($this->post_info[‘rp’], $this->post_info[‘limitstart’]);
    }
    }
    }

    On your model use
    $this->xxx = $this->load->database(‘xxx’, TRUE);

    $this->flexigrid->build_query(TRUE, $this->xxx);

    and after

    $this->flexigrid->build_query(FALSE, $this->xxx);

    I hope the fix will be helpful!!.

    P.D.: what the previous post should be changed in flexigrid.js

  8. Ayyappa amara
    04/09/2014 at 14:08

    i am not getting multiple searching option. please help me

  9. 30/09/2014 at 10:32

    It is actually a great and helpful piece of
    info. I am satisfied that you simply shared this helpful information with us.

    Please stay us informed like this. Thank you for sharing.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: