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?
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.
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/
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.
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.