href passing multiple parameters using a jquery datatable

I have a working jQuery DataTable that I render 1 query string for each link in a column. The edit, details and delete links of that column each receives the 1 parameter: the 'GbngUpdateId' value that is passed to the corresponding action method as a query string that it in turn uses as needed.

I now need to add 2 more parameters to the edit link of that column and pass them accordingly in the query string. They would be: 'PublishedSwitch' and 'AlertSentSwitch'.

The 2 extra parameters are in the list of this object that gets sent to the DataTable that it uses to build the grid.

GbngUpdateForMaint gbngUpdateForMaint = new GbngUpdateForMaint
{
GbngUpdateId = hold.GbngUpdateId,
GbngUpdateTitle = hold.GbngUpdateTitle,
PublishedSwitch = hold.PublishedSwitch,
PublishedDateTime = hold.PublishedDateTime,
AlertSentSwitch = hold.AlertSentSwitch,
};

How can I render these 2 extra parameters in the jQuery for that column in the Datatable?

-----------

I tried building it - the return string is syntactically correct.

For this column, 'data' refers to: gbngUpdateId.

I don't know how to access 'PublishedSwitch' and 'AlertSentSwitch' which are actually different columns on the same row. I want to use them too and send in the query string for this column.

I have ???? as placeholders for now.

"render": function (data, type, full, meta) {
return '"@Url.Action("EditGbngUpdate", "GbngUpdateMaint")?
gbngUpdateId=' + data + '&publishedSwitch=' + ???? + '&alertSentSwitch='
+ ???? +'" class="editGbngUpdate">Edit |
href="@Url.Action("DetailsGbngUpdate", "GbngUpdateMaint")?gbngUpdateId='
+ data + '" class="detailsGbngUpdate">Details |
href="@Url.Action("DeleteGbngUpdate", "GbngUpdateMaint")?gbngUpdateId='
+ data + '" class="deleteGbngUpdate">Delete';

----------

Here's the working jQuery DataTable(the grid) that I render 1 query string. The edit, details and delete action methods each receives the 1 parameter: GbngUpdateId value.

// Declare the datatable ViewModel.
var gbngUpdateListVM;
$(function () {
gbngUpdateListVM = {
dt: null,
init: function () {
dt = $('#gbngupdates-data-table').DataTable({
"serverSide": true, // For processing server-side.
"processing": true, // For showing the progress bar.
"ajax": {
"url": "@Url.Action("GetGbngUpdatesForMaintList", "GbngUpdateMaint")",
"dataType": "json",
"data": function (data) {
},
"error": function (error) {
$("#jsonErrorMessage").text(error.responseJSON.ErrorMessage);
// Show it.
$("#jsonErrorMessage").css("display", "block");
}
},
"columns": [
{
"title": "Actions",
"data": "GbngUpdateId",
"searchable": false,
"sortable": false,
"render": function (data, type, full, meta) {
return ' + data + '" class="editGbngUpdate">Edit | + data + '" class="detailsGbngUpdate">Details | + data + '" class="deleteGbngUpdate">Delete';
}
},
{ "title": "Update Title", "data": "UpdateTitle", "searchable": true },
{ "title": "Published", "data": "PublishedSwitch", "searchable": true },
{ "title": "Published Date", "data": "PublishedDateTime", "searchable": true },
{ "title": "Alert Sent", "data": "AlertSentSwitch", "searchable": true }
],
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
});
}
}
// Initialize the datatable.
gbngUpdateListVM.init();
});

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
you basically wants to construct ahref based on other columns of the table , thats very easy. follow below approach
"render": function(data, type, row, meta){

               data = ' + row.AnyColumnName+ '">' + data + '';

           return data;
        }
The key here is to use overloaded version of render function with (row) and then fetch any column value like
row.column1 or row.column2.

href passing multiple parameters using a jquery datatable - render