Add Hyperlink in jQuery DataTable column in ASP.Net

Using the article i have create the sample.

Using jQuery DataTable in ASP.Net Web Forms

For adding Hyperlink use the render function of columns attribute.

HTML

Default

<div style="width: 500px">
    <asp:GridView ID="gvCustomers" runat="server" CssClass="display compact" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="CustomerID" HeaderText="ID" />
            <asp:BoundField DataField="ContactName" HeaderText="Name" />
            <asp:BoundField DataField="City" HeaderText="City" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
            <asp:HyperLinkField DataTextField="CustomerID" HeaderText="" />
        </Columns>
    </asp:GridView>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" />
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    });
    function OnSuccess(response) {
        $("[id*=gvCustomers]").DataTable({
            bLengthChange: true,
            lengthMenu: [[5, 10, -1], [5, 10, "All"]],
            bFilter: true,
            bSort: true,
            bPaginate: true,
            data: response.d,
            columns: [{ 'data': 'CustomerID' },
                    { 'data': 'ContactName' },
                    { 'data': 'City' },
                    { 'data': 'Country' },
                    { 'data': 'CustomerID',
                        "render": function (data, type, row, meta) {
                            var navigateUrl = "Home.aspx?CustomerId=" + data;
                            if (type === 'display') {
                                data = '<a href="' + navigateUrl + '" target="_blank">' + data + '</a>';
                            }

                            return data;
                        }
                    }]
        });
    };
</script>

Home

<asp:Label ID="lblId" runat="server" />

Code

Home

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(Request.QueryString["CustomerId"]))
    {
        lblId.Text = Request.QueryString["CustomerId"];
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not String.IsNullOrEmpty(Request.QueryString("CustomerId")) Then
        lblId.Text = Request.QueryString("CustomerId")
    End If
End Sub

Screenshot

Note: Other binding code and WebMethod code will remain same as in the article.