Question

我有一个在jquery datatables上运行的表，其中一列包含具有两个值的单元格。我已经检查了文档的示例 - column（）。footer（）和footerCallback，试图获取列的两个值的总和并获得在页脚显示的结果。但是当细胞有两个值时，我无法使它工作。我花了两天时间试图在页脚上得到总和，但没有得到正面结果：（。

示例：

每天

200/400

100/1200

700/300

1000/1900（总计）

＆＃13;

$(document).ready(function () {
    var tableDataSet = [
    	{ 
    	"name" : "John",
    	"first_value" : "1200",
      "second_value" : "2000"
      },
			{ 
    	"name" : "Peter",
    	"first_value" : "800",
      "second_value" : "3200"
      },
			{ 
    	"name" : "Tom",
    	"first_value" : "500",
      "second_value" : "1400"
      }];

			$('#example').dataTable({
      	"data": tableDataSet,
				"columns": [
        	{	"data": "name" },
        	{	"data": "null",
          	"type": "natural",
		    		render:
		    			function(data, type, full) {
		    			return	'<p><span class="first_value">'+ full.first_value +'</span> / <span class="second-value">' + full.second_value + '</span></p>';
						}
					}
        ],
	    "paging":   false,
	    "info":     false,
	    "searching":false,
	initComplete: function () {
            var table = $('#example').DataTable();
            var totalFirst = 0;
            var totalSecond = 0;
            $.each(tableDataSet , function (i, l) {
                totalFirst += parseInt(tableDataSet [i]["first_value"]);
                totalSecond += parseInt(tableDataSet [i]["second_value"]);
            });

            table.row.add([totalFirst + "/" + totalSecond]).draw();
        }
    });
 });

＆＃13;

<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.12/sorting/natural.js"></script>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Per day</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Total:</th>
      <th>(SUMS of both values)</th>
	</tr>
  </tfoot>
</table>

＆＃13;

Answer 1

尝试在"searching":false,下方添加以下内容，它将在表格完成后绘制。

"initComplete": function () {
                var table = $('#example').DataTable();
                var totalFirst = 0;
                var totalSecond = 0;
                $.each(tableDataSet , function (i, l) {
                    totalFirst += parseInt(tableDataSet [i]["first_value"]);
                    totalSecond += parseInt(tableDataSet [i]["second_value"]);
                });

                table.row.add({
                    "name": "<b>Totals</b>",
                    "first_value": totalFirst,
                    "second_value": totalSecond
                }).draw();
            }

嗨，我更新了答案。你能测试一下吗？

Answer 2

好的，所以你真正需要做的就是充实你的自定义渲染器并挂钩到drawCallback选项。以下是充分利用DataTables API的完整工作示例：JSFiddle

$(document).ready(function() {
  var tableDataSet = [{
    "name": "John",
    "first_value": "1200",
    "second_value": "2000"
  }, {
    "name": "Peter",
    "first_value": "800",
    "second_value": "3200"
  }, {
    "name": "Tom",
    "first_value": "500",
    "second_value": "1400"
  }];

  $('#example').dataTable({
    "data": tableDataSet,
    "columns": [{
      "data": "name"
    }, {
      "data": "null",
      "type": "natural",
      "className": "per_day"
    }],
    "columnDefs": [{
      "targets": [1],
      "render": function(data, type, full) {
        // We only want return HTML for display
        if (type === 'display') {
          return '<p><span class="first_value">' + full.first_value + '</span> / <span class="second-value">' + full.second_value + '</span></p>';
        }

        // Custom return for sorting.
        if (type === 'sort') {
          return full.first_value;
        }

        // Convert the values to numbers if we can otherwise set them to 0.
        var structuredData = {
          first_value: isNaN(full.first_value) ? 0 : +full.first_value,
          second_value: isNaN(full.second_value) ? 0 : +full.second_value
        }

        // Not dislay lets return our structured data
        return structuredData;
      }
    }],
    "paging": false,
    "info": false,
    "searching": false,
    "drawCallback": function(settings) {
      var jqDataTableObj = $(this);
      var apiDataTableObj = jqDataTableObj.DataTable();
      var totalFirst = 0;
      var totalSecond = 0;
      var sumColumnIndex = -1;

      $(apiDataTableObj.cells(".per_day").nodes()).each(function() {
        var cell = apiDataTableObj.cell(this);

        // We want that nice object we built in the render function.  So don't use
        // "display" or "sort" for this function.
        let structuredCellData = cell.render("filter");
        totalFirst += structuredCellData.first_value;
        totalSecond += structuredCellData.second_value;

        // See if we grabbed a reference to the column index
        if (sumColumnIndex === -1) {
          // Get the column index.
          sumColumnIndex = cell.index().column;
        }
      });

      var footerNode = apiDataTableObj.column(sumColumnIndex).footer();
      $(footerNode).html(totalFirst + " / " + totalSecond);
    }
  });
});

我带来了javascript部分。访问JSFiddle链接以查看它的实际效果。确保查看＆＃34;列＆＃34;，＆＃34; columnDefs＆＃34;和＆＃34; drawCallback＆＃34;的更新。 JSFiddle中的选项。

无论您如何将数据导入DataTable，我在这里的解决方案都将有效。如果您实现了服务器端分页，则SUM将仅用于可见页面。

编辑：改变了＃34;渲染＆＃34;函数在排序时将第一个值作为数字返回。这将允许库排序功能对其进行正确排序。

要添加另一个列，例如每天，只需为此新列添加一个额外的列def并修改＆＃34; drawCallback＆＃34;函数也可以对此新列的值求和。如果您只是做同样的事情（列总和），上面的代码可以用作其他类似列的示例。

如果您对此代码的工作原理有任何疑问，请告知我们，我们可以将讨论转移到聊天中。

获取其单元格中具有两个值的列的总和（jquery数据表）

2 个答案: