如何获得总列与每行值的总和

时间:2019-08-23 11:07:11

标签: javascript jquery laravel datatables

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

参见下文:

tableview

<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

1 个答案:

答案 0 :(得分:0)

您可以使用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)}
  ]
});
<!doctype html><html><head><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"/><script type="application/javascript"src="https://code.jquery.com/jquery-3.3.1.min.js"></script><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"></script></head><body><table></table></body></html>