ajax - How to Search data in tag input and displaying data to table with javascript? -
i have issues searching , displaying data table javascript. have data format json can't displayed on table 1st row, while on console log.data 5 rows displayed. how solved problem. guys hope here solved.
this data:
var data =[ {header_id:"tr100001" detail_id:"2" item_code:"sph001" price:"4000" weight:"2"}, {header_id:"tr100001" detail_id:"3" item_code:"sph002" price:"4500" weight:"2"}, {header_id:"tr100001" detail_id:"4" item_code:"sph003" price:"30000"weight:"2"}, {header_id:"tr100001" detail_id:"5" item_code:"sph004" price:"45000"weight:"2"}]; this's view:
<div class="row"> <div class="col-md-12"> <div class="table-responsive"> <table id="buy_transaction" class="table table-bordered table-hover table-striped sticky-header"> <thead class="bg-success"> <tr> <th width="1">☑</th> <th width="5"><b>detail</b></th> <th><b>item code</b></th> <th><b>price</b></th> <th><b>weight</b></th> </tr> </thead> <tbody id="datatable2"> <table id="buy_transaction"> <tbody id="datatable2"> <td><input type="checkbox" class="chk" name="chk[]" value="<?php echo $detail->detail_id; ?>"></td> <td><input type="text" id="detail_id" name="detail_id[]" class="detail_id form-control" value="<?php echo $detail->detail_id ;?>" size="1"> </td> <td><input type="text" width="10" class="item_code form-control" id="item_code" name="item_code[]" value="<?php echo $detail->item_code; ?>"></td> <td><input type="text" class="header_id1 form-control" id="header_id" name="header_id[]" value="<?php echo $detail->header_id; ?>" readonly ></td> <td><input type="text" class="price form-control" id="price" name="price[]" value="<?php echo $detail->price; ?>" readonly ></td> <td><input type="text" class="weight form-control" id="weight" name="weight[]" placeholder="0" value="<?php echo $detail->weight; ?>"></td> </table> </div> </div> </div> this's javascript code :
<script type="text/javascript"> function getdheaderid(header_id){ var header_id = header_id.val(); $.ajax({ type : "post", data : {header_id:header_id}, url : "<?php echo base_url();?>index.php/transaction/selltransaction/get_dtheaderid", datatype:"json", cache :false, success: function(data){ console.log(data); for(var i=0; i< data.length; i++){ var obj=data[i]; $(".header_id").val(obj.header_id); $(".detail_id").val(obj.detail_id); $(".item_code").val(obj.item_code); $(".price").val(obj.price); $(".weight").val(obj.weight); } } }); } $(document).ready(function() { $('.header_id').on('keyup', function() { getdheaderid($(this)); }); }); </script>
your question wording pretty hard understand, taking best guess you're looking - want table row each element data. if so, here how can that.
var data = [{ header_id: "tr100001", detail_id: "2", item_code: "sph001", price: "4000", weight: "2" }, { header_id: "tr100001", detail_id: "3", item_code: "sph002", price: "4500", weight: "2" }, { header_id: "tr100001", detail_id: "4", item_code: "sph003", price: "30000", weight: "2" }, { header_id: "tr100001", detail_id: "5", item_code: "sph004", price: "45000", weight: "2" } ]; function getdheaderid(header_id) { // make ajax call... // ... // success callback (data) { var tablehtml = []; (var = 0; < data.length; i++) { var obj = data[i]; var newrow = $(".clone-row").clone(true); newrow.removeclass("clone-row"); newrow.find(".header_id").val(obj.header_id); newrow.find(".detail_id").val(obj.detail_id); newrow.find(".item_code").val(obj.item_code); newrow.find(".price").val(obj.price); newrow.find(".weight").val(obj.weight); tablehtml.push(newrow); } $("#datatable2 tr:not(.clone-row)").remove(); $("#datatable2").append(tablehtml); // } end success callback } getdheaderid();.clone-row { display: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="buy_transaction"> <tbody id="datatable2"> <tr class="clone-row"> <td><input type="checkbox" class="chk" name="chk[]" value="<?php echo $detail->detail_id; ?>"></td> <td><input type="text" name="detail_id[]" class="detail_id form-control" value="<?php echo $detail->detail_id ;?>" size="1"> </td> <td><input type="text" width="10" class="item_code form-control" id="item_code" name="item_code[]" value="<?php echo $detail->item_code; ?>"></td> <td><input type="text" class="header_id1 form-control" id="header_id" name="header_id[]" value="<?php echo $detail->header_id; ?>" readonly></td> <td><input type="text" class="price form-control" id="price" name="price[]" value="<?php echo $detail->price; ?>" readonly></td> <td><input type="text" class="weight form-control" id="weight" name="weight[]" placeholder="0" value="<?php echo $detail->weight; ?>"></td> </tr> </tbody> </table>
Comments
Post a Comment