Populate data base record to GridView with JQuery in ASP.Net

I try to use asp gridview for this i try webmethod and jquery to fetch data from database now when i use html gridview like this

<div id="GridView1"></div>

then gridview is display on page but when i use asp gridview like this

<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" 
    GridLines="None" onpageindexchanging="GridView1_PageIndexChanging" 
    onselectedindexchanged="GridView1_SelectedIndexChanged"  
    AutoGenerateColumns="False" AllowPaging="True"  OnRowCommand="GridView1_select"
    onrowdatabound="GridView1_RowDataBound">
    <AlternatingRowStyle BackColor="White" />
    <EditRowStyle BackColor="#7C6F57" />
    <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#E3EAEB" />
    <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#F8FAFA" />
    <SortedAscendingHeaderStyle BackColor="#246B61" />
    <SortedDescendingCellStyle BackColor="#D4DFE1" />
    <SortedDescendingHeaderStyle BackColor="#15524A" />
    <Columns>
    <asp:BoundField DataField="ID" HeaderText="ID"/>  
    <asp:BoundField DataField="OwnerName" HeaderText="OwnerName"/> 
    <asp:BoundField DataField="RegNo" HeaderText="RegNo"/> 
    <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="lbViewChart" Text="View Chart" CssClass="lbViewChart"  runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

but grid is not display on page ..

Jquery code

<script type="text/javascript">
 $(function () {
     $('[ID*=search_data]').on('click', function () {
         var fromdate = $('[ID*=fromdate]').val();
         var todate = $('[ID*=todate]').val();
         var regiondrop = $('[ID*=regiondrop] option:selected')[0].value;
         var GridView1 = $('[ID*=GridView1]');
         var obj = {};
         obj.fromdate = fromdate;
         obj.todate = todate;
         obj.regiondrop = regiondrop;
         Getdataa(obj);
         return false;
     });
 });
   function Getdataa(obj) {
             $.ajax({
                 type: "POST",
                 url: "WebForm1.aspx/search_data",
     data: "{'fromdate':'" + obj.fromdate + "','todate':'" + obj.todate + "','regiondrop':'" + obj.regiondrop + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 async: true,
                 cache: false,
                 success: function (result) {
                     var final = JSON.parse(result.d).response;
                     console.log(JSON.parse(result.d).response)
                     $("#GridView1").empty();
                     if (final.length > 0) {
                         $("#GridView1").append(
                    "<tr><th>ID</th><th>OwnerName</th><th>RegNo</th></tr>");
                         for (var i = 0; i < final.length; i++) {
                             if (final[i] !== null) {
                                 $("#GridView1").append("<tr><td>" +
                                final[i][0] + "</td> <td>" +
                                final[i][1] + "</td> <td>" +
                                final[i][2] + "</td> <td>" +
                             }
                         }
                     }
                     else {
                         $("#GridView1").hide();
                         $("#Label4").text("No Data");
                     }
                 },
                 error: function (error) {
                     alert("error");

                 }
             });
         }

so is this possible to use asp grid view ? ANY solution?