how to fetch the data from database in dynamically created table using codeiginter

Question

<table class="table table-bordered table-striped table-xxs" id="tb3" name="tb3">
    <thead>
        <tr>
            <th><a href="javascript:void(0);" id="multi" name="multiplerows" title="Add More Person"></a></th>
            <th>Product Code</th>
            <th>Product Name</th>
            <th>Qty</th>
            <th>Rate</th>
            <th>Amount</th>


        </tr>
    </thead>
    <tbody>
        <tr >
            <td><a href='javascript:void(0);' class='remove3'><span class='glyphicon glyphicon-remove'></span></a></td>

            <td>

            <input style="width:80px" type="text" id="Product_Code"  class="form-control input-xs Product_Code "  onkeyup="fetch()" value="<?php echo $r->Product_Code; ?>" name="Product_Code[]" required></td>

            <td ><input style="width:300px" type="text" id="Product_Name" class="form-control input-xs" value="<?php echo $r->Prdtname; ?>" name = "Prdtname[]"  value=""> </td>


            <td><input style="width:80px" type="text" id="Qty"  class="form-control input-xs"  value="<?php echo $r->Qty; ?>" name="Qty[]" required></td>

            <td><input style="width:100px" type="text" id="Rate"  class="form-control input-xs" value="<?php echo $r->rate; ?>" name="rate[]" required></td>

            <td><input style="width:150px" type="text" id="Value" class="form-control input-xs" value="<?php echo $r->amount; ?>" name="amount[]" ></td>


        <th><a href="javascript:void(0);" id="addMore3" name= addmore title="Add More Person"><span class="glyphicon glyphicon-plus"></span></a></th>

        </tr>
    </tbody>
</table>

this table code....

<script>
$(document).ready(function (){
$('#addMore3').on('click', function() {

  var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
          data.find("input").val('');

 });
 $(document).on('click', '.remove3', function() {
     var trIndex = $(this).closest("tr").index();
        if(trIndex>0) {
         $(this).closest("tr").remove();
       } else {
         alert("Sorry!! Can't remove first row!");
       }
  });

});

</script>

this is javascript code for creating table by clicking "+" event.

My prblm is how to fetch data from database display in this automatic table..

Answer 1

You should be able to do this using ajax call.

As you are using codeigniter -

View : Write your ajax and table generation code. Controller: get the ajax request and pass it to modal. Modal: get the data from database.

you should return array of object to view and then just parse the data and generate table. If you dont want to write the table code and ajax then you can use datatable plugin .