jquery – 如何使用footercallback对dataTable中的某些行求和

前端之家收集整理的这篇文章主要介绍了jquery – 如何使用footercallback对dataTable中的某些行求和前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用数据表.我想总结一些列,我想在报告的底部显示.我搜索很多东西.然后我在数据表中找到了新的页脚回调函数.我用过它.但我的输出还没有准备好..

我的代码如下,

  1. function Databind(Pdestroy) {debugger;
  2. var destroy = false;
  3. if (Pdestroy == "1")
  4. destroy = true;
  5.  
  6. var oTable = $('.datatable').dataTable({
  7. "bJQueryUI": true,'bServerSide': true,"bDestroy": destroy,"iDisplayLength": 10,"sPaginationType": "full_numbers",'sAjaxSource': '<%= Url.Action("listcount","Home") %>',"bFilter": true,"aoColumnDefs": [{ 'bSortable': false,'aTargets': [0,1,2,7,8,9,10,11]}],"fnRowCallback": function (nRow,aData,iDisplayIndex) {
  8. var oSettings = oTable.fnSettings();
  9. $("td:first",nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
  10. return nRow;
  11. },"footerCallback": function (row,start,end,iDisplayIndex) {
  12. var api = this.api(),data;
  13.  
  14. // Remove the formatting to get integer data for summation
  15. var intVal = function (i) {
  16. return typeof i === 'string' ? i.replace(/[\$,]/g,'') * 1 : typeof i === 'number' ? i : 0;
  17. };
  18.  
  19. // Total over all pages
  20. total = api.column(4)
  21. .data()
  22. .reduce(function (a,b) {
  23. return intVal(a) + intVal(b);
  24. });
  25.  
  26. // Total over this page
  27. pageTotal = api.column(4,{
  28. page: 'current'
  29. })
  30. .data()
  31. .reduce(function (a,b) {
  32. return intVal(a) + intVal(b);
  33. },0);
  34.  
  35. // Update footer
  36. $(api.column(5).footer()).html(
  37. '$' + pageTotal + ' ( $' + total + ' total)');
  38. }
  39. });
  40. }

这里Row显示undefined.And也没有显示错误.但输出没有显示出来.我附上了输出截图..

要获得价值我应该做什么进一步的过程?

解决方法

使用 sum plugin而不是重新发明轮子:)
  1. jQuery.fn.dataTable.Api.register( 'sum()',function ( ) {
  2. return this.flatten().reduce( function ( a,b ) {
  3. if ( typeof a === 'string' ) {
  4. a = a.replace(/[^\d.-]/g,'') * 1;
  5. }
  6. if ( typeof b === 'string' ) {
  7. b = b.replace(/[^\d.-]/g,'') * 1;
  8. }
  9. return a + b;
  10. },0 );
  11. } );

因为您只想在每次重绘表时更新某个页脚列,所以您只需要一个简单的drawCallback:

  1. drawCallback: function() {
  2. var api = this.api();
  3.  
  4. // Total over all pages
  5. var total = api.column(4).data().sum();
  6.  
  7. // Total over this page
  8. var pageTotal = api.column(4,{page:'current'}).data().sum();
  9.  
  10. $(api.column(5).footer()).html('$' + pageTotal + ' ( $' + total + ' total)');
  11. }

猜你在找的jQuery相关文章