Hi I am using jqwidgets and trying to create a php search engine for the grid. W
ID: 3777201 • Letter: H
Question
Hi I am using jqwidgets and trying to create a php search engine for the grid. Where there is a input text box and submit button, the user types in the value in the textbox and clicks the search button. The grid will load up and populate with data. I cannot seem to make the search functionality work. Please help
Here is a sample:
http://www.jqwidgets.com/community/topic/search-in-toolbars/
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/toolbar.htm
My code is below
var source =
{
datatype: “json”,
type: “POST”,
datafields: [
{ name: 'CustomerID'},
{ name: 'CompanyName'},
{ name: 'ContactName'},
{ name: 'ContactTitle'},
{ name: 'Address'},
{ name: 'available'}
],
url: ‘search.php’,
filter: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
root: ‘Rows’,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
//keyboardnavigation: false,
filterable: true,
sortable: true,
editable: true,
showfilterrow: true,
altrows: true,
autoheight: true,
enablehover: true,
pageable: true,
pagesize: 2,
columnsresize: true,
columnsreorder: true,
//rowsheight: 35,
enablebrowserselection: true,
selectionmode : ‘none’,
keyboardnavigation: false,
//enabletooltips: true,
//selectionmode: ‘checkbox’,
columns: [
{ text: 'Company Name', datafield: 'CompanyName', width: 100},
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
{ text: 'Address', datafield: 'Address', width: 200 }
]
});
Button
#Include the connect.php file
include(‘connect.php’);
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die(‘Could not connect: ‘ . mysql_error());
//Select The database
$bool = mysql_select_db(‘customers’, $connect);
if ($bool === False){
print “can’t find $database”;
}
$search_term = mysql_real_escape_string($_POST['search_box']);
$query = “SELECT * FROM customers WHERE ContactTitle = ‘$search_term’”;
// sort data.
if (isset($_GET['search']))
{
$search_term = mysql_real_escape_string($_GET['search_box']);
$query = “SELECT * FROM customers WHERE ContactTitle = ‘$search_term’”;
}
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
// get data and store in a json array
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$customers[] = array(
‘CustomerID’ => $row['CustomerID'],
‘CompanyName’ => $row['CompanyName'],
‘ContactName’ => $row['ContactName'],
‘ContactTitle’ => $row['ContactTitle'],
‘Address’ => $row['Address'],
‘City’ => $row['City']
);
}
echo json_encode($customers);
?>
Explanation / Answer
function setGlobalFilter (filtervalue)
{
var columns = cgTableObject.jqxGrid('columns');
var filtergroup, filter; // clear filters and exit if filter expression has nothing
cgTableObject.jqxGrid('clearfilters');
if (filtervalue == null || filtervalue == '')
{ return; } // the filtervalue must be aplied to all columns individually
// the column filters are combined using "OR" operator
for ( var i = 0; i < columns.records.length; i++)
{ if (!columns.records[i].hidden && columns.records[i].filterable)
{ filtergroup = new $.jqx.filter(); filtergroup.operator = 'or';
filter = filtergroup.createfilter('stringfilter', filtervalue, 'contains');
filtergroup.addfilter(1, filter);
cgTableObject.jqxGrid('addfilter', columns.records[i].datafield, filtergroup); } }
cgTableObject.jqxGrid('applyfilters'); }