使用AJAX或jQuery为动态表中的每一行创建一个超链接

Question

I need to create the hyperlink for every row of my table created using AJAX. Pass the value through the URL and fetch it in the other webpage using jQuery or AJAX.

<script>
 $(document).ready(function() {

            $.getJSON("url here", function(data) {
                    console.log("data table set");
                    console.log("json fetching");

                    for (var i = 0; i < data.length; i++) {
                        var tName = data[i].tName;
                        var pName = data[i].Name;
                        var pType = data[i].prType;
                        tr = $('<tr/>');
                        tr.append("<td>" + data[i].tName + "</td>");
                        tr.append("<td>" + data[i].tName + "</td>");
                        tr.append("<td>" + data[i].prType + "</td>");

                        $('#table1').append(tr);
                        console.log("json fetch complete");

                        $('#table1').DataTable({
                            paginate: true,
                            searching: true,
                            ordering: true,
                            pageLength: 10,
                            select: true

                        });
                    });

            });       
</script>

I need a hyperlink for every row in the table and pass one of the table values in the hyperlink.

Answer 1

Hyperlinks are specified using anchor tag:

<a href="url_here">Display Name</a>

so in your table, inside a row put this as data in the cell, like

<table>
  <tr>
   <td><a href="url_here">Display Name</a></td>
  </tr>
</table>

this works with JQuery-datatable also. Use loops to generate this html dynamically if necessary.

If you wish to pass data, use query string to format the url -- this will be a get request. If you want to make a post request, you will have to add a function to click event and make post request explicitly.

Hope this helps !!

Answer 2

Wrap tr with anchor tag generate invalid HTML. You can add onclick on tr like below.

<tr onclick="window.location='http://www.yoururl.com?param='+ data[i].tName +';'" > //Or what ever you want to pass on next page

</tr>

Answer 3

Include underscore Js in your project

<script type="text/template" id="scriptDataTableTemplate">
    <tr>
        <td><%= tName %></td>
        <td><%= pName %></td>
        <td><%= pType %></td>
        <td class="text-center">
            <a href="/Home/List/<%= id %>">Edit</a>
        </td>
    <tr>
</script>

Create Template like this and give proper id

In your js code use this

var tmpl = _.template($('#scriptDataTableTemplate').html());
for (var i=0; i<data.length; i++){
    var id = data[i].Id;
    var tName = data[i].tName;
    var pName = data[i].Name;
    var pType = data[i].prType;
    var obj = {"id": id , "tName": tName, "pName": pName, "pType": pType};
    var html = tmpl(obj);
    $('#table1').append(html );
}
$('#table1').DataTable({
       paginate: true,
      searching:true,
      ordering: true,
      pageLength: 10,
      select: true

     });