如何获得每行值总和的总列答案

【问题标题】：How to get a Total Column with sum of each row values如何获得每行值总和的总列
【发布时间】：2019-12-28 17:01:09
【问题描述】：

我从 MySQL 数据库生成了一个 laravel YajraBox DataTable。一切正常，但现在我想添加一个包含每行值总和的总列。

见下文：

<script>
    $(document).ready(function(){

    $('#jobsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('jobs.get') }}",

        columnDefs: [
            { targets: [0,3,9,10,11,12,13,14,15,16], orderable: false },
            { targets: [0,3,9,10,11,12,13,14,15,16], searchable:false },
            { targets: [0,9,10,11,12,13,14,15,16,17,18,19], defaultContent: "" },
        ],

        columns:[
            /* 0  */ {data: 'action', name:'action'},
            /* 1  */ {data: 'job_no', name: 'job_no'},
            /* 2  */ {data: 'deal_no', name: 'deal_no'},
            /* 3  */ {data: 'cyc_no', name: 'cyc_no'},
            /* 4  */ {data: 'deal_name', name: 'deal_name'},
            /* 5  */ {data: 'site', name: 'site'},
            /* 6  */ {data: 'market_cat', name: 'market_cat'},
            /* 7  */ {data: 'style', name: 'style'},
            /* 8  */ {data: 'main_rend', name: 'main_rend'},
            /* 9  */ {data: 'typwp_pges', name: 'typwp_pges'},
            /* 10 */ {data: 'typalts_pges', name: 'typalts_pges'},
            /* 11 */ {data: 'eowp_pges', name: 'eowp_pges'},
            /* 12 */ {data: 'eoalts', name: 'eoalts'},
            /* 13 */ {data: 'frshtyp_pges', name: 'frshtyp_pges'},
            /* 14 */ {data: 'pdf_pges', name: 'pdf_pges'},
            /* 15 */ {data: 'spin_pges', name: 'spin_pges'},
            /* 16 */ {data: 'qc_pges', name: 'qc_pges'},
            /* 17 */ {data: 'assigned', name: 'assigned'},
            /* 18 */ {data: 'team', name: 'team'},
            /* 19 */ {data: 'due_out', name: 'due_out'},
         ],
         rowGroup: {
         dataSrc: 'due_out'
         }

    });



});

</script>

我想添加 typwp_pges + typalts_pges + eowp_pges + eoalts + frshtyp_pges + pdf_pges + spin_pges + qc_pges

【问题讨论】：

该代码的 HTML 输出是什么？那么，表格的 HTML 是什么样子的呢？

标签： javascript jquery laravel datatables

【解决方案1】：

你可以使用columns.render 选项，像这样：

//data source
const srcData = [
  {'item': 'itemA', '2017': 7, '2018': 5, '2019': 4},
  {'item': 'itemB', '2017': 6, '2018': 3, '2019': 3},
  {'item': 'itemC', '2017': 9, '2018': 8, '2019': 5}
];

//datatable initialization
$('table').DataTable({
  dom: 't',
  data: srcData,
  columns: [
    {title: 'item', data: 'item'},
    {title: '2017', data: '2017'},
    {title: '2018', data: '2018'},
    {title: '2019', data: '2019'},
    {title: 'sum', data: null, render: (_,__,rowData) => /*list summarized properties to make code a bit more compact*/['2017','2018','2019'].reduce((sum, prop) => sum+Number(rowData[prop]),0)}
  ]
});

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;link rel="stylesheet"type="text/css"href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css"/&gt;&lt;script type="application/javascript"src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;&lt;script type="text/javascript"src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;

【讨论】：

您好 Yevgen，感谢您宝贵的时间。我让它工作了。不知何故。它不会添加仅将它们显示在一起的值。 {data: null, render: data => data['typwp_pges'] + data['typalts_pges']},
天啊...那行得通。非常感谢 Yevgen..非常感谢您的帮助。