Table jquery reload après ajax appel

Question

Je suis en train de recharger une table au lieu de recharger la page entière

ici est mon code

<link href="assets/css/bootstrap.min.css" rel="stylesheet" > 


    <script src="assets/js/bootstrap.min.js"></script> 
    <input id="check" value="" placeholder="Enter your number here" /> 
    <button type="button" id="go_check" class="btn btn-success" data-loading-text="Loading..." > <i class="icon-ok icon-white"></i> Check</button> 
    <span id="button"></span> 
    <br/> 
    <div id="response"> 

    </div> 
    <script> 
     jQuery(document).ready(function() { 

      jQuery('#go_check').click(function() { 
       jQuery('#go_check').button('loading'); 

       jQuery.ajax({ 
        type: "POST", 
        url: "ajax.php", 
        data: ({ 
         method: "check", 
         number: jQuery('#check').val() 
        }), 
        dataType: "json", 
        success: function(data) { 
         jQuery('#button').html(data.btn); 
         jQuery('#go_check').button('reset'); 
         jQuery('#response').html(data.html); 
        }, 
        failure: function(errMsg) { 
         jQuery('#go_check').button('reset'); 

         alert(errMsg); 
        } 
       }); 
      }); 
     }); 
     function delete_item($id) { 
      jQuery.ajax({ 
       type: "POST", 
       url: "ajax.php", 
       data: ({ 
        method: "delete", 
        number: $id 

       }), 
       dataType: "json", 
       success: function(data) { 
        jQuery('#button').html(''); 
        window.location.reload(); // would like to replace this line with the table refresh 
       }, 
       failure: function(errMsg) { 
        jQuery('#go_check').button('reset'); 

        alert(errMsg); 
       } 
      }); 
     } 
    </script>   



    <link href="assets/css/jquery.dataTables.css" rel="stylesheet" media="screen"> 
    <link href="assets/css/jquery.dataTables_themeroller.css" rel="stylesheet" media="screen"> 



    <script src="assets/js/jquery.dataTables.min.js"></script> 
    <table class="table" id="tad"> 
     <thead> 
     <th> 
      Order Id 
     </th> 
     <th> 
      Ticket Name 
     </th> 
     <th> 
      Ticket Number 
     </th> 
     <th> 
      Product 
     </th> 
     <th> 
      Model 
     </th> 
     <th> 
      Option Name 
     </th> 
     <th> 
      Option 
     </th> 
     <th> 
      Customer 
     </th> 
     <th> 
      Email 
     </th> 
     <th> 
      Telephone 
     </th> 
     <th> 
      Date 
     </th> 
    </thead> 
    <tbody> 
     <?php 
     include "config.php"; 
     $con = mysql_connect(DB_HOSTNAME, DB_USERNAME, DB_PASSWORD); 
     mysql_select_db(DB_DATABASE, $con); 
     $result = mysql_query("select * from order_serial ", $con); 
     while ($row = mysql_fetch_array($result)) { 
      echo "<tr>"; 
      echo "<td>" . $row['order_id']; 
      echo "</td>"; 
      echo "<td>" . $row['serial_name']; 
      echo "</td>"; 
      echo "<td>" . $row['product_serial']; 
      echo "</td>"; 
      echo "<td>" . $row['name']; 
      echo "</td>"; 
      echo "<td>" . $row['model']; 
      echo "</td>"; 
      echo "<td>" . $row['option_name']; 
      echo "</td>"; 
      echo "<td>" . $row['option_value']; 
      echo "</td>"; 
      echo "<td>" . $row['firstname'] . " " . $row['lastname']; 
      echo "</td>"; 
      echo "<td>" . $row['email']; 
      echo "</td>"; 
      echo "<td>" . $row['telephone']; 
      echo "</td>"; 
      echo "<td>" . $row['date']; 
      echo "</td>"; 
      echo "</tr>"; 
     } 
     ?> 
    </tbody> 
</table> 
<script> 
    jQuery(document).ready(function() { 
     $('#tad').dataTable({ 
      "sDom": 'R<"H"lfr>t<"F"ip>', 
      "bJQueryUI": true, 
      "sPaginationType": "full_numbers" 
     }); 

    }); 
</script> 

    </tbody> 
    </table> 

J'ai cherché la réponse et cant semblent trouver un il semble un peu idiot de recharger toute la page au lieu de simplement la table?

Answer 1

Ici, nous pouvons séparer le chargement de la table comme une méthode séparée et l'appeler à la fois sur le bouton go_check et après la suppression réussie de l'élément.

jQuery(document).ready(function() { 

    function loadTable(){ 
     jQuery('#go_check').button('loading'); 

     jQuery.ajax({ 
      type: "POST", 
      url: "ajax.php", 
      data: ({ 
       method: "check", 
       number: jQuery('#check').val() 
      }), 
      dataType: "json", 
      success: function(data) { 
       jQuery('#button').html(data.btn); 
       jQuery('#go_check').button('reset'); 
       jQuery('#response').html(data.html); 
      }, 
      failure: function(errMsg) { 
       jQuery('#go_check').button('reset'); 

       alert(errMsg); 
      } 
     }); 
    } 

    jQuery('#go_check').click(loadTable); 
}); 
function delete_item($id) { 
    jQuery.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: ({ 
      method: "delete", 
      number: $id 

     }), 
     dataType: "json", 
     success: function(data) { 
      jQuery('#button').html(''); 
      loadTable(); 
     }, 
     failure: function(errMsg) { 
      jQuery('#go_check').button('reset'); 

      alert(errMsg); 
     } 
    }); 
} 

Answer 2

Utilisez le sAjaxSource de datatables plutôt que séparés appel ajax à ajax.php

"sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"