如何使用数据填充/显示添加的数据表行？ [英] How to populate/present added datatables row with data?

问题描述

我正在使用datatables.net插件执行一些ASP.NET gridview转换。为什么我这样做的答案是更多的参与，可以辩论。但是，我需要一些帮助我遇到的问题之一。

使用Javascript转换网页上的gridview实际上很简单，效果很好。主要的问题是我想在数据表的正文中有一个固定的总行（页脚），以便它像表格的其余部分一样保持敏感。

我尝试使用代码隐藏添加一个页脚，并且我可以使用总数据填充该页脚，但是它与表的其余部分没有响应。我假设因为< tfoot> 在< tbody> 之外。

使用javascript，我已经成功添加了一个新的数据行，我可以将数据输出到控制台，但是我无法使用对象数据填充添加的行。

Javascript：

  var sum; 
 $（document）.ready（function（）{
 var table = $（'＃cphPage_gvTaxColl'）。DataTable（）; 
 
 //将字符串转换为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; 
}; 
 
 //格式整数为货币
 var formatSum = function（myVal）{
 return accounting.formatMoney（myVal，{
 symbol：$，
精度：2，
千：，，
十进制：。，
格式：{
 pos：％s％v，
负：％s（％v），
零：％s 0.00
} 
}）; 
}; 
 
 //添加总行并确定索引
 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）; 
 
 //循环列
 table.columns（'。sum'）。every（function（）{
 sum = this 
 .data（）
 .reduce（function（a，b）{
 console.log（'added'+ intVal（a）+'and'+ intVal（b））; 
 return intVal（a）+ intVal b）; 
}）; 
 
 // alert 
 console.log（'sum：'+ sum）; 
 
 console.log（'列第2行val：'+ this.data（）。row（[2]））; 
 
 $（this.cell.node（total_row））。html（
 formatSum ）
）; 
 
}）; 
}）; 
  

如何在数据行中显示对象数据？

我还收到以下错误消息，我不确定哪个参数丢失（第2列和第3列为空）：

错误消息

我已经包括屏幕截图与控制台数据，如果需要，我可以提供.aspx标记：

Page + cosole日志输出

我还在学习这些东西的内容。非常感谢您提供的任何指导。

提前感谢

解决方案

这是我的解决方案：

1. 数据表的html表应该有< tfoot>

这样的东西：

 < table id ='table'> 
< tbody> 
< tr>< td>< / td>< / tr> 
< / tbody> 
< tfoot> 
< tr>< td>< / td>< / tr> 
< / tfoot> 
< / table> 
  
 
 
 
 
定义  footerCallback  字段
 
 
  Datatables 初始化：
  $ （'#table'）。dataTable（{
 ... 
footerCallback：_footerDrawn 
 ... 
}）; 
  
 
 
 
 
  footerCallback ：
 
 
我使用服务器端数据，所以我的页脚数据源只是另一个 ajax-response ：
  _footerDrawn：function（row，data，start，end，display）{
 var table = $（'＃table'）。dataTables（）; 
 var json = table.api（）。ajax.json（）; 
 //从json.total数组向$ footer的每个单元格分配值
 $ .each（table.api（）。columns（）。indexes（），function（index）{
 $（table.api（）。column（index）.footer（））.html（json.total [index]）; 
}）; 
} 
} 
  
  json.total 包含要在 footer 行中打印的字符串数组
 
I am performing some ASP.NET gridview conversions using the datatables.net plug-in. 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.  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>.

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:
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 ):

Error message

I have included a screenshot with the console data, and if you need it I can provide the .aspx markup:

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:

The html-table for datatables should have <tfoot>
Something like this: 
<table id='table'>
    <tbody>
        <tr><td></td></tr>
    </tbody>
    <tfoot>
        <tr><td></td></tr>
    </tfoot>
</table>



Define footerCallback field
Datatables initialization:
$('#table').dataTable({
...
  "footerCallback": _footerDrawn
...
});



footerCallback:
I use server-side data, so my source of data for footer is just another field of of 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

                        
这篇关于如何使用数据填充/显示添加的数据表行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！