jQuery UI Widgets › Forums › Grid › Searching for particular data in data grid
This topic contains 4 replies, has 2 voices, and was last updated by 9digit 10 years, 8 months ago.
-
Author
-
Hi,
I am trying to get results from database in data grid based on my form fields.
What i am trying to achieve is that i have form that takes inputs of 2 dates.When a user clicks the submit button,i want to display records from database between these 2 form values.
By default,grid is showing all values correctly.
I am not getting an idea how to post data into server side script and receive values back to data grid.whenever i hard code value of $id in “rationnetstats.php”,it gives me jsonencoded values in alert box but i dont know how to post value to this script using get and how to bind the returned search results back to my data grid.
Please help.
Server Side script retrieving data
rationetstats.php
$id=$_GET[‘datefrom’];
$dat=$new_db->selection(‘member_click_rationet’,’id,memberID,codeLink,datePost,dateClick,curl_response_code,http_post’,’where datePost=’.$id,’ORDER BY id DESC’,false);
foreach($dat as $row)
{
$customers[] = array(
‘id’ => $row->id,
‘memberID’=>$row->memberID,
‘codeLink’ => $row->codeLink,
‘datePost’ => $row->datePost,
‘dateClick’=>$row->dateClick,
‘curl_response_code’=>$row->curl_response_code,
‘http_post’=>$row->http_post,
);
}echo(json_encode($customers));
?>
///////////////////////////////////////Javascript:
<script type=”text/javascript”>
$(document).ready(function () {
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’},
{ name: ‘memberID’,type:’number’},
{ name: ‘codeLink’,type:’number’},
{ name: ‘curl_response_code’},
{name:’http_post’,type:’string’},
{ name:’datePost’},
{ name: ‘dateClick’}],
url: ‘ratiostats.php’,
cache: false
};var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 980,
source: dataAdapter,
theme: ‘mystyle’,
pageable: true,
// autorowheight: true,
autoheight: true,
altrows: false,
editable: false,
source: source,columns: [
{ text: ‘id’, datafield: ‘id’, width: 50},
{ text: ‘memberID’, datafield: ‘memberID’, width: 100 },
{ text: ‘codeLink’, datafield: ‘codeLink’, width: 100 },
{ text: ‘curl_response_code’, datafield: ‘curl_response_code’, width: 100 },
{ text: ‘http_post’, datafield: ‘http_post’, width: 360 },
{ text: ‘datePost’, datafield: ‘datePost’, width: 160 },
{ text: ‘dateClick’, datafield: ‘dateClick’, width: 120 },]
});$(‘#btn’).click(function(){
makeAjaxRequest();
});$(‘form’).submit(function(e){
e.preventDefault();
makeAjaxRequest();
return true;
});function makeAjaxRequest() {
url_new = $(“#datefrom”).val();
$.ajax({
url: ‘ratiostats1.php’,
type: ‘get’,
data: {name: $(‘#datefrom’).val(),name: $(‘#dateto’).val()},
success: function(response) {// alert(data);
// $(‘table#resultTable tbody’).html(response);var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’},
{ name: ‘memberID’},
{ name: ‘datePost’},
{name:’dateClick’},
//],
// url: ‘ratiostat1.php’,
cache: false
};var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 980,
source: dataAdapter,
theme: ‘mystyle’,
pageable: true,
autorowheight: true,
autoheight: true,
altrows: false,
editable: false,
source: source,columns: [
{ text: ‘id’, datafield: ‘id’, width: 50},
{ text: ‘memberID’, datafield: ‘memberID’, width: 100 },
{ text: ‘datePost’, datafield: ‘datePost’, width: 100 },
{ text: ‘dateClick’, datafield: ‘dateClick’, width: 100 },]
});}
});
}});
function ajax()
{}
</script>
HTML
<div class=” panel panel-primary\”>
<div class=”panel-heading\”> <h3 class=”panel-title”></h3></div>
<form name=”frmmob” id=”frmmob” method=”post” style=”padding: 0;” >
<input type=”hidden” name=”myid” id=”myid” value=”3″>
<p>Select a date range: <input type=”text” id=”datefrom” name=”datefrom”> <input type=”text” id=”dateto” name=”dateto”> <button type=”submit” name=”submit” id=”btn” class=”btn btn-success btn-sm”>Submit Query <span class=”glyphicon glyphicon-ok-sign”></span></button> Reset <span class=”glyphicon glyphicon-refresh”></span> </p>
</form>
<br><br>
<!– <form name=”criteria” name=”criteria” id=”criteria” action=””>Search Criteria :<select name=”criteria” id=”criteria”><option value=”card”>Card Number</option><option value=”Descriptor”>Merchant Descriptor</option></select> <input name=”criteria” type=”text” id=”criteria” /> </form>
–><br><br><br><br><br><br>
<table id=”example” style=”margin-top: 30px;” class=”table table-responsive table-condensed table-hover”>
<div style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”>
</div>
</div>
</table></div>Hi 9digit,
In the success callback of your Ajax function, you can prepare a new dataAdapter instance and to update the Grid, set its source property to point to that new dataAdapter instance. By doing that, you will update the Grid’s data.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
Thanks for your quick response.I tried by renaming the source and dataadapter but no success.I would appreciate if you could give me an example or explain it .
I would appreciate your help in this regard.
Hi 9digit,
Please, look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?arctic. The sample shows how to search for data, send custom data variables to a server and update the Grid using the server’s response.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Brilliant !!! Hats off..I appreciate your help in this regard
-
AuthorPosts
You must be logged in to reply to this topic.