how to display mysql database data in gridview using jquery

My aspx page


<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="Server" xmlns:asp="#unknown">
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link rel="Stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" href="css/jdpicker.css" type="text/css" />

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jdpicker.js"></script>

<script type="text/javascript">

var query;

$(document).ready(function () {
$("#go").click(function () {
var datefrom=$("#fromdate").val();
var dateto=$("#todate").val();
var extension= $("#extension").val();
var authcode=$("#authcode").val();
var wwid=$("#wwid").val();

query = "'"+ datefrom +"'" + " and " + " '" + dateto + "'" + " and ";

if(extension.length){
query +="extension=" + " '" + extension + "'" + " and ";
}

if(authcode.length){
query +="authcode=" + " '" + authcode + "'" + " and ";
}

if(wwid.length){
query +="wwid=" + " '" + wwid + "'" + " and ";
}

alert(query);

$("#gridId").GridUnload();
gridload();
});
});

function gridload() {
$.ajax({
url:'daterange.aspx/MyMethod?&query='+query,
dataType: 'json',
contentType: "application/json; charset=utf-8",
type: 'POST',
success: function (ReportDataNew, textStatus, XMLHttpRequest) {
//debugger;
gridData = JSON.parse(ReportDataNew.d);
//console.log(gridData);
//alert(gridData.length);


$("#gridId").jqGrid({
data: gridData,
datatype: "local",
height: '100%',
autowidth: true,
ignoreCase: true,
rowNum: 50,
rowList: [50, 100, 200],
colNames: ['WWID','DialDate', 'DialTime','Extension','Duration', 'Destination', 'Price'],
colModel: [
{ name: 'WWID', index: 'WWID', width: 100, sortable: true, align: 'center' },
{ name: 'dialdate', index: 'dialdate', width: 100, sortable: true, align: 'center' },
{ name: 'dialtime', index: 'dialtime', width: 100, sortable: true, align: 'center' },
{ name: 'extension', index: 'extension', width: 100, sortable: true, align: 'center' },
{ name: 'duration', index: 'duration', width: 100, sortable: true, align: 'center' },
{ name: 'destination', index: 'destination', width: 100, sortable: true, align: 'center' },
{ name: 'price', index: 'price', width: 100, sortable: true, align: 'center'}

],
pager: '#gridpager',
viewrecords: true,
toppager: true,
loadtext: 'Loading...',



});
$('#gridId').jqGrid('navGrid', '#gridpager',
{ edit: false, add: false, del: false,search:false, refreshtext: "Reload", view: false, searchtext: "Search", cloneToTop: true },
{}, {}, {}, { caption: "Search", closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, overlay: false })





.navButtonAdd('#gridId_toppager', {
caption: "ExportToExcel",
id: "exceltop",
buttonicon: "sum.png",
onClickButton: function () {
var filterparameter = $("#gridId").jqGrid('getGridParam', 'postData').filters;
var abc1 = new Array();
abc = JSON.parse(filterparameter);
abc1.push(abc);
var query = '';
$.each(abc1, function (index, value) {
$.each(value.rules, function (ind, val) {
query += val.field + "=" + "'" + val.data + "'" + " and ";

})
})

alert(query);
var URL = 'ExportToExcel.ashx?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val() + '&query=' + query;
window.location = URL;
$.ajax({
url: URL,
type: 'GET',
success: function (data) {
// alert('Exported To Excel');
}

});

}

})

.navButtonAdd('#gridpager', {
caption: "ExportToExcel",
id: "excel",
buttonicon: "sum.png",
onClickButton: function () {

var filterparameter = $("#gridId").jqGrid('getGridParam', 'postData').filters;
var abc1 = new Array();
abc = JSON.parse(filterparameter);
abc1.push(abc);
var query = '';
$.each(abc1, function (index, value) {
$.each(value.rules, function (ind, val) {
query += val.field + "=" + "'" + val.data + "'" + " and ";

})
})
alert(query);
var URL = 'ExportToExcel.ashx?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val() + '&query=' + query;
window.location = URL;
$.ajax({
url: URL,
type: 'GET',
success: function (data) {
// alert('Exported To Excel');
}

});
//alert("ExportToExcel");
}

})


.navButtonAdd('#gridId_toppager', {
caption: "ExportToPdf",
id: "pdftop",
buttonicon: "sum.png",
onClickButton: function () {
var filterparameter = $("#gridId").jqGrid('getGridParam', 'postData').filters;
var abc1 = new Array();
abc = JSON.parse(filterparameter);
abc1.push(abc);
var query = '';
$.each(abc1, function (index, value) {
$.each(value.rules, function (ind, val) {
query += val.field + "=" + "'" + val.data + "'" + " and ";

})
})
alert(query);
var URL = 'ExportToPdf.ashx?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val() + '&query=' + query
window.location = URL;
$.ajax({
url: URL,
type: 'GET',
success: function (data) {
// alert('Exported To Excel');
}

});
//alert("ExportToPdf");
}
})

.navButtonAdd('#gridpager', {
caption: "ExportToPdf",
id: "pdf",
buttonicon: "sum.png",
onClickButton: function () {
var filterparameter = $("#gridId").jqGrid('getGridParam', 'postData').filters;
var abc1 = new Array();
abc = JSON.parse(filterparameter);
abc1.push(abc);
var query = '';
$.each(abc1, function (index, value) {
$.each(value.rules, function (ind, val) {
query += val.field + "=" + "'" + val.data + "'" + " and ";

})
})
alert(query);
var URL = 'ExportToPdf.ashx?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val() + '&query=' + query
window.location = URL;
$.ajax({
url: URL,
type: 'GET',
success: function (data) {
// alert('Exported To Excel');
}
});
}
});




jQuery("#gridId").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "eq" });
jQuery("#gridId")[0].triggerToolbar();
},
error: function (xhr, ajaxOptions, thrownError) { alert('statusCode=Error: ' + xhr.status + '&status=Description :' + thrownError); }
});
}


</script>


<style type="text/css">
#todate
{
z-index: 1;
left: 377px;
top: 113px;
position: absolute;
width: 104px;
}
#fromdate
{
z-index: 1;
left: 137px;
top: 112px;
position: absolute;
width: 104px;
}
#extension
{
z-index: 1;
left: 136px;
top: 143px;
position: absolute;
width: 104px;
}
#wwid
{
z-index: 1;
left: 377px;
top: 144px;
position: absolute;
width: 104px;
}
#timefrom
{
z-index: 1;
left: 587px;
top: 178px;
position: absolute;
width: 104px;

}
#timeto
{
z-index: 1;
left: 778px;
top: 178px;
position: absolute;
width: 104px;
}
#authcode
{
z-index: 1;
left: 587px;
top: 146px;
position: absolute;
width: 104px;
}
#gridId
{
width: 9px;
}
</style>


<body>




</form>

</input></body>
MY CS page After page load

[WebMethod]
public static string MyMethod()
{
string query = HttpContext.Current.Request.QueryString["query"].ToString();
query = query.Remove(query.Length - 3);

List<gridparam> param = new List<gridparam>();
string conn = "Server=localhost;Port=3306;Database=projecttt;UID=root;Pwd=techsoft;pooling=false";
string Query = string.Empty;
if (!string.IsNullOrEmpty(query))
{
Query = "Select username,WWID,depname,extension,dialnumber,dialdate,dialtime,duration,destination,price,units,BusinessUnit,Authcode,endtime from processeddata_table where date(dialdate) between " + query + " limit 5000";
}


MySqlConnection con = new MySqlConnection(conn);
MySqlCommand comm = new MySqlCommand(Query, con);
con.Open();
MySqlDataReader dr = comm.ExecuteReader();

while (dr.Read())
{

gridparam gridpar = new gridparam();

gridpar.username = dr["username"].ToString();
gridpar.WWID = dr["WWID"].ToString();
gridpar.depname = dr["depname"].ToString();
gridpar.extension = dr["extension"].ToString();
gridpar.dialnumber = dr["dialnumber"].ToString();
gridpar.dialdate = dr["dialdate"].ToString();
gridpar.dialtime = dr["dialtime"].ToString();
gridpar.duration = dr["duration"].ToString();
gridpar.destination = dr["destination"].ToString();
gridpar.price = dr["price"].ToString();
gridpar.units = dr["units"].ToString();
gridpar.BusinessUnit = dr["BusinessUnit"].ToString();
gridpar.Authcode = dr["Authcode"].ToString();
gridpar.endtime = dr["endtime"].ToString();
param.Add(gridpar);
}
JavaScriptSerializer serializer = new JavaScriptSerializer();

serializer.MaxJsonLength = Int32.MaxValue;

return serializer.Serialize(param);
}