NutzCN Logo
问答 datatable怎么计算每一列的和
发布于 2768天前 作者 呆呆的初行者 2618 次浏览 复制 上一个帖子 下一个帖子
标签:
var totalRow = 0;  
				  $('#tableID tr').each(function() {  			  
				      $(this).find('td:eq(5)').each(function(){  
				           totalRow += parseFloat($(this).text());   
				       });  
				   });  
				      
				$('#totalRow').append('<td colspan="5" style="text-align: center;">团&nbsp;&nbsp;队&nbsp;&nbsp;合&nbsp;&nbsp;计</td><td>'+totalRow+'</td><td></td><td></td><td></td>');

结果无论放在什么位置总是先加载这个代码,再加载整个表。。。导致无法计算这一列的总值,这个插件有什么计算总和的方法吗???

8 回复

那你怎么加载数据的?做成function,加载完再执行一下这个function嘛

是这样加载的

var datatable;
	function initDatatable() {
		datatable = $('.datatable')
				.DataTable(
						{
							"dom" : '<"top"i>rt<"bottom"flp> <"clear">',
							"searching" : false,
							"processing" : false,
							"serverSide" : true,
							"select" : true,
							"ordering" : true,
							"aLengthMenu" : [ [ 10, 20 ], [ 10, 20 ] ],
							"language" : {
								"url" : "${base}/assets/plugins/datatables/cn.json"
							},
							"preDrawCallback" : function() {
								sublime.showLoadingbar($(".main-content"));
							},
							"drawCallback" : function() {
								sublime.closeLoadingbar($(".main-content"));
							},
							"ajax" : {
								"url" : "${base}/clerk/cloud/report/data",
								"type" : "post",
								"data" : function(d) {									
									d.name = $('#name').val();
									d.phone = $('#phone').val();
									d.join_time_begin = $('#join_time_begin')
											.val();
									d.join_time_until = $('#join_time_until')
											.val();
								}
							},
							"order" : [ [ 1, "desc" ] ],
							"columns" : [
									{
										"data" : null,
										"bSortable" : false
									}, {
										"data" : "name",
										"bSortable" : false
									}, {
										"data" : "delivery_text",
										"bSortable" : false
									}, {
										"data" : function(e) {
											if (e.sex == 0) {
												return '男';
											} else {
												return '女';
											}
										},
										"bSortable" : false
									},{
										"data" : "phone" ,
										"aSortable" : false
									},{
										"data" : "orderAll",
										"aSortable" : false
									},{
										"data" : "orderFinish",
										"aSortable" : false
									},/*{
										"data" : "distance",
										"aSortable" : false
									} ,*/{
										"data" : "orderCancel",
										"aSortable" : false
									},{
										"data" : "orderError",
										"aSortable" : false
									}  

							]/* ,
							"columnDefs" : [ {
								"render" : function(data, type, row) {
									if (data) {
										return moment(parseInt(data * 1000))
												.format("YYYY-MM-DD HH:mm:ss");
									}
									return '';
								},
								"targets" : [ 14 ]
							} ] */
							
								  
						});

		datatable.on('order.dt search.dt', function() {
			datatable.column(0, {
				search : 'applied',
				order : 'applied'
			}).nodes().each(function(cell, i) {
				cell.innerHTML = i + 1;
			});
		}).draw();		

	}

function initDatetimepicker(){
 		$('.form_datetime').datetimepicker({
 	            language:  'zh-CN',
 	            format:'yyyy-mm-dd ',
 	            minView: "month",
 	            weekStart: 1,
 	            todayBtn:  1,
 	            autoclose: 1,
 	            todayHighlight: 1,
 	            startView: 2,
 	            forceParse: 0,
 	            showMeridian: 1
 	 	});
 	 }
	
	$(function() {
		initDatatable();
		$('#join_time_begin').datetimepicker({ //日期选择框
			format : 'yyyy-mm-dd',
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			minView : 2,
			showMeridian : 1
		});

		$('#join_time_until').datetimepicker({ //日期选择框
			format : 'yyyy-mm-dd',
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			minView : 2,
			showMeridian : 1
		});

没看到$('#tableID tr')

我是直接放在初始化datatable方法后面的,我刚又改成了一个function,放在initDatatable();后面,还是不行,还是先执行这个计算方法再加载表单数据。

function initTable(){
		var totalRow = 0;  
		  $('#tableID tr').each(function() {  			  
		      $(this).find('td:eq(5)').each(function(){  
		           totalRow += parseFloat($(this).text());   
		       });  
		   });  
		      
		$('#totalRow').append('<td colspan="5" style="text-align: center;">团&nbsp;&nbsp;队&nbsp;&nbsp;合&nbsp;&nbsp;计</td><td>'+totalRow+'</td><td></td><td></td><td></td>');
	}


$(function() {
		initDatatable();
		initTable();
		$('#join_time_begin').datetimepicker({ //日期选择框
			format : 'yyyy-mm-dd',
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			minView : 2,
			showMeridian : 1
		});

		$('#join_time_until').datetimepicker({ //日期选择框
			format : 'yyyy-mm-dd',
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			minView : 2,
			showMeridian : 1
		});

因为是ajax加载的,放在这个地方

							"drawCallback" : function() {
								sublime.closeLoadingbar($(".main-content"));
                                                                initTable();
							},

灰常感谢作者大神,解决了。突然发现一个新问题,切换页面显示条数的时候,序号那一列会变成Object。。。。要刷新页面才能恢复

赋值错了??

footerCallback 选项用来处理合计行是很方便的: https://datatables.net/reference/option/footerCallback

添加回复
请先登陆
回到顶部