I have a Page where data is getting refreshed by some search event.

Data is rendered by Bootstrap-Datatable wia ajax which returns json response.

here is small code to 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
        });
        }
       });
}

I want that all Name column should be a anchor tag with link to some url(show profile) with name parameter and value. like-

I have a Page where data is getting refreshed by some search event.

Data is rendered by Bootstrap-Datatable wia ajax which returns json response.

here is small code to 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
        });
        }
       });
}

I want that all Name column should be a anchor tag with link to some url(show profile) with name parameter and value. like-

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

• javascript
• jquery
• twitter-bootstrap
• datatable

2 Answers 2

I got stuck with the same scenario where i have to display anchor tags in place of raw text in Datatable Columns. The solution worked for me is given below

$(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;
                        }
                    }
            ]
        });
    });

Hope this helps for someone stuck in the same scenario

This is an old question, but I stumbled across it on Google, so I thought I'd post an answer in case anyone else happens by here.

Depending on your routing, you could have jQuery add a click event, modified by the name. Assuming the "name" td tag is given the .name class:

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

The trick to this would be to make sure it works with your routing, which based on the example, it should.