如何在我的html可编辑表格中添加过滤器功能？以及列排序功能？

Question

我正在一个项目上，我正在制作一个程序，该程序能够对sql数据库中的用户输入数据进行排序，更新和编辑。我正在使用一个显示SQL数据库中数据的表。现在我的html表存在问题。我从git hub获得了一些代码，它使我的表能够过滤每个单独的列并进行搜索。我想在此表中添加编辑功能，我的意思是能够编辑每一行中的每个单元格，但是我不知道该怎么做。如果有人可以以任何方式给我提示，那就太好了。我也希望保留过滤和搜索功能。

<?php
  ob_start();
     session_start();
//now I can access $_SESSION[] vars.
if(!isset($_SESSION['admin'])){
  echo "Illegal access!";
  exit(0); //immediate stop access
}
else{
require_once("../sqlSts.php");
$user=$_SESSION['user'];

$conn=connectDB();
$query="SELECT * FROM admin WHERE user=\"$user\""; 
$result=$conn->query($query);

$fetchRow=mysqli_fetch_assoc($result);


if(isset($_GET['msg']))
     { 
      $msg=$_GET['msg'];
      echo<<<EOT
    <div class="alert alert-primary" "alert" role="alert">
$msg
</div>
EOT;
}


}


ob_end_flush();

?>
<style type="text/css">
    .alert {
  position: absolute;
  top: 10px; // Should be same as the height of the header
  width: 100%;
  background-color: white;

}
 tfoot {
        display: table-header-group;
    }
tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }
    .header {
  padding: 20px;
  height: 100px;
  text-align: center;
background-color: hsla(14, 100%, 53%, 0.6);
}
.table {
 height: 100px;
background-color: white;
}
.center {
  margin-top:0;
 margin-right:auto;
margin-bottom:0;
margin-left:auto;
  padding: 20px;
  height: 550px;
  text-align: center;
background-color: rgba(50, 115, 220, 0.3);
position: absolute;
}
    .footer {
  bottom: 0;
  padding:20px;
  height: 200px;
  text-align: center;
background-color: hsla(14, 100%, 53%, 0.6);

}

</style>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="../testerJs.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<?php

echo'    


        <table  id="example" class="table table-hover" style="width:100%">
  <thead>
  <tr>
    <th>Student id</th>
    <th>First name</th>
    <th>Last name</th>
    <th>Grade lvl</th>
    <th>College name</th>
    <th>Semester</th>
    <th>Subject</th>
    <th>Course id</th>
    <th>Hs course code</th>
    <th>Course start date</th>
    <th>Credit hour</th>
    <th>Articulate credit</th>
    <th>Duel Credit</th>
    <th>Setting</th>
    <th>Numeric Grade</th>
    <th>Max numeric grade</th>
    <th>Course end date</th>
    <th>Letter grade</th>

  </tr>
  </thead>';


$conn=connectDB();
$query="SELECT classes_taken.stud_id,student.first_name,student.last_name,student.curr_grdlvl,colleges.univ_name,classes_taken.semester,classes.subject,classes.course_id,classes.hs_course_code,
classes_taken.course_start_date,classes_taken.credit_hour,classes_taken.art_credit,classes_taken.duel_credit,classes_taken.setting,classes_taken.numeric_grade,classes_taken.max_numeric_grade
,classes_taken.cour_end_date, classes_taken.letter_grade
FROM classes_taken
JOIN student ON classes_taken.stud_id=student.stud_id
JOIN colleges ON classes_taken.coll_id=colleges.coll_id
JOIN classes ON classes_taken.class_id=classes.id;
"; 
$result=$conn->query($query);

$fetchRow=mysqli_fetch_assoc($result);

if($result = $conn->query($query)) {
    echo'<tbody>';
    while ($row = $result->fetch_assoc()) {
        $field1name = $row["stud_id"];
        $field2name = $row["first_name"]; 
        $field3name = $row["last_name"];
        $field4name = $row["curr_grdlvl"];
        $field5name = $row["univ_name"];
        $field6name = $row["semester"];
        $field7name = $row["subject"];
        $field8name = $row["course_id"];
        $field9name = $row["hs_course_code"];
        $field10name = $row["course_start_date"];
        $field11name = $row["credit_hour"];
        $field12name = $row["art_credit"];
        $field13name = $row["duel_credit"];
        $field14name = $row["setting"];
        $field15name = $row["numeric_grade"];
        $field16name = $row["max_numeric_grade"];
        $field17name = $row["cour_end_date"];
        $field18name = $row["letter_grade"];

        echo '<tr> 
                  <td>'.$field1name.'</td> 
                  <td>'.$field2name.'</td> 
                  <td>'.$field3name.'</td> 
                  <td>'.$field4name.'</td> 
                  <td>'.$field5name.'</td> 
                  <td>'.$field6name.'</td> 
                  <td>'.$field7name.'</td>
                  <td>'.$field8name.'</td>
                  <td>'.$field9name.'</td>
                  <td>'.$field10name.'</td>
                  <td>'.$field11name.'</td>
                  <td>'.$field12name.'</td>
                  <td>'.$field13name.'</td>
                  <td>'.$field14name.'</td>
                  <td>'.$field15name.'</td>
                  <td>'.$field16name.'</td>
                  <td>'.$field17name.'</td>
                  <td>'.$field18name.'</td>
              </tr>';
    }
    $result->free();
        echo'</tbody>';
        echo'
        <tfoot>
            <tr>
            <th>Student id</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Grade</th>
            <th>College</th>
            <th>Semester</th>
            <th>Subject</th>
            <th>Course id</th>
            <th>Hs_c_code</th>
            <th>start date</th>
            <th>Credit Hour</th>
            <th>Art. credit</th>
            <th>Duel Credit</th>
            <th>Setting</th>
            <th>Num Grade</th>
            <th>Max num grade</th>
            <th>end date</th>
            <th>Let. grade</th>
            </tr>
        </tfoot>
        </table>';

} 

?>

这是我的tester.js代码

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder=" '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

我能够使每一行都可编辑，但是当我这样做时，它禁用了过滤功能，并且表格上方的搜索栏消失了。 请帮助