php - jquery table reload after ajax call -

i trying reload table instead of reloading whole page

here code

    <link href="assets/css/bootstrap.min.css" rel="stylesheet" >       <script src="assets/js/bootstrap.min.js"></script>     <input id="check" value="" placeholder="enter 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();  // replace line 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 * 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> 

i have searched answer , cant seem find 1 seems bit silly reload whole page instead of table ?

here can separate table loading separate method , call on both go_check button click , after successful deletion of item.

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