Pass Information From Clicked Row In Hyperlink [Answered]RSS

1 reply

Last post Aug 01, 2019 03:33 AM by Yongqing Yu

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
LiarLiarPant...
Member

44 Points

118 Posts

Pass Information From Clicked Row In Hyperlink

Aug 01, 2019 12:58 AM|LiarLiarPantsOnFire|LINK

In my Asp.Net application I am using JQuery Datatables and I have set a column to be a hyperlink. I want to pass as a param in the hyperlink URL the value from Information. Meaning, if the user clicks microsoft.com then the value A1 should be passed as a param. How can this syntax be modified to achieve this?

This is a fiddle showing data set-up:

https://jsfiddle.net/cqamc695/1/

Yongqing Yu

Contributor

2760 Points

784 Posts

Re: Pass Information From Clicked Row In Hyperlink

Aug 01, 2019 03:33 AM|Yongqing Yu|LINK

Hi LiarLiarPantsOnFire,

According to your description,if you want to pass param in the url, I suggest you use query string to add a question mark after the URL to pass the parameters you need.

You can refer to this link : HTML <a> href Attribute]

Based on your code , I have change your code to meet your needs like below:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css" />
    <script src="../Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
    <script type="text/javascript">
 $(document).ready(function () {
var responseObj = [
    { "information": "A1", "weblink": "http://www.microsoft.com" },
    { "information": "A2", "weblink": "http://www.yahoo.com" },
    { "information": "A3", "weblink": "http://www.google.com" },
    { "information": "A4", "weblink": "http://www.duckduckgo.com" }
];

$('#example').dataTable({
   "data": responseObj,
   "columns": [
      { "data": "information" }, 
      { 
         "data": "weblink",
         "render": function(data, type, row, meta){
            if(type === 'display'){
                data = '<a href="' + data + '?param='+row.information+'">' + data + '</a>';
            }
            
            return data;
         }
      } 
   ]
});
});

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h3>jQuery DataTables: Render cell content</h3>
        <a href="https://www.gyrocode.com/articles/tag/jquery-datatables/">See more articles about jQuery DataTables</a> on <a href="https://www.gyrocode.com/articles/">Gyrocode.com</a><hr>

        <table class="display" id="example">
            <thead>
                <tr>
                    <th>Information</th>
                    <th>Link</th>
                </tr>
            </thead>
        </table>


        <hr />
        <a href="https://www.gyrocode.com/articles/tag/jquery-datatables/">See more articles about jQuery DataTables</a> on <a href="https://www.gyrocode.com/articles/">Gyrocode.com</a>
    </form>
</body>
</html>

The result of this work demo:

Best Regards,

YongQing.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›