jQuery UI Widgets Forums Grid Searching for particular data in data grid

Tagged: , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  9digit 9 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • 9digit
    Participant

    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>


    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    9digit
    Participant

    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.


    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    9digit
    Participant

    Brilliant !!! Hats off..I appreciate your help in this regard

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.