javascript - jQuery reset a single table during onchange -
i have table follows. how reset table using jquery original state during on change(with th,tds). not reload entire page because have tables also. tried datatables adds search filters , paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01"> <thead style="text-align:center"> <tr> <th class="col-md-6" style="text-align:center">dxx</th> <th class="col-md-2" style="text-align:center">rxx/unit</th> <th class="col-md-2" style="text-align:center">txxx</th> <th class="col-md-2" style="text-align:center">pxxx</th> </tr> </thead> <tbody> <tr> <th>full</th> <td id="fp" style="text-align:right">0</td> <td id="fr" style="text-align:center">0</td> <td> <div style="float:left">$</div> <div style="float:right" id="fpt">0.00</div> </td> </tr> <tr> <th >fractional</th> <td id="fr" style="text-align:right">0</td> <td id="frn" style="text-align:center">0</td> <td> <div style="float:left">$</div> <div id="frt" style="float:right">0.00</div> </td> </tr> <tr> <th >premium</th> <td id="prate" style="text-align:right">0</td> <td id="pnos" style="text-align:center">0%</td> <td> <div style="float:left">$</div> <div id="ptotal" style="float:right">0.00</div> </td> </tr> <tr class="active"> <th>premium discount</th> <td style="text-align:right" id="premium-discount-rate">0</td> <td style="text-align:center"> <select id="premium-disc-list"> <option value=""></option> </select> </td> <td> <div style="float:left">$</div> <div style="float:right" id="premium-discount-total">0.00</div> </td> </tr> </tbody> </table> jquery
var table = $('#t01').datatable(); //table.clear().draw(); //table.fncleartable(); //table.fndraw(); //table.fndestroy(); //table.fndraw();
i have 2 options in mind:
1) can mark elements reset 'resetable' class , add data-original-val property, , once decide reset that:
$('.resetable','#t01').each(function(){ var originalval = $(this).data('original-val'); $(this).html(originalval); }) 2) render copy of table inside type="text/html" script this:
<script type="text/html" id="t01-original"> <table class="table table-bordered table-hover table-sm" id="t01"> <thead style="text-align:center"> <tr> <th class="col-md-6" style="text-align:center">dxx</th> <th class="col-md-2" style="text-align:center">rxx/unit</th> <th class="col-md-2" style="text-align:center">txxx</th> <th class="col-md-2" style="text-align:center">pxxx</th> </tr> </thead> ... </table> </script> this way content of script tag won't parsed , won't have duplicate id issues. on reset replace content of table 1 script:
//t01-container id of div wraps table: $( '#t01-container').html($('#t01-original').html()); 
Comments
Post a Comment