添加删除数据并显示结果,而无需使用jquery刷新

时间:2014-10-02 04:28:34

标签: jquery codeigniter

大家好日子!

我遇到了如何通过单击来自2个表中的查询的链接从数据库添加或删除数据的问题。

这是我对查询的看法。无论如何,我使用LEFT JOIN进行查询

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th style="width:3%;">#</th> 
      <th style="width:5%;">Code</th> <!-- from table 1 -->
      <th style="width:30%;">Name</th> <!-- from table 1 -->
      <th style="width:8%;">Price</th> <!-- from table 2 -->
      <th style="width:8%;">Paid</th> <!-- from table 2 -->
      <th style="width:15%;">Date Added</th> <!-- from table 2 -->
      <th style="width:10%"></th> <!-- show (+)add if t1.code != t2.code else show (x)remove -->
    </tr>
  </thead>
  <tbody>
  <?php
  $i=0;
  foreach ($members->result() as $d) {
    $i++;
  ?>
    <tr>
      <td><?php echo $i; ?></td>
      <td><?php echo $d->indicode; ?></td>
      <td><?php echo $d->title.'. '.$d->lastname.', '.$d->firstname ; ?></td>
      <td><?php 
      if($d->amount==''){}else{echo $d->amount;}
      ?></td>
      <td><?php echo $d->paid; ?></td>
      <td><?php echo $d->date_active; ?></td>
      <td><?php if($d->paid=='unpaid'){?><a href="<?php echo base_url().'participation/remove_byadmin/'.$d->indicode; ?>" class="text-danger"><i class="fa fa-times"></i> Remove</a><?php } 
      if($d->date_active==''){?>
        <a href="<?php echo base_url().'participation/add_byadmin/'.$d->indicode; ?>" class="text-primary"><i class="fa fa-plus"></i> Add</a>
      <?php }
      ?></td>
    </tr>
  <?php
    if($d->paid == 'unpaid'){
      $sum += $d->amount;
    }
  }
  ?>
  </tbody>
</table>

如果你在最后一栏注意到我有一个特定的链接它们在哪里会显示(x)删除如果table1中的代码在table2上具有相同的代码,那么它将显示(+)add。

我想要发生的是,当我点击添加按钮时,来自table1的一些数据+将在我的控制器中定义的其他数据将添加到table2中,如果我单击删除按钮或链接,数据将被删除来自table2。点击这些按钮后,我需要页面自动显示数据/结果而不刷新页面。

我希望有人可以帮助我摆脱这种混乱局面。提前谢谢。

1 个答案:

答案 0 :(得分:0)

我认为您应该阅读以下内容:

1)使用ajax发布并加载数据。

2)更改HTML节点的内容。删除HTML节点并添加新的HTML节点。

示例:

  • 如果您使用上述代码中的两个按钮:

    <button onclick="removeData(<?php echo indicode;?>)">Remove </button>
    <button onclick="addNew(<?php echo indicode;?>)"> Add </button >
    
  • 你需要像这样识别你的表,tbody和tr:

    <table id="yourTable">
       <tbody id="yourTbody">   
           <tr id="indicode">
           </tr>
       </tbody>
    </table>
    
  • 使用ajax或post发布数据到服务器时。

    function removeData(id)
    {
        $.post("participation/remove_byadmin/"+id,{},function(data){ 
          //Here you can remove the tr corresponding indicode.
          //Or if your data is a fresh new table, you can change content of the table
          //by using data ($("#yourtable").html(data); - Just an example).
        }
    }
    
    function addNew(id)
    {
        $.post("participation/add_byadmin/"+id,{},function(data){ 
          //You have to find out what should do here
        }
    }
    
  • 在服务器上,您可以编写如下代码:

    //This is just an example. You can read and understand.
    class Participation extends CI_Controller
    {
       function remove_byadmin(id)
       {
          $this->yourModel->deletebyID(id);
          echo $this->yourModel->getNewHTMLTable();
          //Or echo something that will return to browser and you can use it to modify your table
       }
    
       function add_byadmin(id)
       {
          //do something
          echo $this->yourModel->getNewHTMLTable(); 
          //Or echo something that will return to browser and you can use it to modify your table
       }
    }
    

    抱歉我的英文。