locked
Pass Information From Clicked Row In Hyperlink RRS feed

  • Question

  • User974100899 posted

    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/

    Thursday, August 1, 2019 12:58 AM

Answers

  • User665608656 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 1, 2019 3:33 AM