如何在父/子关系中设置jQuery数据表？

Question

我目前必须在父子关系中链接2 asp:GridView。我发现GridView控件很可怕，并且想用jQuery-Datatable替换它，但似乎无法弄清楚如何设置它们。

我意识到我需要将它们更改为HTML <tables>，但除此之外还有什么？对于Datatable的其他实现，我使用Generic Handler将数据作为json返回。我会简单地做同样的事情并通过jQuery行点击事件将它们绑在一起吗？

    <script type="text/javascript">
    $( document ).ready( function ()
    {
        $( '#tags' ).dataTable( {
            "ajax": 'GetTagsHandler.ashx',
            "columns": [
                { "title": "Tag Description" ,
                  "data": "name"}
            ]
        } );
    } );
</script>

以及上面示例的Handler示例：

 public void ProcessRequest(HttpContext context)
    {
        HttpRequest request = context.Request;
        HttpResponse response = context.Response;

        response.Write("{ \"data\": [");
        bool writeDelimiter = false;

        using (SqlCommand cmd = DBUtils.GetNewCommandObject())
        {
            cmd.Connection.Open();
            cmd.CommandText = @"SELECT crmTags.TagID, crmTags.Name FROM crmTags WHERE crmTags.InstanceID=@InstanceID";
            cmd.Parameters.AddWithValue("@InstanceID", Instance.CurrentInstanceID);

            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                if (!writeDelimiter)
                {
                    writeDelimiter = true;
                }
                else
                {
                    response.Write(",");
                }

                response.Write(string.Format("{{\"DT_RowId\":\"{0}\", \"name\":\"{1}\"}}", dr["TagID"].ToString(), dr["Name"].ToString()));
            }
            dr.Close();

        }
        response.Write("]}");
    }