How do I Display data from Controller inside a Column Render Function of jquery DataTable?
up vote
0
down vote
favorite
var CityListVM;
$(function () {
CityListVM = {
dt: null,
init: function () {
dt = $('#Vendor-data-table').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "@Url.Action("GetVendorList", "MgtVendor")",
"type": "POST",
"data": function (data) {
data.CustomerKey = $("#CustomerKey").val();
data.CustomerName = $("#CustomerName").val();
data.State = $("#State").val();
data.City = $("#City").val();
data.Attachments = $("#Attachments").val();
data.ZIP = $("#ZIP").val();
data.Phoneref = $("#Phoneref").val();
data.Phone = $("#Phone").val();
data.Email = $("#Email").val();
data.PrimaryContact = $("#PrimaryContact").val();
data.TradeList = $("#TradeList").val();
}
},
"columns": [
{
"title": "Vendor Name", "searchable": true, "sortable": true,
"render": function (data, type, full, meta) {
if (full.Attachments) return '<a href="@Url.Action("Details", "MgtVendor")?id=' + full.CustomerKey + '" style="color:blue" target="_blank">' + full.CustomerName + '</a><img src="/Content/attachment-solid.png" height="10" />';
else return '<a href="@Url.Action("Details", "MgtVendor")?id=' + full.CustomerKey + '" style="color:blue" target="_blank">' + full.CustomerName + '</a>';
}
},
{ "title": "State", "data": "State", "searchable": false, "sortable": false },
{ "title": "City", "data": "City", "searchable": false, "sortable": false },
{ "title": "ZIP", "data": "ZIP", "searchable": false, "sortable": false },
{
"title": "Trades",
"searchable": true,
"data":"TradeList",
"sortable": false,
"render": function (data, type, full, meta) {
var as = null;
return full.TradeList=function () {
var urld = '@Url.Content("~/")' + "Utility/GetVendorTradeList";
$.getJSON(urld, { vendorkey: full.CustomerKey }, function (data1) {
return data1.val();
});
};
}
},
{ "title": "Contact", "data": "PrimaryContact", "searchable": false, "sortable": false },
{
"title": "Phone", "searchable": false, "sortable": true,
"render": function (data, type, full, meta) {
return '<a class="btn btn-info" href="' + full.Phoneref + '">' + full.Phone +'</a>'; }
},
{
"title": "Control",
"data": "CustomerKey",
"searchable": false,
"sortable": false,
"render": function (data) {
return '<a href="@Url.Action("EditVendor", "MgtVendor")?id=' + data + '" class="btn">Edit</a> || <a href="@Url.Action("Delete", "MgtVendor")?id=' + data + '" class="btn">Deactivate</a>';
}
}
],
"lengthMenu": [[100, 50, 25, 10], [100, 50, 25, 10]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
// Advanced Search Modal Search button click handler
$('#btnPerformAdvancedSearch').on("click", CityListVM.refresh);
// initialize the datatables
CityListVM.init();
});
The Part that I really need Help is:
{
"title": "Trades",
"searchable": true,
"data":"TradeList",
"sortable": false,
"render": function (data, type, full, meta) {
var as = null;
return full.TradeList=function () {
var urld = '@Url.Content("~/")' + "Utility/GetVendorTradeList";
$.getJSON(urld, { vendorkey: full.CustomerKey }, function (data1) {
return data1.val();
});
};
}
},
jquery razor model-view-controller datatables
edited Nov 7 at 23:43
Gyrocode.com
35.9k868111
asked Nov 7 at 19:19
user1744023
1324
add a comment |
up vote
0
down vote
favorite
var CityListVM;
$(function () {
CityListVM = {
dt: null,
init: function () {
dt = $('#Vendor-data-table').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "@Url.Action("GetVendorList", "MgtVendor")",
"type": "POST",
"data": function (data) {
data.CustomerKey = $("#CustomerKey").val();
data.CustomerName = $("#CustomerName").val();
data.State = $("#State").val();
data.City = $("#City").val();
data.Attachments = $("#Attachments").val();
data.ZIP = $("#ZIP").val();
data.Phoneref = $("#Phoneref").val();
data.Phone = $("#Phone").val();
data.Email = $("#Email").val();
data.PrimaryContact = $("#PrimaryContact").val();
data.TradeList = $("#TradeList").val();
}
},
"columns": [
{
"title": "Vendor Name", "searchable": true, "sortable": true,
"render": function (data, type, full, meta) {
if (full.Attachments) return '<a href="@Url.Action("Details", "MgtVendor")?id=' + full.CustomerKey + '" style="color:blue" target="_blank">' + full.CustomerName + '</a><img src="/Content/attachment-solid.png" height="10" />';
else return '<a href="@Url.Action("Details", "MgtVendor")?id=' + full.CustomerKey + '" style="color:blue" target="_blank">' + full.CustomerName + '</a>';
}
},
{ "title": "State", "data": "State", "searchable": false, "sortable": false },
{ "title": "City", "data": "City", "searchable": false, "sortable": false },
{ "title": "ZIP", "data": "ZIP", "searchable": false, "sortable": false },
{
"title": "Trades",
"searchable": true,
"data":"TradeList",
"sortable": false,
"render": function (data, type, full, meta) {
var as = null;
return full.TradeList=function () {
var urld = '@Url.Content("~/")' + "Utility/GetVendorTradeList";
$.getJSON(urld, { vendorkey: full.CustomerKey }, function (data1) {
return data1.val();
});
};
}
},
{ "title": "Contact", "data": "PrimaryContact", "searchable": false, "sortable": false },
{
"title": "Phone", "searchable": false, "sortable": true,
"render": function (data, type, full, meta) {
return '<a class="btn btn-info" href="' + full.Phoneref + '">' + full.Phone +'</a>'; }
},
{
"title": "Control",
"data": "CustomerKey",
"searchable": false,
"sortable": false,
"render": function (data) {
return '<a href="@Url.Action("EditVendor", "MgtVendor")?id=' + data + '" class="btn">Edit</a> || <a href="@Url.Action("Delete", "MgtVendor")?id=' + data + '" class="btn">Deactivate</a>';
}
}
],
"lengthMenu": [[100, 50, 25, 10], [100, 50, 25, 10]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
// Advanced Search Modal Search button click handler
$('#btnPerformAdvancedSearch').on("click", CityListVM.refresh);
// initialize the datatables
CityListVM.init();
});
The Part that I really need Help is:
{
"title": "Trades",
"searchable": true,
"data":"TradeList",
"sortable": false,
"render": function (data, type, full, meta) {
var as = null;
return full.TradeList=function () {
var urld = '@Url.Content("~/")' + "Utility/GetVendorTradeList";
$.getJSON(urld, { vendorkey: full.CustomerKey }, function (data1) {
return data1.val();
});
};
}
},
jquery razor model-view-controller datatables
edited Nov 7 at 23:43
Gyrocode.com
35.9k868111
asked Nov 7 at 19:19
user1744023
1324
In the Render Part I need to DIsplay the value of the data returned from the function inside it which is coming as UNDEFINED.
– user1744023
Nov 7 at 19:21
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
var CityListVM;
$(function () {
CityListVM = {
dt: null,
init: function () {
dt = $('#Vendor-data-table').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "@Url.Action("GetVendorList", "MgtVendor")",
"type": "POST",
"data": function (data) {
data.CustomerKey = $("#CustomerKey").val();
data.CustomerName = $("#CustomerName").val();
data.State = $("#State").val();
data.City = $("#City").val();
data.Attachments = $("#Attachments").val();
data.ZIP = $("#ZIP").val();
data.Phoneref = $("#Phoneref").val();
data.Phone = $("#Phone").val();
data.Email = $("#Email").val();
data.PrimaryContact = $("#PrimaryContact").val();
data.TradeList = $("#TradeList").val();
}
},
"columns": [
{
"title": "Vendor Name", "searchable": true, "sortable": true,
"render": function (data, type, full, meta) {
if (full.Attachments) return '<a href="@Url.Action("Details", "MgtVendor")?id=' + full.CustomerKey + '" style="color:blue" target="_blank">' + full.CustomerName + '</a><img src="/Content/attachment-solid.png" height="10" />';
else return '<a href="@Url.Action("Details", "MgtVendor")?id=' + full.CustomerKey + '" style="color:blue" target="_blank">' + full.CustomerName + '</a>';
}
},
{ "title": "State", "data": "State", "searchable": false, "sortable": false },
{ "title": "City", "data": "City", "searchable": false, "sortable": false },
{ "title": "ZIP", "data": "ZIP", "searchable": false, "sortable": false },
{
"title": "Trades",
"searchable": true,
"data":"TradeList",
"sortable": false,
"render": function (data, type, full, meta) {
var as = null;
return full.TradeList=function () {
var urld = '@Url.Content("~/")' + "Utility/GetVendorTradeList";
$.getJSON(urld, { vendorkey: full.CustomerKey }, function (data1) {
return data1.val();
});
};
}
},
{ "title": "Contact", "data": "PrimaryContact", "searchable": false, "sortable": false },
{
"title": "Phone", "searchable": false, "sortable": true,
"render": function (data, type, full, meta) {
return '<a class="btn btn-info" href="' + full.Phoneref + '">' + full.Phone +'</a>'; }
},
{
"title": "Control",
"data": "CustomerKey",
"searchable": false,
"sortable": false,
"render": function (data) {
return '<a href="@Url.Action("EditVendor", "MgtVendor")?id=' + data + '" class="btn">Edit</a> || <a href="@Url.Action("Delete", "MgtVendor")?id=' + data + '" class="btn">Deactivate</a>';
}
}
],
"lengthMenu": [[100, 50, 25, 10], [100, 50, 25, 10]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
// Advanced Search Modal Search button click handler
$('#btnPerformAdvancedSearch').on("click", CityListVM.refresh);
// initialize the datatables
CityListVM.init();
});
The Part that I really need Help is:
{
"title": "Trades",
"searchable": true,
"data":"TradeList",
"sortable": false,
"render": function (data, type, full, meta) {
var as = null;
return full.TradeList=function () {
var urld = '@Url.Content("~/")' + "Utility/GetVendorTradeList";
$.getJSON(urld, { vendorkey: full.CustomerKey }, function (data1) {
return data1.val();
});
};
}
},
jquery razor model-view-controller datatables
edited Nov 7 at 23:43
Gyrocode.com
35.9k868111
asked Nov 7 at 19:19
user1744023
1324
var CityListVM;
$(function () {
CityListVM = {
dt: null,
init: function () {
dt = $('#Vendor-data-table').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "@Url.Action("GetVendorList", "MgtVendor")",
"type": "POST",
"data": function (data) {
data.CustomerKey = $("#CustomerKey").val();
data.CustomerName = $("#CustomerName").val();
data.State = $("#State").val();
data.City = $("#City").val();
data.Attachments = $("#Attachments").val();
data.ZIP = $("#ZIP").val();
data.Phoneref = $("#Phoneref").val();
data.Phone = $("#Phone").val();
data.Email = $("#Email").val();
data.PrimaryContact = $("#PrimaryContact").val();
data.TradeList = $("#TradeList").val();
}
},
"columns": [
{
"title": "Vendor Name", "searchable": true, "sortable": true,
"render": function (data, type, full, meta) {
if (full.Attachments) return '<a href="@Url.Action("Details", "MgtVendor")?id=' + full.CustomerKey + '" style="color:blue" target="_blank">' + full.CustomerName + '</a><img src="/Content/attachment-solid.png" height="10" />';
else return '<a href="@Url.Action("Details", "MgtVendor")?id=' + full.CustomerKey + '" style="color:blue" target="_blank">' + full.CustomerName + '</a>';
}
},
{ "title": "State", "data": "State", "searchable": false, "sortable": false },
{ "title": "City", "data": "City", "searchable": false, "sortable": false },
{ "title": "ZIP", "data": "ZIP", "searchable": false, "sortable": false },
{
"title": "Trades",
"searchable": true,
"data":"TradeList",
"sortable": false,
"render": function (data, type, full, meta) {
var as = null;
return full.TradeList=function () {
var urld = '@Url.Content("~/")' + "Utility/GetVendorTradeList";
$.getJSON(urld, { vendorkey: full.CustomerKey }, function (data1) {
return data1.val();
});
};
}
},
{ "title": "Contact", "data": "PrimaryContact", "searchable": false, "sortable": false },
{
"title": "Phone", "searchable": false, "sortable": true,
"render": function (data, type, full, meta) {
return '<a class="btn btn-info" href="' + full.Phoneref + '">' + full.Phone +'</a>'; }
},
{
"title": "Control",
"data": "CustomerKey",
"searchable": false,
"sortable": false,
"render": function (data) {
return '<a href="@Url.Action("EditVendor", "MgtVendor")?id=' + data + '" class="btn">Edit</a> || <a href="@Url.Action("Delete", "MgtVendor")?id=' + data + '" class="btn">Deactivate</a>';
}
}
],
"lengthMenu": [[100, 50, 25, 10], [100, 50, 25, 10]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
// Advanced Search Modal Search button click handler
$('#btnPerformAdvancedSearch').on("click", CityListVM.refresh);
// initialize the datatables
CityListVM.init();
});
The Part that I really need Help is:
{
"title": "Trades",
"searchable": true,
"data":"TradeList",
"sortable": false,
"render": function (data, type, full, meta) {
var as = null;
return full.TradeList=function () {
var urld = '@Url.Content("~/")' + "Utility/GetVendorTradeList";
$.getJSON(urld, { vendorkey: full.CustomerKey }, function (data1) {
return data1.val();
});
};
}
},
jquery razor model-view-controller datatables
jquery razor model-view-controller datatables
edited Nov 7 at 23:43
Gyrocode.com
35.9k868111
asked Nov 7 at 19:19
user1744023
1324
edited Nov 7 at 23:43
Gyrocode.com
35.9k868111
asked Nov 7 at 19:19
user1744023
1324
edited Nov 7 at 23:43
Gyrocode.com
35.9k868111
edited Nov 7 at 23:43
Gyrocode.com
35.9k868111
edited Nov 7 at 23:43
Gyrocode.com
35.9k868111
35.9k868111
asked Nov 7 at 19:19
user1744023
1324
asked Nov 7 at 19:19
user1744023
1324
asked Nov 7 at 19:19
user1744023
1324
1324
In the Render Part I need to DIsplay the value of the data returned from the function inside it which is coming as UNDEFINED.
– user1744023
Nov 7 at 19:21
add a comment |
In the Render Part I need to DIsplay the value of the data returned from the function inside it which is coming as UNDEFINED.
– user1744023
Nov 7 at 19:21
In the Render Part I need to DIsplay the value of the data returned from the function inside it which is coming as UNDEFINED.
– user1744023
Nov 7 at 19:21
In the Render Part I need to DIsplay the value of the data returned from the function inside it which is coming as UNDEFINED.
– user1744023
Nov 7 at 19:21
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53196338%2fhow-do-i-display-data-from-controller-inside-a-column-render-function-of-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
In the Render Part I need to DIsplay the value of the data returned from the function inside it which is coming as UNDEFINED.
– user1744023
Nov 7 at 19:21