如何为每行Bootstrap-Datatable的列添加锚标记

Question

我有一个页面，其中某些搜索事件正在刷新数据。

数据由Bootstrap-Datatable wia ajax呈现，并返回json response 。

这是渲染表的小代码：

function renderTable(url, table, query) {
    $.ajax({url: url,
        data: query,
        success: function(data) {
        $(table).dataTable({
            aaData: data.aaData,
            aoColumns: data.aoColumns,
            bProcessing: true,
            iDisplayLength: 50,
            bDestroy: true
        });
        }
       });
}

我希望所有“ Name列都应该是一个锚标记，并带有指向具有名称参数和值的某些url（显示配置文件）的链接。 喜欢-

http://url.com/profile?name=Airi%20satau

Answer 1

我陷入了同样的情况，即我必须在数据表列中显示锚标记来代替原始文本。 为我工作的解决方案如下

$(document).ready(function () {
        $('#example').DataTable({
            "ajax": yourDataURL,
            "columns": [ // Defines column for the output table
                    { "data": "InventoryId" }, // Attribute of item in collection
                    { "data": "InventoryName" },
                    { "data": "InventoryManager" },
                    { "data": "InventoryActive1",
                        "orderable": false,
                        "searchable": false,
                        "render": function(data,type,row,meta) { // render event defines the markup of the cell text 
                            var a = '<a><i class="fa fa-edit"></i>  ' + row.InventoryName +'</a>'; // row object contains the row data
                            return a;
                        }
                    }
            ]
        });
    });

希望这对陷入同样情况的人有所帮助

Answer 2

这是一个古老的问题，但是我在Google上偶然发现了这个问题，所以我认为我应该发布一个答案，以防其他人在这里发生。

根据您的路由，您可以让jQuery添加一个由名称修改的click事件。 假设为“ name” td标签指定了.name类：

  $(".name").click(function() {
        var suffix = $(this).text().split(' ').join('%20'); //replace the space in the name with %20
        window.document.location = "http://url.com/profile?name=" + $(this).text(); //append to the url string and change document location
  });

解决这个问题的技巧是确保它可以与您的路由一起使用，根据示例，路由应该可以。