可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

All, i am using RowGrouping on Data table,For each Group i need to do Subtotal on some of columns(Encum,Paid,Balance) and Total on All the row for Column(Encum,Paid,Balance). i am quite new to this Datatable and not able to achieve the result what i needed. Here is the code is have used. i need to display $value of 3 of those column and also do subtotal at the header. Please help me out here, code in jsfiddle: jsfiddle.net/6r2pjbg8

回答1:

Does this work for you?

var POdata = [{     "PO_Nbr": "3000202173",     "FY": 2015,     "LN": "1.1",     "FOA": "2500/T7935002/T790225",     "Proj_ID": "TLRR922B",     "Srce_Type": "6251",     "Encum_Amt": 66033.62,     "Paid": 36508.35,     "Balance": 29525.27 }, {     "PO_Nbr": "3000202173",     "FY": 2015,     "LN": "1.2",     "FOA": "2600/T7935002/T790226",     "Proj_ID": "TLRR922B",     "Srce_Type": "6251",     "Encum_Amt": 212824.56,     "Paid": 117665.45,     "Balance": 95159.11 }, {     "PO_Nbr": "3000143638",     "FY": 2014,     "LN": "1.1",     "FOA": "2500/T7935002/T790225",     "Proj_ID": "TLRR922B",     "Srce_Type": "6251",     "Encum_Amt": 32350.84,     "Paid": 32350.84,     "Balance": 0 }, {     "PO_Nbr": "3000143638",     "FY": 2014,     "LN": "1.2",     "FOA": "2600/T7935002/T790226",     "Proj_ID": "TLRR922B",     "Srce_Type": "6251",     "Encum_Amt": 104265.84,     "Paid": 104265.84,     "Balance": 0 }, {     "PO_Nbr": "3000079267",     "FY": 2013,     "LN": "1.1",     "FOA": "2500/T7935002/T790225",     "Proj_ID": "TLRR922B",     "Srce_Type": "9025",     "Encum_Amt": 21339.91,     "Paid": 21339.91,     "Balance": 0 }, {     "PO_Nbr": "3000079267",     "FY": 2013,     "LN": "1.2",     "FOA": "2600/T7935002/T790226",     "Proj_ID": "TLRR922B",     "Srce_Type": "9025",     "Encum_Amt": 68778.06,     "Paid": 68778.06,     "Balance": 0 }, {     "PO_Nbr": "3000038524",     "FY": 2012,     "LN": "1.1",     "FOA": "2500/T7935002/T790225",     "Proj_ID": "TLRR922B",     "Srce_Type": "9025",     "Encum_Amt": 12752.54,     "Paid": 12752.54,     "Balance": 0 }, {     "PO_Nbr": "3000038524",     "FY": 2012,     "LN": "1.2",     "FOA": "2600/T7935002/T790226",     "Proj_ID": "TLRR922B",     "Srce_Type": "9025",     "Encum_Amt": 41101.1,     "Paid": 41101.1,     "Balance": 0 }];  var table = $('#EncumbranceSummaryTable').DataTable({     "data": POdata,     "columns": [         {             "title": "PO #",             "data": "PO_Nbr",             "visible": false         }, {             "title": "FY",             "data": "FY"         }, {             "title": "LN",             "data": "LN",             "sortable": false         }, {             "title": "F/O/A",             "data": "FOA",             "sortable": false         }, {             "title": "Project ID",             "data": "Proj_ID",             "sortable": false         }, {             "title": "Srce Type",             "data": "Srce_Type",             "sortable": false         }, {             "title": "Encumbrance",             "data": "Encum_Amt",             "sortable": false         }, {             "title": "Paid",             "data": "Paid",             "sortable": false         }, {             "title": "Balance",             "data": "Balance",             "sortable": false         }     ],     "drawCallback": function (settings) {         var api = this.api();         var rows = api.rows({             page: 'current'         }).nodes();         var last = null;         api.column(0, {             page: 'current'         }).data().each(function (group, i) {             if (last !== group) {                 $(rows).eq(i).before(                 $("", {                     "class": "group",                     "data-id": group                 }).append($("", {                     "colspan": 5,                     "class": "pocell",                     "text": "PO # " + group                 })).append($("", {                     "id": "e" + group,                     "class": "noCount",                     "text": "0.00"                 })).append($("", {                     "id": "p" + group,                     "class": "noCount",                     "text": "0.00"                 })).append($("", {                     "id": "b" + group,                     "class": "noCount",                     "text": "0.00"                 })).prop('outerHTML'));                 last = group;             }             val = api.row(api.row($(rows).eq(i)).index()).data();             $("#e" + val.PO_Nbr).text(parseFloat($("#e" + val.PO_Nbr).text()) + parseFloat(val.Encum_Amt));             $("#p" + val.PO_Nbr).text(parseFloat($("#p" + val.PO_Nbr).text()) + parseFloat(val.Paid));             $("#b" + val.PO_Nbr).text(parseFloat($("#b" + val.PO_Nbr).text()) + parseFloat(val.Balance));         });     },     "footerCallback": function (row, data, start, end, display) {         var api = this.api();         $(api.column(6).footer()).html(             api.column(6).data().reduce(function (a, b) {                 return parseFloat(a) + parseFloat(b);             })         );         $(api.column(7).footer()).html(             api.column(7).data().reduce(function (a, b) {                 return parseFloat(a) + parseFloat(b);             })         );         $(api.column(8).footer()).html(             api.column(8).data().reduce(function (a, b) {                 return parseFloat(a) + parseFloat(b);             })         );     } });

Working JSFiddle.

文章来源: RowGrouping and Subtotal on Datatable

标签

subtotal