GridView in jquery

Question

 

first for test i try to call gridivew in jquery and i use this feature for gridview

 

https://datatables.net/examples/basic_init/scroll_xy.html

 

i use this

 

1. <scripttype="text/javascript">
2. $(document).ready(function(){
3. $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
4. "aoColumnDefs":[{'bSortable':false,'aTargets':[3]}],
5. "scrollY":200,
6. "scrollX":true,
7. dom:'Bfrtip',
8. buttons:[
9. 'excelHtml5'
11. ]
12. });
13. });

 

and i create public DataTable info(id){ function and call this on page load then grid successfully display

 

but when i call this on button click then gridview not display here i use two function on one button

for display data in gridview i use datatable (function name griddata) and for display data in chart (function name getvo) i use static web method

 

1. <scripttype="text/javascript">
3. varstrarr=[["sfdsdfLi",9],["Kiwsdfi",3],["Mixesdfdnuts",1],["Oranges",6],["Grapes(bunch)",1]];
4. $(function(){
5. $("#<%=search_dat.ClientID%>").on('click',function(){
6. varfromdate=$('[ID*=fromdate]').val();
7. vartodate=$('[ID*=todate]').val();
8. varregion=$('[ID*=regiondrop]option:selected')[0].value;
9. varobj={};
10. varreg={};
11. obj.fromdate=fromdate;
12. obj.todate=todate;
13. obj.region=region;
14. reg=region;
15. Getdata(obj,reg);
16. returnfalse;
17. });
18. });
19. functionGetdata(obj,reg){
21. $.ajax({
22. type:"POST",
23. url:"WebForm1.aspx/GetVo",
24. data:JSON.stringify(obj),
25. contentType:"application/json;charset=utf-8",
26. dataType:"json",
27. async:true,
28. cache:false,
29. success:function(result){
31. varmyData=JSON.parse(result.d);
33. console.log(JSON.parse(result.d));
35. if(myData!==null&&Object.keys(myData).length!==0){
36. strarr=result.d;
37. varmyarr=strarr;
38. $("#<%=GridView1.ClientID%>").show();
39. $("#container").show();
40. $("#Button6").show();
41. $("#<%=Label5.ClientID%>").hide();
42. $("#<%=Label4.ClientID%>").hide();
43. $("#<%=CrystalReportViewer1.ClientID%>").hide();
45. }
46. else{
47. $("#<%=GridView1.ClientID%>").hide();
48. $("#container").hide();
49. $("#cont").hide();
50. $("#<%=Label5.ClientID%>").show();
51. $("#<%=Label5.ClientID%>").text("DATANOTFOUND");
52. $("#<%=Label4.ClientID%>").hide();
54. return;
55. }
56. $('#container').highcharts({
57. chart:{
58. events:{
59. load:function(event){
60. vartotal=0;
61. for(vari=0,len=this.series[0].yData.length;i<len;i++){
62. total+=this.series[0].yData[i];
63. }
64. vartext=this.renderer.text(
65. 'Total:'+total,
66. this.plotLeft,
67. this.plotTop-20
68. ).attr({
69. zIndex:5
70. }).add()
71. }
72. },
75. borderColor:'Grey',
76. borderWidth:2,
77. width:500,
78. height:300,
79. type:'pie',
80. options3d:{
81. enabled:true,
82. alpha:45
83. }
84. },
85. title:{
86. text:'Region:'+reg
88. },
89. subtitle:{
90. text:'<br>FromDate:'+obj.fromdate+'<br>ToDate:'+obj.todate
91. },
92. plotOptions:{
93. pie:{
94. innerSize:100,
95. depth:45,
96. allowPointSelect:true,
97. cursor:'pointer',
98. dataLabels:{
99. enabled:true,
100. format:'<b>{point.name}</b>:{point.y}',
101. },
102. showInLegend:true
103. }
104. },
105. series:[{
106. name:'Deliveredamount',
107. data:JSON.parse(myarr)
108. }]
110. });
111. },
113. error:function(error){
114. alert('nodata');
115. }
116. });
117. }

button html

1. <asp:ButtonID="search_dat"class="sear_btn"value="SearchData"runat="server"Text="Button"OnClick="search_dat_Click"/>

and

1. protectedvoidsearch_dat_Click(objectsender,EventArgse)
2. {
3. griddata(Convert.ToDateTime(fromdate),Convert.ToDateTime(todate),Convert.ToString(regiondrop.SelectedValue));
4. GridView1.DataSource=dt;
5. GridView1.DataBind();
6. }
10. <asp:GridViewID="GridView1"runat="server"
11. Width="100%"CellPadding="0"
12. Font-Names="Verdana"BackColor="White"BorderColor="#CCCCCC"BorderStyle="None"
13. BorderWidth="1px"Font-Size="9pt">
14. <FooterStyleBackColor="White"ForeColor="#000066"/>
15. <HeaderStyleBackColor="#006699"Font-Bold="True"ForeColor="White"/>
16. <PagerStyleBackColor="White"ForeColor="#000066"Horizontal/>
17. <RowStyleForeColor="#000066"/>
18. <SelectedRowStyleBackColor="#669999"Font-Bold="True"ForeColor="White"/>
19. <SortedAscendingCellStyleBackColor="#F1F1F1"/>
20. <SortedAscendingHeaderStyleBackColor="#007DBB"/>
21. <SortedDescendingCellStyleBackColor="#CAC9C9"/>
22. <SortedDescendingHeaderStyleBackColor="#00547E"/>
23. </asp:GridView>

 

div where chart is display

 

1. <divid="container"class="container1">
3. </div>

 

when i set breakpoint and click on button then griddata not call whereas this container is display on button click ..

 

any solution?