Блог

Главная - Вопросы по программированию - Вычислить общее количество в динамически созданной форме jQuery datatable в формате JSON?

Вычислить общее количество в динамически созданной форме jQuery datatable в формате JSON?

#javascript #jquery #datatables

#javascript #jquery #таблицы данных

Вопрос:

Я новичок в JavaScript и jQuery. Использование таблиц данных jQuery для заполнения данных из JSON API. Заголовок таблицы также динамический, что означает переменную JSON в виде текста заголовка. Как добавить итог (столбец и строку). Требуется итоговое значение по строкам и по столбцам.

введите описание изображения здесь

В эту таблицу хотите добавить итоговый текст в конце строки и столбца. Общее количество строк и столбцов.

Кодирование Ajax:-

 function manufacturingSummary(todayDate) {

$('.loader').show();
$.ajax({
    url : adminBaseUrl   "mfgSummary",
    type : "POST",
    crossDomain : true,
    data : {
        "summary_date" : todayDate
    },
    success : function(data) {

        if (data.status == 1) {

            $('.loader').hide();

            var summaryColumns = [];

            $.each( data.prodMfgSummary[0], function( key, value ) {
                    var items = {};
                    items.data = key;
                    items.title = key;
                    items.orderable = false;
                    /*items.className = "dt-body-right { text-align: center; }";*/
                    summaryColumns.push(items);
            });

            createProdSummaryTable(summaryColumns, data.prodMfgSummary);

        } else {

            $('.loader').hide();
            $('#productionSummary').DataTable().clear().draw();

        }
    },
    error : function(xhr, status) {
        $('.loader').hide();
        alert(status);
    }
});

}

Код создания таблицы:-

 function createProdSummaryTable(columns, mfgSummaryProductData){

$('#productionSummary').dataTable({

    "autoWidth" : false,
    responsive : true,
    "aaData" : mfgSummaryProductData,
    "destroy" : true,
    "aaSorting": [],
    "bFilter": false,
    "aoColumns" : columns,
    "iDeferLoading" : 57
});

}

Помогите мне решить эту проблему.

Ответ №1:

Вот пример использования columnDefs и его render опций target и footerCallback для столбцов, а также для строк

 var dataSet = [{"name":"Wade Rodriguez","field1":21,"field2":22,"field3":20,"field4":21},{"name":"Maxwell Rush","field1":31,"field2":27,"field3":29,"field4":37},{"name":"Ruiz Murray","field1":40,"field2":30,"field3":27,"field4":31},{"name":"Tanner Crosby","field1":37,"field2":35,"field3":21,"field4":39},{"name":"Shelby Douglas","field1":25,"field2":25,"field3":30,"field4":30},{"name":"Haney Fulton","field1":35,"field2":26,"field3":38,"field4":27}]

$(document).ready(function() {
  var my_columns = [];

  $.each(dataSet[0], function(key, value) {
    var my_item = {};
    my_item.data = key;
    my_item.title = key;
    my_columns.push(my_item);
  });

  my_columns.push({
    title: 'Total'
  })

  $(document).ready(function() {

    $("#example").DataTable({
      data: dataSet,
      "columns": my_columns,
      "columnDefs": [{
        "render": function(data, type, row) {
          return Object.values(row).reduce((a, b) => isNaN(b) ? a : a   b, 0)
        },
        "targets": my_columns.length - 1
      }],
      "footerCallback": function(row, data, start, end, display) {
        $('#example tfoot').html('');
        $('#example').append('<tfoot><td>Total</td></tfoot>');
        var api = this.api();
        var total = 0;

        api.columns([1, 2, 3, 4], {
          page: 'current'
        }).every(function() {
          var sum = this
            .data()
            .reduce(function(a, b) {
              var x = parseFloat(a) || 0;
              var y = parseFloat(b) || 0;
              return x   y;
            }, 0);
          total  = sum;
          $('#example tfoot tr').append('<td>'   sum   '</td>');
        });
        $('#example tfoot tr').append('<td>'   total   '</td>');
      }
    });
  });


});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
</table>

Комментарии:

1. мне нужны как итоговые данные по строкам, так и итоговые данные по столбцам. ваш ответ — итоговый показатель по строке. Спасибо за это. Но итоговый показатель по строкам всегда показывает только 0 .

2. @Yugesh добавлено итоговое значение по строкам

3. Когда я замораживаю, первая строка в нижнем колонтитуле столбца исчезает. Возможно ли добавить итоговую сумму в виде новой строки в tbody вместо того, чтобы добавлять ее в tfoot