Preencher Gridview utilizando JQuery

Question

Bom dia,

estou tentando preencher um gridview através do uso de JQuery, tenho os meus códigos que correm tudo mas só os resultados no grid que nao aparecem. vou mostrar passo a passo o que fiz para poderem me ajudar a identificar o que falta ou se estou cometendo algum erro.

1º tenho o meu gridview

<asp:GridView ID="gvResultConsumo" runat="server" ForeColor="#333333" Width="295px">
                    <AlternatingRowStyle BackColor="#FAF5F1" />
                    <EditRowStyle BackColor="#7C6F57" />
                    <FooterStyle HorizontalAlign="Center" Font-Bold="True" ForeColor="black" />
                    <HeaderStyle BackColor="#FF6600" Font-Bold="True" ForeColor="White" />
                    <PagerSettings Mode="NumericFirstLast" />
                    <PagerStyle ForeColor="black" HorizontalAlign="Center" Font-Bold="True" />
                    <RowStyle BackColor="#F3F3F3" />
                    <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
                    <SortedAscendingCellStyle BackColor="#F8FAFA" />
                    <SortedAscendingHeaderStyle BackColor="#14552b" />
                    <SortedDescendingCellStyle BackColor="#D4DFE1" />
                    <SortedDescendingHeaderStyle BackColor="#14552B" />
                </asp:GridView>

depois tenho o script responsável pelo tratamento dos meus dados

<script type="text/javascript">
$(document).ready(function () {
var data1 = $("#textboxInicio").val();
                var data2 = $("#textboxFim").val();
                var linha = $("#textboxLinha").val();
                var data = { data1: $("#textboxInicio").val(), data2: $("#textboxFim").val(), linha: $("#textboxLinha").val() };

                var json_data = JSON.stringify(data);

//gridview
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    url: 'graf2.aspx/ShowGrid',
                    data: json_data,
                    success: function (response) {
                        alert('success');
                        for (var i = 0; i < response.d.length; i++) {
                            $("#gvResultConsumo").append("<tr><td>" + response.d[i].data_emissao + "</td><td>" + response.d[i].valor_total + "</td><td>" + response.d[i].consumo + "</td></tr>");
                        }
                    },
                    error: function (result) {
                        alert("Error " + result.responseText);
                    }
                });

         });
     })

nesse codigo acima eu passo 3 parametros vindos de 3 texbox diferentes. sao parametros necessarios na hora de trabalhar no meu stored Procedure para buscar os dados.

depois tenho a funcao ShowGrid que é responsavel pelo tratamento dos dados

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindColumnToGridview();
        }
    }

    /// This method is used to bind dummy row to gridview to bind data using JQuery
    private void BindColumnToGridview()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("data_emissao");
        dt.Columns.Add("valor_total");
        dt.Columns.Add("consumo");
        dt.Rows.Add();
        gvResultConsumo.DataSource = dt;
        gvResultConsumo.DataBind();
        gvResultConsumo.Rows[0].Visible = false;
    }

[WebMethod]
    public static GridDetails[] ShowGrid(string data1, string data2, string linha)
    {
        DataTable dt = FuncaoRetornoProcuraConsumo(data1, data2, linha);

        List<GridDetails> details = new List<GridDetails>();

        foreach (DataRow dtrow in dt.Rows)
        {
            GridDetails grid = new GridDetails();
            grid.data_emissao = dtrow["data_emissao"].ToString();
            grid.valor_total = Convert.ToInt32(dtrow["valor_total"]);
            grid.consumo = Convert.ToInt32(dtrow["consumo"]);
            details.Add(grid);
        }
        return details.ToArray();
    } //responsavel para preparar a gridview

private static DataTable FuncaoRetornoProcuraConsumo(string dt1, string dt2, string linh)
    {
        SqlDataAdapter da = new SqlDataAdapter("Report_Consumo_Geral", enlCon);
        //escolher o tipo de comando
        da.SelectCommand.CommandType = CommandType.StoredProcedure;

        da.SelectCommand.Parameters.AddWithValue("@data_inicio", Convert.ToDateTime(dt1));
        da.SelectCommand.Parameters.AddWithValue("@data_fim", Convert.ToDateTime(dt2));
        da.SelectCommand.Parameters.AddWithValue("@nro_linha", linh.Trim());

        //definir o objecto dadaset (ds)
        DataSet ds = new DataSet();
        //preencher os dados
        da.Fill(ds);
        return ds.Tables[0];
    }

public class GridDetails{
        public string data_emissao { get; set; }
        public int valor_total{ get; set; }
        public int consumo{ get; set; }

        
    }

como podem observar, eu invoco uma funçao que retorna o datatable e este faz todo o tratamento dos dados e o retorna para a funcao showGrid que vai pegar os dados e vai retorna-los em array....

ao fazer os testes no browser, a msg de sucesso que tenho no codigo javascript 

alert('success');

é apresentado, mas nao me é apresentado os valores preenchidos na gridview. alguem pode me ajudar?? será que falta alguma coisa ou estou fazendo algum passo erradamente? agradeço a ajuda.