0
我有一个数据表与一列复选框。当用户点击复选框时，会计算一个正在运行的总数（总和）。Datatables插件求和函数
无论何时，当我使用分页“翻页”到另一个页面时，表格将在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([email protected]);
-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>
Thanks，Tree。我知道这一点。我想我的问题可能不太清楚。 datatables插件提供分页功能，因此当您使用分页移动页面时，它会重新绘制表格。这是变化的唯一部分。 – dentalhero
对不起。由于你的代码太长，我没有看完：D。可能要编辑您的帖子，使其更清晰:) –
不用担心，我会更新问题。谢谢！ – dentalhero