How to add columns dynamically to DataTables? - c#

I would like add columns dynamically in DataTables.
I retrieve an array with the values for the title of my DataTables.
For the first column, I want nothing and then I want to put my array with the values.
I use Ajax to retrieve the values for titles of DataTables in allyearstat11 .
Here is my javascript code :
function getStatistic11() {
var response;
var allstat11 = [];
var allyearstat11 = [];
var nbY = 20;
$.ajax({
type: 'GET',
url: 'http://localhost:52251/Service1.asmx/Statistic_11',
data: "nbYear='" + nbY + "'",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
response = msg.d;
for (var i = 0; i < response.Items.length; i++) {
allstat11[i] = new Array(nbY);
var j = 0;
allstat11[i][j] = response.Items[i].Interventie;
var t = 1;
while (j <= nbY) {
allstat11[i][t] = response.Items[i].Sum[j];
t++;
j++;
}
}
for (var k = 0; k <= nbY; k++) {
allyearstat11[k] = response.Items[0].YearStart + k;
}
fillDataTable11(allstat11, allyearstat11);
},
error: function (e) {
alert("error loading statistic 11");
}
});
}
Here is my javascript code that fills the DataTables, it works well but manually
function fillDataTable11(data, allyearstat11) {
if ($("#table_statistic_11").css("visibility") == "hidden")
$("#table_statistic_11").css("visibility", "visible");
$('#table_statistic_11').dataTable({
'aaData': data,
'aoColumns': [
{ "sTitle": "", "sCellType": "th", "fnCreatedCell": function (cell) { cell.scope = 'row'; } },
{ "sTitle": allyearstat11[0] },
{ "sTitle": allyearstat11[1] },
{ "sTitle": allyearstat11[2] },
{ "sTitle": allyearstat11[3] },
{ "sTitle": allyearstat11[4] },
{ "sTitle": allyearstat11[5] },
{ "sTitle": allyearstat11[6] },
{ "sTitle": allyearstat11[7] },
{ "sTitle": allyearstat11[8] },
{ "sTitle": allyearstat11[9] },
{ "sTitle": allyearstat11[10] },
{ "sTitle": allyearstat11[11] },
{ "sTitle": allyearstat11[12] },
{ "sTitle": allyearstat11[13] },
{ "sTitle": allyearstat11[14] },
{ "sTitle": allyearstat11[15] },
{ "sTitle": allyearstat11[16] },
{ "sTitle": allyearstat11[17] },
{ "sTitle": allyearstat11[18] },
{ "sTitle": allyearstat11[19] },
{ "sTitle": allyearstat11[20] }
],
"iDisplayLength": 12,
"bJQueryUI": true,
"bDestroy": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false
});
}
Can I use for loop in "aoColumns"?
How do I do ?

I solved the problem :
var tabTitleColumn = [];
for (var i = 0; i < allyearstat11.length; i++) {
tabTitleColumn.push({
"sTitle": allyearstat11[i],
});
};
And after :
'aoColumns': tabTitleColumn

Related

Bind Json data to Echart

am trying to bind data from Database to Echart, My query returns the following value:
Transaction Iteration1
Init----------------- 0.02
Login ------------- 2.29
App --------------- 6.08
Up --------------- 4.88
Select ----------- 3.46
Log ---------------- 0.26
The Iteration column increases for example if i select two iteration, i will get 3 column that is Transaction---- Iteration1 ----- Iteration2
My query is running fine.
My json format:
data[ { Transaction:init, iteration:0.02 }, {
Transaction:Login,iteration1:2.29 }, { Transaction:App,
iteration1:6.08 }, { Transaction:Up, iteration1:4.88 }, {
Transaction:select, iteration1:3.46 }, {Transaction:Log,
iteration1:0.26 } ]
var myChart = echarts.init(document.getElementById('main'));
var params = {
runIds: '1'
};
$.ajax({
url: transactionUrl,
type: 'POST',
dataType: 'JSON',
contentType: 'application/json;',
data: JSON.stringify(params),
beforeSend: function () {
},
success: function (d) {
var seriesHeader = [];
if (seriesHeader.length === 0) {
seriesHeader.push('Transaction');
for (var key in d[0]) {
if (d[0].hasOwnProperty(key)) {
if (key !== 'Transaction') {
seriesHeader.push(key);
}
}
}
}
$.each(d, function (i, item) {
var count = 0;
while (count < seriesHeader.length) {
count += 1;
}
});
var option = {
title: {
//text: 'ECharts entry example'
},
tooltip: {},
legend: {
data: seriesHeader
},
xAxis: {
data: ???
},
yAxis: {},
series: [{
name: seriesHeader[1],
type: 'bar',
data: ??
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
},
error: function () {
}
});
Am a bit confuse how to pass the data to the Echart. Am help will be most welcome.
Please check this demo, assuming there are 2 Iteration.
Is this you want?
let echartsObj = echarts.init(document.querySelector('#canvas'));
let d = [{
Transaction: 'init',
iteration1: 0.02,
iteration2: 2.02,
}, {
Transaction: 'Login',
iteration1: 2.29,
iteration2: 0.52,
}, {
Transaction: 'App',
iteration1: 6.08,
iteration2: 3.53,
}, {
Transaction: 'Up',
iteration1: 4.88,
iteration2: 5.32,
}, {
Transaction: 'select',
iteration1: 3.46,
iteration2: 2.11,
}, {
Transaction: 'Log',
iteration1: 0.26,
iteration2: 1.02,
}]
let seriesHeader = d.map(item => item.Transaction)
let datas = [];
Object.keys(d[0]).forEach(key => {
if (key !== 'Transaction') {
datas.push({
name: key,
type: 'bar',
data: d.map(item => item[key])
})
}
})
option = {
xAxis: {
type: 'category',
data: seriesHeader
},
yAxis: {
type: 'value'
},
legend: {
data: datas.map(item => item.name)
},
series: datas
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 200px">
</div>
</body>
</html>

A public action method 'xyz' was not found on controller

I have Kendo Grid in my view. I have specified read , edit and delete each as of type HTTPPOST. But when I try to edit or delete i get an error that : "A public action method 'UpdateDetails' was not found on controller 'Nop.Plugin.Misc.CategoryWiseShipping.Controllers.ShippingChargeController'." for update Action and similarly one other for delete option.
Interesting thing is that it works fine on my local machine but throws error when published to server
I have searched extensivelly on google but couldn't find the reason as to why it is happening.
This is the controller actionMethod
[HttpPost]
public ActionResult UpdateDetails(ShippingChargeModel shippingChargeModel)
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageProducts))
return AccessDeniedView();
if (shippingChargeModel.SchoolEmail == null)
{
ErrorNotification(" Email can not be null !!", true);
return RedirectToAction("AddShippingCharge", "ShippingCharge");
}
if (shippingChargeModel.SaleStartDate == null)
{
ErrorNotification(" Sale start date can not be null !!", true);
return RedirectToAction("AddShippingCharge", "ShippingCharge");
}
if (shippingChargeModel.SaleEndDate == null)
{
ErrorNotification(" Sale end date can not be null !!", true);
return RedirectToAction("AddShippingCharge", "ShippingCharge");
}
if (shippingChargeModel.SaleEndDate < shippingChargeModel.SaleStartDate)
{
ErrorNotification(" Sale start date should be less than sale end date!!", true);
return RedirectToAction("AddShippingCharge", "ShippingCharge");
}
var modelFromDb = _catShippingService.GetRecord(shippingChargeModel.Id);
modelFromDb.SaleEndDate = shippingChargeModel.SaleEndDate.Value.AddMinutes(330);
modelFromDb.SaleStartDate = shippingChargeModel.SaleStartDate.Value.AddMinutes(330);
modelFromDb.SchoolEmail = shippingChargeModel.SchoolEmail;
modelFromDb.ShippingCharge = shippingChargeModel.ShippingCharge;
modelFromDb.ModifyDate = DateTime.Now;
_catShippingService.Update(modelFromDb);
return new NullJsonResult();
}
This is my Kendo Grid :
function loadKendo() {
var dataNew = {};
$("#shippingCharge-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("GetDetails", "ShippingCharge"))",
type: "POST",
dataType: "json",
},
update: {
url: "#Html.Raw(Url.Action("UpdateDetails", "ShippingCharge"))",
type: "POST",
dataType: "json",
//data: addAntiForgeryToken
},
destroy: {
url: "#Html.Raw(Url.Action("DeleteDetails", "ShippingCharge"))",
type: "POST",
dataType: "json",
}
,
parameterMap: function (data, operation) {
if (operation === "update") {
dataNew.Id = data.Id;
dataNew.CategoryId = data.CategoryId;
dataNew.ShippingCharge = data.ShippingCharge;
dataNew.SaleStartDate = stringToTimestamp(data.SaleStartDate.toUTCString());
dataNew.SaleEndDate = stringToTimestamp(data.SaleEndDate.toUTCString());
dataNew.SchoolEmail = data.SchoolEmail;
return { ShippingChargeModel: dataNew };
}
return data;
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
//ProductId: { editable: false, type: "number" },
CategoryId: { editable: false, type: "string" },
CategoryName: { editable: false, type: "string" },
ShippingCharge: { editable: true, type: "number" },
SaleStartDate: { editable: true, type: "date", format: "{0:dd/MMM/yyyy HH:mm}"},
SaleEndDate: { editable: true, type: "date", format: "{0:dd/MMM/yyyy HH:mm}"},
SchoolEmail: { editable:true, type: "string" }
}
}
},
requestEnd: function (e) {
if (e.type == "update") {
this.read();
}
if (e.type == "cancel") {
this.cancelChanges();
}
},
error: function (e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
numeric: false,
previousNext: false,
info: false,
pageSizes: [#(gridPageSizes)]
},
editable: {
confirmation: "#T("Admin.Common.DeleteConfirmation")",
mode: "inline"
},
scrollable: false,
columns: [
{
field: "CategoryName",
title: "CategoryName",
width: 300
},
{
field: "ShippingCharge",
title: "Shipping Charge",
width: 100,
encoded: false
}
,
{
field: "SchoolEmail",
title: "Email",
width: 200,
encoded: false
}
,
{
field: "SaleStartDate",
title: "Sale Start Date",
width: 200,
encoded: false,
type: "datetime",
format: "{0:dd/MMM/yyyy HH:mm}",
template: "#= kendo.toString(kendo.parseDate(SaleStartDate, 'yyyy-MM-dd'), 'dd/MMM/yyyy') #",
editor: dateTimeEditor
},
{
field: "SaleEndDate",
title: "Sale End Date",
width: 200,
encoded: false,
type: "datetime",
format: "{0:dd/MMM/yyyy HH:mm}",
template: "#= kendo.toString(kendo.parseDate(SaleEndDate, 'yyyy-MM-dd'), 'dd/MMM/yyyy') #",
editor: dateTimeEditor
}, {
command: [
{
name: "edit",
text: {
edit: "#T("Admin.Common.Edit")",
update: "#T("Admin.Common.Update")",
cancel: "#T("Admin.Common.Cancel")"
}
}
, {
name: "destroy",
text: "#T("Admin.Common.Delete")"
}
],
width: 200
}
]
});
}
Please help me out. Any sort of insight will do ...

JSGrid is not getting updated with search values

Im updating the grid values from the database. And passing values from CS page to JSgrid. Delete,Edit is perfectly working with db. But after search the grid is not getting updated.I can pass the search value to the CS page and get the corresponding search value from DB. But the values are not getting updated with JSgrid.
var Status;
var lastPrevItem;
var clients =<%=gridData%>
$("#jsGrid").jsGrid({
width: "100%",
height: "450px",
filtering: true,
//filterable:true,
//inserting: true,
autosearch: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 25,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the Department?",
controller: //db,
{ loadData: function (filter) {
if (filter["ID"] != "" || filter["Name"] != "") {
return $.ajax({
type: "POST",
async: true,
processdata: false,
paging: true,
contentType: "application/json; charset=utf-8",
url: "myurl/mycsmethod",
data: "{'ID':'" + filter["ID"] + "','Name':'" + filter["Name"]+ "'}",
success: function (data) {
},
error: function (XHR, errStatus, errorThrown) {
var err = JSON.parse(XHR.responseText);
errorMessage = err.Message;
alert(errorMessage);
}
});
}
},
updateItem: function (clients) {
var result = $.Deferred();
alert(result);
var ajaxDeferred = $.Deferred().reject();
alert(ajaxDeferred);
ajaxDeferred.done(function (updatedItem) {
result.resolve(updatedItem);
}).fail(function () {
result.resolve(lastPrevItem);
});
return result.promise();
},
},
onItemDeleting: function (args) {
//its working fine
},
onItemEditing: function (args) {
//its working fine
},
data: clients,
fields: [
{ type: "control" },
{ name: "ID", visible: false, width: 0, validate: "required" },
{ name: "Name", visible: false, width: 0, validate: "required" },
]
});
I want to update <%=gridData%> with jsgrid once the search button is triggered.
loadData: function(filter) {
return $.grep(clients, function(client) {
return (!filter["DeptID"] || client["DeptID"].indexOf(filter["DeptID"]) > -1)
&& (!filter["DeptName"] || client["DeptName"].indexOf(filter["DeptName"])>-1)
&& (!filter["Status"] || client["Status"].indexOf(filter["Status"]) > -1)
});},
updateItem: function (updatingClient) {
var result = $.Deferred();
alert(result);
var ajaxDeferred = $.Deferred().reject();
alert(ajaxDeferred);
ajaxDeferred.done(function (updatedItem) {
result.resolve(updatedItem);
}).fail(function () {
result.resolve(lastPrevItem);
});
return result.promise();
},
Its working now with the above code,friends.But If anything,i need to improve in my code, please let me know.

Binding json result in highcharts for asp.net mvc 4

net mvc4 c# razor project i want to implement dotnet highcharts.For that i have created a jsonresult function to get the data from datatable and a cshtml file to render the file.
Here my issue is that
1. i dont how to pass the data from json to view
2. how to display the result for x axis and series in highcharts.
Am beginner in asp.net mvc 4 and Highcharts..
cshtml
enter code here
<script type="text/javascript">
$(function () {
debugger;
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Audience Live Data'
},
subtitle: {
text: 'Mainadv'
},
xAxis: {
categories: [mySeries]
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Home',
data: [{ data: data }]
}, {
name: 'Category',
data: [{ data: data }]
}, {
name: 'Product',
data: [{ data: data }]
}, {
name: 'Basket',
data: [{ data: data }]
},{
name: 'Checkout',
data: [{ data: data }]
}]
});
});
</script>
Script file
<script type="text/javascript">
// the button action
debugger;
var url = "/AudienceLive/GetAudLiveChartData/";
$.ajax({
url: url,
cache: false,
Type: 'POST',
success: function (myData) {
var mySeries = [];
for (var i =0; i < myData.length; i++) {
mySeries.push([myData[i]]);
}
var chart = $('#container').highcharts();
chart.series[0].setData(mySeries);
// chart.series[0].pointStart=;
}, error: function (response) {
alert("error : " + response);
}
});
</script>
JsonResult Function
public JsonResult GetAudLiveChartData()
{
AudienceLiveRepo objlive=new AudienceLiveRepo ();
List<string> test=new List<string>();
DataTable dt = objlive.GetTable();
if(dt!=null)
{
if(dt.Rows.Count>0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
test.Add(Convert.ToString(dt.Rows[i][0]));
test.Add(Convert.ToString(dt.Rows[i][1]));
test.Add(Convert.ToString(dt.Rows[i][2]));
test.Add(Convert.ToString(dt.Rows[i][3]));
test.Add(Convert.ToString(dt.Rows[i][4]));
test.Add(Convert.ToString(dt.Rows[i][5]));
}
}
}
objlive = null;
return Json(test, JsonRequestBehavior.AllowGet);
}
View cshtml
$(document).ready(function () {
$.ajax({
url: "/home/ChartData",
type: 'POST',
dataType: 'json'
}).success(function (dataChart) {
var Xaxis = [];//skapa tre olika array
var dataseries = [];
for (var i = 0; i < dataChart.length; i++) {
var items = dataChart[i];
var XcategoreisItem = items.id;
var seriesData = items;
Xaxis.push(XcategoreisItem);
dataseries.push(seriesData);
console.log(dataseries);
}
getchart(Xaxis, dataseries);
}).error(function (er, xhr, e) {
console.log("Error: ", er, xhr, e);
})
});
function getchart(Xaxis, dataseries) {
$('#container').highcharts({
chart: {
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
title: {
text: 'Zooming and panning'
},
subtitle: {
text: 'Click and drag to zoom in. Hold down shift key to pan.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y}%',
}
}
},
xAxis: {
categories: Xaxis
},
yAxis: {
title: {
text: 'Y axis text'
},
series: [{
name: 'Id',
data: dataseries
}]
});
};
HomeController
public ActionResult ChartData()
{
TbChart db = new TbChart();
var TbChartData = db.getYaxis();
return this.Json(TbChartData, JsonRequestBehavior.AllowGet);
}

Asp.net mvc4 to datatables js

The problems is Datatables JS stays in state "processing" and the Chrome debug throws:
Uncaught TypeError: Cannot read property 'length' of undefined
The code in question that "feeds" datatables js is (data is some linq query):
var jsonData = Json(data);
return jsonData;
The response is (textual response):
[{
"TotalCredito": 1649112940.000000,
"TotalClientes": 1040,
"Balance7": 188974066.000000,
"Balance37": 25152742.000000,
"Balance67": 53268069.000000,
"Mes": 1
}, {
"TotalCredito": 1910576150.000000,
"TotalClientes": 941,
"Balance7": 332301396.000000,
"Balance37": 84407873.000000,
"Balance67": -7053061.000000,
"Mes": 2
}, {
"TotalCredito": 1852843443.000000,
"TotalClientes": 809,
"Balance7": 300589569.000000,
"Balance37": 87170595.000000,
"Balance67": 41900708.000000,
"Mes": 3
}, {
"TotalCredito": 1736522626.000000,
"TotalClientes": 747,
"Balance7": 235758479.000000,
"Balance37": 107699635.000000,
"Balance67": 60831390.000000,
"Mes": 4
}, {
"TotalCredito": 1611546395.000000,
"TotalClientes": 702,
"Balance7": 201209547.000000,
"Balance37": 59028449.000000,
"Balance67": 64171607.000000,
"Mes": 5
}, {
"TotalCredito": 1306131513.000000,
"TotalClientes": 697,
"Balance7": 552835099.000000,
"Balance37": 67349028.000000,
"Balance67": 50490441.000000,
"Mes": 6
}]
And the script function in the view is:
<script>
$(document).ready(function () {
var datatable = $('#informe').dataTable({
"language": { "url": "http://cdn.datatables.net/plug-ins/28e7751dbec/i18n/Spanish.json" },
"bFilter": false,
"processing": true,
"serverSide": true,
"ajax": {
"url": "somesupercoolurl",
"type": "POST",
"dataType": "json"
},
"columns": [
{ "data": "Balance7" },
{ "data": "Balance37" },
{ "data": "Balance67" },
{ "data": "Mes" },
{ "data": "TotalClientes" },
{ "data": "TotalCredito" }
],
});
});
Finally, the table is:
<table id="informe">
<thead>
<tr>
<th>Balance7</th>
<th>Balance37</th>
<th>Balance67</th>
<th>Mes</th>
<th>TotalClientes</th>
<th>TotalCredito</th>
</tr>
</thead>
</table>
I find it strange that while the information is properly formatted, is not able to process.
Finally, i resolve this
after seeing many examples, I noticed it's necessary include this 3 variables to json before parse the json object to datatables js; In the controller:
var totalDatos = data.Count();
var jsonData = Json(new {
iTotalDisplayRecords = totalDatos,
iTotalRecords = totalDatos,
aaData = data
});
return jsonData;
Whit this 'function', the json object is like this
{"iTotalDisplayRecords":6,"iTotalRecords":6,"aaData":[{"TotalCredito":1649112940.000000,"TotalClientes":1040,"Balance7":188974066.000000,"Balance37":25152742.000000,"Balance67":53268069.000000,"Mes":1},{"TotalCredito":1910576150.000000,"TotalClientes":941,"Balance7":332301396.000000,"Balance37":84407873.000000,"Balance67":-7053061.000000,"Mes":2},{"TotalCredito":1852843443.000000,"TotalClientes":809,"Balance7":300589569.000000,"Balance37":87170595.000000,"Balance67":41900708.000000,"Mes":3},{"TotalCredito":1736522626.000000,"TotalClientes":747,"Balance7":235758479.000000,"Balance37":107699635.000000,"Balance67":60831390.000000,"Mes":4},{"TotalCredito":1611546395.000000,"TotalClientes":702,"Balance7":201209547.000000,"Balance37":59028449.000000,"Balance67":64171607.000000,"Mes":5},{"TotalCredito":1306131513.000000,"TotalClientes":697,"Balance7":552835099.000000,"Balance37":67349028.000000,"Balance67":50490441.000000,"Mes":6}]}
The table, in the view:
<table id="informe">
<thead>
<tr>
<th>Mes</th>
<th>TotalCredito</th>
<th>TotalClientes</th>
<th>Balance7</th>
<th>Balance37</th>
<th>Balance67</th>
</tr>
</thead>
</table>
The Script is:
<script>
$(document).ready(function () {
var arrayDatos = {
'canal': $(" #ListaCanales ").val(),
'anio': $(" #ListaAnios ").val(),
'vendedorsigla': $(" #ListaVendedores ").val()
};
var datatable = $('#informe').dataTable({
"language": { "url": "http://cdn.datatables.net/plug-ins/28e7751dbec/i18n/Spanish.json" },
"bFilter": false,
"processing": true,
"serverSide": true,
"ajax": {
"url": "mensualajax",
"type": "POST",
"dataType": "json",
"data": arrayDatos
},
"columns": [
{ "data": "Mes", "bSortable": false },
{ "data": "TotalCredito" },
{ "data": "TotalClientes" },
{ "data": "Balance7" },
{ "data": "Balance37" },
{ "data": "Balance67" }
],
});
$(" #FiltrarResultados ").click(function () {
var arrayDatos = {
'canal': $(" #ListaCanales ").val(),
'anio': $(" #ListaAnios ").val(),
'vendedorsigla': $(" #ListaVendedores ").val()
};
datatable.fnClearTable();
$('#informe').dataTable({
"bDestroy": true,
"language": { "url": "http://cdn.datatables.net/plug-ins/28e7751dbec/i18n/Spanish.json" },
"bFilter": false,
"processing": true,
"serverSide": true,
"ajax": {
"url": "mensualajax",
"type": "POST",
"dataType": "json",
"data": arrayDatos
},
"columns": [
{ "data": "Mes", "bSortable": false },
{ "data": "TotalCredito" },
{ "data": "TotalClientes" },
{ "data": "Balance7" },
{ "data": "Balance37" },
{ "data": "Balance67" }
],
});
});
});
is important remark, i use the 'click' function to reload whit ajax the datatables, the 'click' function is nearly equal to the another, but i aggregate "bDestroy": true,in the datatable constructor to reload the datatables (It is not very elegant, but work).
Finally, my new superduper controller to render, capture and updating data with DatatablesJs
//repository with the query
var repositorio = new Repositorios.InformeMensualController();
//capture ajax
string canal = String.Join("", Request.Form.GetValues("canal"));
string auxAnio = String.Join("", Request.Form.GetValues("anio"));
int anio = Convert.ToInt32(auxAnio);
string auxVendedorCodigo = String.Join("", Request.Form.GetValues("vendedorsigla"));
int vendedorCodigo = Convert.ToInt32(auxVendedorCodigo);
//set up data
var data = repositorio.CargaDatos(canal, anio, vendedorCodigo);
//Transformación a JSON y Datatables JS.
var totalDatos = data.Count();
var jsonData = Json(new {
iTotalDisplayRecords = totalDatos,
iTotalRecords = totalDatos,
aaData = data});
return jsonData;
I hope this is useful to someone
regards! :)

Categories