Question

我有一个包含多个系列数据的人的DataTable。人员可以分为区域，团队，区域和团队。我正在尝试在DataTable中创建一个行，它将动态聚合（求和）表的最高级别的值。

我看到以下三种情况：

区域和团队负责人都包含在表格中，然后汇总将基于地区。
仅包含区域（排除团队负责人），然后根据地区进行汇总。
仅包括团队负责人（不包括地区），然后根据团队负责人进行汇总。

这是一个JS小提琴我拥有的东西。我似乎无法弄清楚如何使聚合行动态化。无论何时我从这里做任何事情，我似乎打破了一切。欢迎任何帮助！谢谢！

HTML

 <body>


<div class = "row" >
    <div class = 'col-sm-4'>
        <div class = "well" align="center"> 
            <b> Select Value Type </b> <br> <br>
            <form>
                <label class="radio-inline"><input type="radio" name="optradio" value="current">Option 1</label>
                <label class="radio-inline"><input type="radio" name="optradio" value="mtd">Option 2</label>
                <label class="radio-inline"><input type="radio" name="optradio" value="rolling">Option 3</label>
            </form>
        </div>
    </div>
    <div class = 'col-sm-4'>
        <div class = "well" align="center"> 
            <b> Add / Drop Columns </b> <br> <br> 
            <form>
                <label class="checkbox-inline" >
                    <input type="checkbox" value="true" checked=true data-column="0"> 
                        Region </label>

                <label class="checkbox-inline" >
                    <input type="checkbox" value="true" checked=true data-column="1"> 
                        Team Leader </label>

            </form>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-lg-10">
        <div class="panel panel-default">

            <div class="panel-body">
                  <table id="example" class="display" width="100%">
                    <thead>
                        <tr>
                            <th rowspan = "2" align = "center">Region</th>
                            <th rowspan = "2" align = "center">Leader</th>
                            <th rowspan = "2" align = "center">Member</th>
                            <th colspan = "2" align = "justfiy">Group A</th>
                            <th colspan = "2" align = "justfiy">Group B</th>
                            <th colspan = "2" align = "justfiy">Group C</th>
                        </tr>
                        <tr>
                            <th>Series 1</th>
                            <th>Series 2</th>
                            <th>Series 3</th>
                            <th>Series 4</th>
                            <th>Series 5</th>
                            <th>Series 6</th>
                        </tr>
                    </thead>
                  </table>                
            </div>
        </div>
    </div>
</div>


  </body>

JavaScript

 $(function() {
    var $radios = $('input:radio[name=optradio]');
    if($radios.is(':checked') === false) {
        $radios.filter('[value=rolling]').prop('checked', true);
    }
});

$(document).ready( function () {
  var data = [
    ['West', 'John', 'Peter', '-4', '54,164', '-4','546,565', '0','25,547'],
    ['West', 'John', 'John', '29,267','64,876', '2,677','987,654', '0','54,546'],
    ['West', 'Mark', 'Mark', '546,203','554,421', '548,284','5,654,421', '0','65,871'],
    ['East', 'Jim', 'Jim', '164,014','246,698', '166,031','2,546,698', '0','524,652'],
    ['East', 'Jim', 'John', '816,031','557,124', '267,978','5,657,124', '210,412','654,421'],
    ['East', 'Tammy', 'Phil', '3,500','56,654', '3,500','564,654', '0','141,654'],
    ['North', 'Paul', 'Dave', '142,405','5,352', '225,257','5,322', '79,228','87,657'],
    ['North', 'Paul', 'Kourtney', '158,634','576,451', '158,634', '576,451', '0','54,254'],

  ];
  var table = $('#example').DataTable({
    data: data,
    rowsGroup: [
                // Always the array (!) of the column-selectors in specified order to which rows groupping is applied
                // (column-selector could be any of specified in https://datatables.net/reference/type/column-selector)
          0,
          1

    ]});

$('label.checkbox-inline input').on( 'click', function (e) {
        //e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );
        console.log(`this is ${$(this).attr('data-column')}`);
        // Toggle the visibility
        column.visible( ! column.visible() );
    } );

} );

动态更新DataTable

0 个答案: