issue in showing pager after reloading the jqxgrid data on click event - jqxgrid

Question

I am trying to reload the grid on click event. Here is my code for grid
var source = {
datatype: "json",
datafields: [
{ name: 'sno' },
{ name: 'bid' },
{ name: 'city' },
{ name: 'booking_date' },
{ name: 'amount' },
{ name: 'customer_contact' },
{ name: 'user_name' },
{ name: 'trip_type' },
{ name: 'comments' },
{ name: 'action' },
],
cache: false,
url: 'order_details.php?flag=2&start_date='+start_date_param+'&end_date='+end_date_param,
data: {
pagesize:50
},
root: 'Rows',
//sortcolumn: 'area',
// sortdirection: 'asc',
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};
dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 1100,
source: dataadapter,
theme: 'classic',
autoheight: true,
pageable: true,
pagesize:50,
enablebrowserselection: true,
selectionmode: 'singlecell',
//sortable:true,
virtualmode: true,
rendergridrows: function (params) {
return params.data;
},
columns:
[
{ text: 'No', datafield: 'sno', width: 30 },
{ text: 'Booking Id', datafield: 'bid', width: 90, align: 'center',cellsAlign: 'center' },
{ text: 'City', datafield: 'city', width: 170 },
{ text: 'Car Book Date', datafield: 'booking_date', width: 100, align: 'center',cellsAlign: 'center' },
{ text: 'Amount', datafield: 'amount', width: 60, align: 'right',cellsAlign: 'right' },
{ text: 'Customer Contact', datafield: 'customer_contact', width: 205 },
{ text: 'User Name', datafield: 'user_name', width: 125 },
{ text: 'Trip Type', datafield: 'trip_type', width: 160},
{ text: 'Comments', datafield: 'comments', width: 80, align: 'center',cellsAlign: 'center'},
{ text: 'Action', datafield: 'action', width: 80, align: 'center',cellsAlign: 'center'},
]
});
// event handling on select of date range and click on button show
$("#btn_show").on("click", function (e) {
e.preventDefault();
var start_date_param = $("#start_date").val();
var end_date_param = $("#end_date").val();
source.url = 'order_details.php?flag=2&start_date='+start_date_param+'&end_date='+end_date_param;
dataadapter.dataBind();
});
On click of button "btn_show", I could get the data from page 0, but if I am on page 4, then after click event, my grid pager is remains on page 4 only and data is display for page 0.If I click on next page, then it jumps from page 0 to next page i.e page 5.
Why jqxgrid is not resetting its recordedstartindex and recordedendindex values on dataadapter.dataBind() call after click event?
Do I need to use any other function to reload my complete grid??

Answer 1

I think that the following:
$("#jqxgrid").jqxGrid('gotopage', 0);
should replace
dataadapter.dataBind();
In your code.