[英]How to populate/present added datatables row with data?
I am performing some ASP.NET gridview conversions using the datatables.net plug-in. 我正在使用datatables.net插件执行一些ASP.NET gridview转换。 The answer to why I am doing this is more involved and can be debated.
我为什么要这样做的答案更多,可以辩论。 However, I need some help with one of the issues I am running into.
但是,对于我遇到的问题之一,我需要一些帮助。
Using Javascript to convert the gridview on the page was actually quite simple and works well. 使用Javascript转换页面上的gridview实际上非常简单,并且效果很好。 The major issue is that I want to have a fixed 'total' row (footer) within the body of the datatable so that it remains responsive just like the rest of the table.
主要的问题是我想在数据表的主体内有一个固定的“总计”行(页脚),以便它像表的其余部分一样保持响应。
I have attempted to add a footer using the code-behind, and I can populate that footer with total data, but it is not responsive with the rest of the table. 我试图使用后面的代码添加页脚,并且可以用总数据填充该页脚,但是它对表的其余部分没有响应。 I am assuming because the
<tfoot>
is outside of the <tbody>
. 我假设是因为
<tfoot>
在<tbody>
。
Using javascript, I have successfully added a new datatable row and I can output the data to the console, but I am unable to populate the added row with the object data. 使用javascript,我已经成功添加了新的数据表行,并且可以将数据输出到控制台,但是无法用对象数据填充添加的行。
Javascript: Javascript:
var sum;
$(document).ready(function () {
var table = $('#cphPage_gvTaxColl').DataTable();
//convert string to int
var intVal = function (i) {
var j = $("<span/>");
var txt = j.html(i).text();
// alert('txt :' + txt);
var myVal = typeof txt === 'string' ?
parseFloat(txt.replace(/[^\d.-]/g, '')) :
typeof txt === 'number' ?
i : 0;
return myVal || 0;
};
//format integer as currency
var formatSum = function (myVal) {
return accounting.formatMoney(myVal, {
symbol: "$",
precision: 2,
thousand: ",",
decimal: ".",
format: {
pos: "%s %v",
neg: "%s (%v)",
zero: "%s 0.00"
}
});
};
//add total row and determine index
table.row.add(['GRAND TOTAL']).draw();
var total_row = (table.row().count() + 1);
var total_col = (table.row(total_row).column().count + 1);
//alert
console.log('total row: ' + total_row);
//loop columns
table.columns('.sum').every(function () {
sum = this
.data()
.reduce(function (a, b) {
console.log('adding ' + intVal(a) + ' and ' + intVal(b));
return intVal(a) + intVal(b);
});
//alert
console.log('sum: ' + sum);
console.log('column row 2 val: ' + this.data().row([2]));
$(this.cell.node( total_row )).html(
formatSum(sum)
);
});
});
How do I present the object data within the datarow? 如何在数据行中显示对象数据?
I am also receiving the following error message, and I am not certain which parameter is missing ( the 2nd and 3rd columns are null ): 我也收到以下错误消息,并且不确定哪个参数丢失(第二列和第三列为null):
I have included a screenshot with the console data, and if you need it I can provide the .aspx markup: 我在控制台数据中包含了一个屏幕截图,如果需要,我可以提供.aspx标记:
Page + cosole log output 页面+控制台日志输出
I'm still learning the ins-and-outs of this stuff. 我仍在学习这些东西的来龙去脉。 Any guidance you can provide is greatly appreciated.
您可以提供任何指导,我们将不胜感激。
Thanks in advance! 提前致谢!
Here is my solution: 这是我的解决方案:
datatables
should have <tfoot>
datatables
应当具有<tfoot>
Something like this: 像这样:
<table id='table'>
<tbody>
<tr><td></td></tr>
</tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>
footerCallback
field footerCallback
字段 Datatables
initialization: Datatables
初始化:
$('#table').dataTable({
...
"footerCallback": _footerDrawn
...
});
footerCallback
: footerCallback
: I use server-side data, so my source of data for footer is just another field of of ajax-response : 我使用服务器端数据,所以我的页脚数据源只是ajax-response的另一个领域:
_footerDrawn: function( row, data, start, end, display ) {
var table = $('#table').dataTables();
var json = table.api().ajax.json();
// assign values to each cell of the footer from json.total array
$.each( table.api().columns().indexes(), function( index ) {
$( table.api().column( index ).footer() ).html( json.total[index] );
});
}
}
json.total
contains array of string to print in footer
row json.total
包含要在footer
行中打印的字符串数组
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.