Создайте гиперссылку для каждой строки в динамической таблице, используя AJAX или jQuery.

Question

Мне нужно создать гиперссылку для каждой строки моей таблицы, созданной с использованием AJAX. Передайте значение через URL и извлеките его на другой веб-странице, используя jQuery или 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>

Мне нужна гиперссылка для каждой строки в таблице и передать одно из значений таблицы в гиперссылку.

Answer 1

Обтекание tr с помощью anchor tag создает неверный HTML. Вы можете добавить onclick на tr, как показано ниже.

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

</tr>

Answer 2

Включите подчеркивание Js в ваш проект

<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>

Создайте шаблон, подобный этому, и дайте правильный идентификатор

В вашем коде JS используйте это

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

     });

Answer 3

Гиперссылки указываются с помощью тега привязки:

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

поэтому в вашей таблице, внутри строки, поместите это как данные в ячейку, например

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

это также работает с JQuery-datatable. При необходимости используйте циклы для динамического создания этого HTML-кода.

Если вы хотите передать данные, используйте строку запроса для форматирования URL - это будет запрос get. Если вы хотите сделать запрос на публикацию, вам нужно будет добавить функцию, чтобы щелкнуть событие и сделать запрос на публикацию явным образом.

Надеюсь, это поможет !!