如何在不刷新整个页面的情况下使表更新内容

Question

我使用php ajax创建了一个项目，我将它用于输入数据并将数据显示到表中。代码工作正常，但在显示数据时，表内容没有更新最新的输入，我需要刷新页面来更新它们。

任何人都知道如何在不刷新整个页面的情况下进行更新？ 这是我输入和显示的ajax函数

INPUT

$(document).on('click','#ok',function(e) {

      if ($('#netto').val() == '') {
                     alert('Kolom Netto Tolong Di Isi');
                 } else {
        var data = $("#form_input").serialize();  
        $.ajax({
        data: data,
        type: "post",
        url: "../php/bkk/bkk_i.php",
        success: function(data){
        alert("Data: " + data);
        }
    });
                     }
    clearInput();
});
$("#form_input").submit( function() {
  return false;
});
function clearInput() {
    $("#form_input :input").each( function() {
       $('#nopol').val('');
       $('#netto').val('');

    });


}

显示

$(document).ready(function(){
        $.ajax({
            type: "Post",
            url: "../php/bkk/bkk_isel.php",
            success: function(data){
  var list = JSON.parse(data);
  for(var i = 0; i < list.length; i++){
    $('#mat').val((list[i]['material']));
    $('#lok').val((list[i]['lokasi']));
    $('#kpl').val((list[i]['kapal']));
    $('#po_numb').val((list[i]['po']));
    $('#dok').val((list[i]['doc_mat']));
    var tr = "<tr>";
    tr += "<td>"+list[i]['no']+"</td>";
    tr += "<td>"+list[i]['tanggal']+"</td>";
    tr += "<td>"+list[i]['no_pol']+"</td>";
    tr += "<td>"+list[i]['netto']+"</td>";

    tr += "</tr>";

    $("#table_s tbody").append(tr);
  }
  return false;
}
});
});