title: How to add dynamically data into table using jquery, ajax & codeigniter
body: <p>My Question:
  I click "add" button and open boostrap popup model and insert data into popup model and display this data into my table using jquery ajax and codeigniter </p>
  
  <pre><code>**Controller Name: Product**
  
  Controller Code Below:
  
  &lt;?php
  
  class Product extends CI_Controller {
  
      function __construct() {
          parent::__construct();
  
          $this-&gt;load-&gt;helper('form');
          $this-&gt;load-&gt;helper('url');
          $this-&gt;load-&gt;helper('html');
          $this-&gt;load-&gt;model('product_model');
          $this-&gt;load-&gt;library('form_validation');
      }
  
      public function test() {
          $this-&gt;load-&gt;view('productlist');
      }
  
      public function add() {
          $this-&gt;form_validation-&gt;set_rules('product_name', 'Product Name', 'required');
          $this-&gt;form_validation-&gt;set_rules('product_category', 'Product Category', 'required');
  
          if ($this-&gt;form_validation-&gt;run() == FALSE) {
              echo validation_errors('&lt;li&gt;', '&lt;/li&gt;');
          } else {
              $this-&gt;product_model-&gt;add($_POST);
          }
      }
  
      public function displaylist() {
          $result = $this-&gt;product_model-&gt;displaylist();
          echo json_encode($result);
      }
  
  }
  
  ?&gt;
  </code></pre>
  
  <p>Below is the view layer</p>
  
  <p><strong>View: ProductList.php</strong></p>
  
  <pre><code> &lt;form id="myForm" method="post" action="&lt;?php echo site_url(); ?&gt;/Product/add"&gt;
  
       &lt;div id="myModal" class="modal fade" aria-labelledby="exampleModalLabel"&gt;
           &lt;div class="modal-dialog"&gt;
               &lt;div class="modal-content"&gt;
                   &lt;div class="modal-header"&gt;
                       &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                       &lt;h4 class="modal-title" id="exampleModalLabel"&gt;New Product&lt;/h4&gt;
  
                   &lt;/div&gt;
  
                   &lt;div class="modal-body"&gt;
                       &lt;div id="message" class="text-danger"&gt;&lt;/div&gt;
                           &lt;label&gt;Product Category:&lt;/label&gt;
                           &lt;select class="form-control" id="product_category" name="product_category" id="product_category" value="&lt;?php echo set_value('product_category'); ?&gt;"&gt;
                           &lt;option selected="selected" value="Mobile"&gt;Mobile&lt;/option&gt;
                           &lt;option value="Computer"&gt;Computer&lt;/option&gt;
                                                              &lt;option value="Cloths"&gt;Cloths&lt;/option&gt;
                           &lt;/select&gt;
  
                           &lt;label&gt;Product Name:&lt;/label&gt;
                           &lt;input type="text" class="form-control" name="product_name" id="product_name" value="&lt;?php echo set_value('product_name'); ?&gt;" required=""&gt;
                       &lt;/div&gt;
                       &lt;div class="modal-footer"&gt;
                           &lt;button type="button" name="submit" id="save_change" class="btn btn-primary" value=""&gt;Add Product&lt;/button&gt;
                           &lt;button type="button" name="cancel" id="cancel" class="btn btn-default" value=""&gt;Cancel&lt;/button&gt;
                       &lt;/div&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
          &lt;/div&gt;
    &lt;/form&gt;
  
  
  &lt;div class="table-responsive"&gt;
       &lt;table class="table table-bordered"&gt;
  
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;&lt;input type="checkbox" id="master"&gt;&lt;/th&gt;
                    &lt;th&gt;Product Category&lt;/th&gt;
                    &lt;th&gt;Product Name&lt;/th&gt;
                    &lt;th&gt;Edit&lt;/th&gt;
                    &lt;th&gt;Delete&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody id="demo"&gt;
  
            &lt;/tbody&gt;
  
            &lt;tfoot&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        &lt;button type="button" class="btn btn-danger" id="delete_data"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/button&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tfoot&gt;
  
        &lt;/table&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript file Name:practice.js</strong></p>
  
  <pre><code>var productList = {
      mode: "Add",
      add: function () {
          $.ajax({
              url: base_url + "Product/add",
              type: "post",
              data: $("#myForm").serialize(),
              success: function (data) {
  
              }
          });
  
      },
      list: function () {
          $.ajax({
              url: base_url + "Product/displaylist",
              success: function (result) {
                  var obj = JSON.parse(result);
                  // console.log(obj);
                  var out;
                  var i;
                  for (i = 0; i &lt; obj.length; i++) {
                      out += obj[i].product_name;
  //                    console.log(obj[i].product_name);
                      var category = '&lt;tr&gt;'
                              + '&lt;td&gt; &lt;input type="checkbox" class="sub_chk"&gt; &lt;/td&gt;'
                              + '&lt;td&gt;' + obj[i].product_category + '&lt;/td&gt;'
                              + '&lt;td&gt;' + obj[i].product_name + '&lt;/td&gt;'
                              + '&lt;td&gt;'
                              + '&lt;a href="#!" data-toggle="modal" data-target="#myModal"&gt;'
                              + '&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;'
                              + '&lt;/td&gt;'
                              + '&lt;td&gt;'
                              + '&lt;a href="#!"&gt;'
                              + '&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/a&gt;'
                              + '&lt;/td&gt;'
                              + '&lt;/tr&gt;';
  
                      $("#demo").append(category);
  
                  }
              }
  
          });
      }
  }
  
  $(document).ready(function () {
  
      productList.list();
  
      productList.modal = $("#myForm");
      $("#save_change").click(function () {
          if (productList.mode == "Add") {
              productList.add();
          }
      });
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Qrnfr.png" rel="nofollow noreferrer">ScreenShot for Product Table</a></p>
  
  <p><a href="https://i.stack.imgur.com/YmU12.jpg" rel="nofollow noreferrer">Screenshot for add product name</a></p>