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:
Categories: flexigrid, javascript, jquery
codeigniter, flexigrid, grid, jquery
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!
thank you for comment,
for now, I can’t fix this bug, because I’m little busy..
maybe, you can fix on your own..
🙂
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.
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()
search option is not working if I am using JOIN in flexigrid. Please help me if you are having any solution.
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.
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.
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
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
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!!.
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
i am not getting multiple searching option. please help me
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.