数据表插件和功能

Question

我有一个带有复选框列的数据表。 当用户单击复选框时，将计算运行总计（总和）。

每当我使用分页将页面“翻页”到另一个页面时，表都会在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> 

Answer 1

当您从一页移动到另一页时，网页不会保存数据。 但是，有多种方法可以克服这一问题。

如果您坚持使用Javascript（纯脚本），sessionStorage / localStorage或cookie就是不错的选择。 jQuery具有相同的功能，但名称和语法不同：)（$ .sessionStorage而不是sessionStorage :)）