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

Question

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

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

这里是render-table的小代码：

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列都应该是一个锚标记，其中包含指向名称参数和值的某个网址（显示配置文件）的链接。喜欢 -

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添加一个由名称修改的点击事件。假设＆＃34;名称＆＃34; 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
  });

这样做的诀窍是确保它适用于您的路由，基于该示例，它应该。