添加刪除數據，並顯示結果，而不刷新使用jquery

Question

大家好！

我有問題如何添加或刪除數據庫中的數據，只需點擊來自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）中刪除，如果從表1的代碼具有對錶2的相同代碼，另外它會顯示（+）添加。

我想要發生的是，當我點擊添加按鈕時，來自table1的一些數據將在我的控制器中定義的其他數據將被添加到table2，如果我點擊刪除按鈕或鏈接數據將是從table2中刪除。點擊這些按鈕後，我需要該頁面自動顯示數據/結果而不刷新頁面。

我希望有人能幫助我擺脫這種混亂。先謝謝你。

Answer 1

我認爲你應該讀一些下面的事情：

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或發佈數據到服務器。

   
  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 
      } 
  } 
  

  對不起我的英語。