如何使用jquery，ajax和codeigniter将动态数据添加到表中

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

我的问题:我点击“添加”按钮并打开boostrap弹出模型并将数据插入弹出模型,并使用jquery ajax和codeigniter将此数据显示到我的表中

**Controller Name: Product**

Controller Code Below:

<?php

class Product extends CI_Controller {

    function __construct() {
        parent::__construct();

        $this->load->helper('form');
        $this->load->helper('url');
        $this->load->helper('html');
        $this->load->model('product_model');
        $this->load->library('form_validation');
    }

    public function test() {
        $this->load->view('productlist');
    }

    public function add() {
        $this->form_validation->set_rules('product_name', 'Product Name', 'required');
        $this->form_validation->set_rules('product_category', 'Product Category', 'required');

        if ($this->form_validation->run() == FALSE) {
            echo validation_errors('<li>', '</li>');
        } else {
            $this->product_model->add($_POST);
        }
    }

    public function displaylist() {
        $result = $this->product_model->displaylist();
        echo json_encode($result);
    }

}

?>

Below is the view layer

下面是视图层

View: ProductList.php

 <form id="myForm" method="post" action="<?php echo site_url(); ?>/Product/add">

     <div id="myModal" class="modal fade" aria-labelledby="exampleModalLabel">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     <h4 class="modal-title" id="exampleModalLabel">New Product</h4>

                 </div>

                 <div class="modal-body">
                     <div id="message" class="text-danger"></div>
                         <label>Product Category:</label>
                         <select class="form-control" id="product_category" name="product_category" id="product_category" value="<?php echo set_value('product_category'); ?>">
                         <option selected="selected" value="Mobile">Mobile</option>
                         <option value="Computer">Computer</option>
                                                            <option value="Cloths">Cloths</option>
                         </select>

                         <label>Product Name:</label>
                         <input type="text" class="form-control" name="product_name" id="product_name" value="<?php echo set_value('product_name'); ?>" required="">
                     </div>
                     <div class="modal-footer">
                         <button type="button" name="submit" id="save_change" class="btn btn-primary" value="">Add Product</button>
                         <button type="button" name="cancel" id="cancel" class="btn btn-default" value="">Cancel</button>
                     </div>
                 </div>
             </div>
        </div>
  </form>


<div class="table-responsive">
     <table class="table table-bordered">

          <thead>
              <tr>
                  <th><input type="checkbox" id="master"></th>
                  <th>Product Category</th>
                  <th>Product Name</th>
                  <th>Edit</th>
                  <th>Delete</th>
              </tr>
          </thead>
          <tbody id="demo">

          </tbody>

          <tfoot>
              <tr>
                  <td>
                      <button type="button" class="btn btn-danger" id="delete_data"><span class="glyphicon glyphicon-remove"></span></button>
                  </td>
              </tr>
          </tfoot>

      </table>
 </div>

Javascript file Name:practice.js

Javascript文件名:practice.js

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 < obj.length; i++) {
                    out += obj[i].product_name;
//                    console.log(obj[i].product_name);
                    var category = '<tr>'
                            + '<td> <input type="checkbox" class="sub_chk"> </td>'
                            + '<td>' + obj[i].product_category + '</td>'
                            + '<td>' + obj[i].product_name + '</td>'
                            + '<td>'
                            + '<a href="#!" data-toggle="modal" data-target="#myModal">'
                            + '<span class="glyphicon glyphicon-pencil"></span></a>'
                            + '</td>'
                            + '<td>'
                            + '<a href="#!">'
                            + '<span class="glyphicon glyphicon-trash"></span></a>'
                            + '</td>'
                            + '</tr>';

                    $("#demo").append(category);

                }
            }

        });
    }
}

$(document).ready(function () {

    productList.list();

    productList.modal = $("#myForm");
    $("#save_change").click(function () {
        if (productList.mode == "Add") {
            productList.add();
        }
    });
});

ScreenShot for Product Table

Screenshot for add product name

添加产品名称的屏幕截图

1 个解决方案

#1

Give id to your table myTable then try .after

给你的表myTable提供id然后尝试.after

Try following simple code.

尝试遵循简单的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>


<table id="myTable">
<tbody>
    <tr>
        <td>1</td>
        <td>Paresh</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Gami</td>
    </tr>
</tbody>
</table>

<button onclick="add()">Add new</button>

</body>
</html>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script type="text/javascript">

    var index = 3;
    function add()
    {
        $('#myTable tr:last').after('<tr><td>'+(index++)+'</td><td>Paresh Gami</td></tr>'); 
    }

</script>

#1