我有一个动态表，可以搜索、在分页中显示搜索和自动计算字段。场景是
- 用户将在搜索框中搜索他/她的项目
- 如果搜索结果过多，系统将分页显示搜索结果
- 之后，用户可以从搜索结果中进行选择
- 选择后，系统会生成一个包含被选择项目列表的表格
- 表格中有一些文本字段和选择框。实际上它也是一种动态形式。
- 文本字段由 jasvascript 自动计算。
我的问题是：
- 当用户搜索另一个项目时，分页将无法正常工作。它显示我的数据但不分页
- 选择项目后，自动计算将不起作用。
我使用 Codeigniter 作为我的框架。搜索是ajax过程。这是我的代码：
var counter_code = 1;
var counter_item = 1;
var counter_qty = 1;
var counter_unit = 1;
var counter_price = 1;
var counter_total = 1;
//automatic computation in rows
$('[id^=qty],[id^=price]').on('change',function() {
var index = this.id.match(/\d+/)[0];
var qty = parseInt($('#qty'+index).val());
var price = parseFloat($('#price'+index).val());
var disc = $("#discount").val();
var lessitem = $("#purchase_return").val();
var total = 0;
$('#total'+index).val((qty * price ? qty * price : 0).toFixed(2));
var total = 0;
$('[id^=total]').each(function(index){
total+=parseFloat($(this).val()?$(this).val():0);
});
var totalAll = $('#sum_of_total').val(total.toFixed(2));
var vatable = 0;
var vatable_amt = 0;
var totalVat = 0;
var computeDisc = 0;
var computeLess =0;
if($("#tin_number").val().length != 0){
vatable = total / 1.12;
vatable_amt = vatable * 0.12;
totalVat = vatable + vatable_amt;
}else{
totalVat = total;
}
$('#vatable').val(vatable.toFixed(2));
$("#vatable_amount").val(vatable_amt.toFixed(2));
var gtotal = $("#gtotal").val(totalVat.toFixed(2));
$("#total_amt_due").val(gtotal.toFixed(2));
});
$("#discount").on('change',function(){
var totalSales = $("#gtotal").val();
var discountedAmt = $("#discount").val();
var returnAmt = $("#purchase_return").val();
var computeTotalDisc = (totalSales - discountedAmt) - returnAmt;
$("#total_amt_due").val(computeTotalDisc.toFixed(2));
});
$("#purchase_return").on('change',function(){
var totalSalesx = ($("#gtotal").val() - $("#purchase_return").val() - $("#discount").val());
$("#total_amt_due").val(totalSalesx.toFixed(2));
});
$('#search-btn').on('click',function(){
var query = $("#keyword").val();
//var query_url = "<?php echo site_url('item_model/searchItem/" + query + "'); ?>";
var query_url = "<?php echo site_url('item_controller/searchItem'); ?>";
$.ajax({
type:'POST',
url: query_url,
data:{query: $("#keyword").val()},
dataType:'json',
async: false,
success:function(d){
//$('.display').dataTable().fnDestroy( true );
$("#example tbody").html("");
for(i in d){
$("#example tbody").append("<tr><td style='text-align: center; color:' data-code='TRUE'>" + d[i]['code'] + "</td><td style='text-align: left' data-name='TRUE'>" + d[i]['name'] + "</td><td><div style='text-align: center'><input type='button' value='ADD' class='k-button' id='" + d[i]['code'] + "' data-item=TRUE /></div></td></tr>");
}
//$("#search_result").show('blind');
$("[data-item]").on('click',function(){
var code = $(this).parents('tr').find('[data-code]').html();
var name = $(this).parents('tr').find('[data-name]').html();
//console.log(code,name);
$("#grid1 tbody").append("<tr><td style='text-align: center; width: 20%'><input type='text' value=" + code + " readonly style='width:50px; background-color: transparent; border-style: none' id=code" + counter_code++ +" /></td><td style='text-align: center; width: 40%'><input type='text' style='width: 90%; background-color: transparent; border-style: none' value='" + name + "' id=item"+ counter_item++ +" readonly /></td><td style='text-align: center'><input type='text' name='qty[]' id=qty"+ counter_qty++ +" style='text-align: center; width: 50px;' /></td><td style='text-align: center'><div align='center'><select style='width:100px; display: block' name='unit[]' id=unit"+ counter_unit++ +" ><option value=''>----</option><option value='pc/pcs'>PC/PCS</option><option value='BOX/BOXES'>BOX/BOXES</option></select></div></td><td style='text-align: center'><input type='text' name='price[]' id=price"+ counter_price++ +" style='text-align: right; width: 100px;' onblur='' /></td><td style='text-align: center'><input type='text' name='total[]' id=total"+ counter_total++ +" style='font-family: courier; text-align: right; background-color: lightgray; color: red; width: 100px;' readonly='readonly' value='' /></td></tr>");
});
$('.display').dataTable({
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"bDestroy": true,
"bJQueryUI": false,
"bRetrieve": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"destroy": true
});
},
});
});
<div id="search_result" class="k-content">
<div class="k-header" id="item-view-list" align="center">
<table border="0" style="width: 80%; align: left" cellpadding="10" cellspacing="10" align="left">
<tr>
<td colspan="3">
<h5>SEARCH ITEM</h5>
</td>
</tr>
<tr>
<td style="width: 3%">
<label>Name/Description</label>
</td>
<td style="width: 40%">
<input type="text" name="keyword" id="keyword" style="width: 80%" /> <input type="button" value="SEARCH" id="search-btn" class="k-button" style="font-size: 12px" />
</td>
</tr>
</table>
<hr />
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="font-size:small; width: 100%">
<thead>
<tr>
</tr>
<tr>
<th>CODE</th>
<th>NAME/DESCRIPTION</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br />
</div>
</div>
<div class="k-content">
<div class="k-header" id="item-view-list" align="center">
<table id="grid1" border="0" style="width: 100%" cellpadding="10">
<thead>
<tr>
<th style="text-align: center;">CODE</th>
<th style="text-align: center;">DESCRIPTION</th>
<th style="text-align: center;">QTY</th>
<th style="text-align: center;">UNIT</th>
<th style="text-align: center;">UNIT PRICE</th>
<th style="text-align: center;">TOTAL AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<hr />
<div align="right">
<table border="0" cellpadding="10">
<tr>
<td>
<label>Shipping fee?</label>
</td>
<td>
<input type="checkbox" id="yes_shipping" onclick="document.getElementById('shipping_fee').style.display = (this.checked) ? '' : 'none';" />
</td>
<td>
<input type="text" placeholder="Amount (0.00)" id="shipping_fee" style="display: none" />
</td>
</tr>
</table>
</div>
<hr />
<div align="right">
<table>
<tr>
<td></td>
<td></td>
<td>VATable Amount:</td>
<td><input type="text" class="k-textbox" value="" readonly="readonly" style="color: red; text-align: right; font-family: courier; background-color: lightgray;" name="vatable" id="vatable" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td>VAT Input:</td>
<td><input type="text" class="k-textbox" value="" readonly="readonly" style="color: red; text-align: right; font-family: courier; background-color: lightgray;" name="vatable_amount" id="vatable_amount" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td>TOTAL SALES:</td>
<td><input type="text" class="k-textbox" value="" readonly="readonly" style="color: red; text-align: right; font-family: courier; background-color: lightgray;" name="subtotal" id="gtotal" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td>PURCHASE DISCOUNT:</td>
<td><input type="text" class="k-textbox" value="" style="color: red; text-align: right; font-family: courier" name="discount" id="discount" placeholder="Enter discount" maxlength="2" required="required"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td>PURCHASE RETURN:</td>
<td><input type="text" class="k-textbox" value="" style="color: red; text-align: right; font-family: courier" name="purchase_return" id="purchase_return"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td>TOTAL AMOUNT DUE:</td>
<td><input type="text" class="k-textbox" value="0.00" style="color: red; text-align: right; font-family: courier; background-color: lightgray;" name="total_amt_due" id="total_amt_due" readonly="readonly" /></td>
</tr>
<input type="hidden" id="sum_of_total" name="sum_of_total" />
</table>