Datatables插件求和函数
Datatables Plugin Sum Function
我有一个带有一列复选框的数据表。当用户单击复选框时，将计算一个连续的总数（总和）。
每当我使用分页将表"分页"到另一个页面时，都会在dom中重新绘制表。这意味着总和从0开始，而不是以前页面上选中的任何复选框的总和。
如何将总和保存在变量中，以便将其用作后续页面总和的起点？
谢谢！
代码
function init_icheck() {
$('#datatable input[type=checkbox]').iCheck({
checkboxClass: 'icheckbox_square-blue',
increaseArea: '10%'
});
}
// When Pay in Full Checkbox is Checked fill in Pay This Time Field with Invoice Amount Due Value
function paynow() {
var payFull = $('input[type="checkbox"].payfull');
payFull.on('ifChecked', function(event) {
$(this).parents('tr').find('.paynow').val($(this).val().replace('$', ''));
Calc();
});
}
// If Pay in Full Unchecked then remove value from respective Pay This Time Input
// Only bind the ifUnchecked event if the checkbox is checked
function remove_checkbox() {
var payFull = $('input[type="checkbox"].payfull');
payFull.on('ifUnchecked', function(event) {
if ($(this).parents('tr').find('.paynow').val() == $(this).val().replace('$', '')) {
$(this).parents('tr').find('.paynow').val('');
Calc();
}
});
}
// If Pay This Time changes recalculate total
function recalc_total() {
$('.paynow').keyup(function() {
var $ThisCheck = $(this).parents('tr').find('.payfull');
// Add Commas if # is over 1,000
$(this).val(addCommas($(this).val()));
if ($(this).val() == $ThisCheck.val().replace('$', '')) {
$ThisCheck.iCheck('check');
} else {
$ThisCheck.iCheck('uncheck');
}
Calc();
});
}
// Recalc Function
function Calc() {
var Sum = 0;
$('.paynow').each(function(index, Obj) {
var value = parseFloat($(this).val().replace(',', ''));
if (!isNaN(value)) Sum += value;
});
$('#amounttopay').text('$' + Sum.toFixed(2).replace(/'B(?=(?:'d{3})+(?!'d))/g, ','));
}
// Add Commas if value > 1,000
addCommas = function(input) {
// If the regex doesn't match, `replace` returns the string unmodified
return (input.toString()).replace(
// Each parentheses group (or 'capture') in this regex becomes an argument
// to the function; in this case, every argument after 'match'
/^([-+]?)(0?)('d+)(.?)('d+)$/g,
function(match, sign, zeros, before, decimal, after) {
// Less obtrusive than adding 'reverse' method on all strings
var reverseString = function(string) {
return string.split('').reverse().join('');
};
// Insert commas every three characters from the right
var insertCommas = function(string) {
// Reverse, because it's easier to do things from the left
var reversed = reverseString(string);
// Add commas every three characters
var reversedWithCommas = reversed.match(/.{1,3}/g).join(',');
// Reverse again (back to normal)
return reverseString(reversedWithCommas);
};
// If there was no decimal, the last capture grabs the final digit, so
// we have to put it back together with the 'before' substring
return sign + (decimal ? insertCommas(before) + decimal + after : insertCommas(before + after));
}
);
};
// Calc and update pay this time display
Calc();
// Initialize Datatables
$('#datatable').dataTable({
"stateSave": true,
"oLanguage": {
"sSearch": "Search Results:"
},
"initComplete": function(settings) {
init_icheck();
paynow();
remove_checkbox();
recalc_total();
}
});
// Reinitialize iCheck on Pagination Change
$('#datatable').on('draw.dt', function() {
init_icheck();
paynow();
recalc_total();
remove_checkbox();
});
$('#datatable').on('page.dt', function() {
alert('test');
});/* iCheck plugin Square skin, blue
----------------------------------- */
.icheckbox_square-blue,
.iradio_square-blue {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url(https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/square/blue.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox_square-blue {
background-position: 0 0;
}
.icheckbox_square-blue.hover {
background-position: -24px 0;
}
.icheckbox_square-blue.checked {
background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
background-position: -72px 0;
cursor: default;
}
.icheckbox_square-blue.checked.disabled {
background-position: -96px 0;
}
.iradio_square-blue {
background-position: -120px 0;
}
.iradio_square-blue.hover {
background-position: -144px 0;
}
.iradio_square-blue.checked {
background-position: -168px 0;
}
.iradio_square-blue.disabled {
background-position: -192px 0;
cursor: default;
}
.iradio_square-blue.checked.disabled {
background-position: -216px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox_square-blue,
.iradio_square-blue {
background-image: url(blue@2x.png);
-webkit-background-size: 240px 24px;
background-size: 240px 24px;
}
}<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://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.min.js"></script>
<table class="table table-bordered" id="datatable">
<thead>
<tr>
<th>Pay In Full</th>
<th>Pay This Time</th>
</tr>
</thead>
<tfoot>
<tr class="foot">
<th></th>
<th class="text-right">
<h3 class="semibold nm mr5" id="amounttopay">$0.00</h3>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />109.92
</div> <span class="one"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />6.65
</div> <span class="two"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />16.65
</div> <span class="two"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />109.92
</div> <span class="one"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />6.65
</div> <span class="two"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />16.65
</div> <span class="two"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />109.92
</div> <span class="one"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />6.65
</div> <span class="two"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />16.65
</div> <span class="two"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />109.92
</div> <span class="one"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />6.65
</div> <span class="two"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />16.65
</div> <span class="two"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />109.92
</div> <span class="one"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />6.65
</div> <span class="two"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^'d+(,'d{1,2})?$" type="text" />16.65
</div> <span class="two"></span>
</td>
</tr>
</tbody>
</table>当您从一个页面移动到另一个页面时，网页不会保存数据。然而，有多种方法可以克服这一问题。
如果你坚持使用Javascript（纯），sessionStorage/localStorage或cookie是不错的选择。jQuery有相同的东西，但不同的名称和语法：）（$.sessionStorage而不仅仅是sessionStorage：））
相关文章：
- 创建一个类似链接的按钮，并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 如何在JavaScript中将字符串转换为函数引用
- 如何在JavaScript中使用此函数对范围内的所有数字求和
- 使用绑定的简单JavaScript/jQuery求和函数
- Javascript Array 的求和函数问题
- 角度 - 使用函数对数字求和并将其放入视图中
- onChange函数，求和值
- Datatables插件求和函数
- 对多个函数求和
- 试图创建一个对数字求和的Javascript函数
- 对javascript构造函数中的参数求和并返回total
- 函数在不使用parseInt的情况下求和以2为基数的数字的值
- 如何在javascript中求和两个不同的函数
- 如何使用jquery-onlick函数对表单文本字段数组中的值求和
- 当对数组元素求和时，递归函数根据顺序返回不同的值
- 如何在异步函数中对 Javascript 数组的值求和
- 可变curry求和函数
- JavaScript求和函数
- JQuery函数格式和求和或2个文本框的问题
