How to open new page and send data when click on a tag in asp.net?

Question

I have datatable with 3 icons in a column

js

var datatableVariable = $('#projects-progress').DataTable({
    data: data,
    columns: [
    { 'data': 'project_name' },
    {
       mRender: function (o) { return '<a href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </a>'; }
  },
] )};

I want when the user click on view, to open details page of the selected row. So, I think I need to pass some data somewhere and open new page of the details. How can I do this? Thanks

edit

I try this

{
  'data': 'project_number',
  "render": function (data, type, full, meta) {
   return '<a href="project_details.aspx?id="+data class="btn btn-primary btn-xs"> <i class="fa fa-folder"></i> View </a > <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a> <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>';
                                  }
                                },

The solution

'<a href="project_details.aspx?id=' + data + '" class="btn btn-primary btn-xs"> <i class="fa fa-folder"></i> View </a > <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a> <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>';

It was a syntax error.

Answer 1

You can use meta.row from render function to get current row ID and then pass it to a function. After that, get the row data using table.row(number).data() and pass that data in query string. Something like this:

//declare a variable to store reference to datatable object
var table;

table = $("selector").DataTable({
  //... your other configuration here

  columns: [
    {
        "render": function(row, type, data, meta) {
            return '<i class="fa fa-pencil" onclick="navigate(' + meta.row + ')"></i>';
        }
    }
  ]
});

//this function is outside the datatables initialization block
function navigate(rowId) {
  //get row data here using row id
  var rowData = table.row(rowId).data();

  //for example we want to redirect to details page with user name and age
  window.location.href = "project_details.aspx?name=rowData.username";
}

or you can use anchor button directly like this:

columns: [
    {
        "render": function(row, type, data, meta) {
            return '<a href="project_details.aspx?id=' + meta.row + '"></a>';
        }
    }
  ]

• meta.row will give you datatable's internal row id (zero based)
• data will give you your data object. You can use this get whatever property you need, like id