Error datatable

by jellycoffee

HTML

<table id="table-show" class="table table-bordered  display nowrap" cellspacing="0" width="100%">
                <thead>
                  <tr id = "id">
                    <td>No</td>
                    <td>Id</td>
                    <td>Nama</td>
                    <td>Phone</td>
                    <td>Email</td>
                    <td>Jenis Kelamin</td>
                    <td>Organization</td>
                    <td>Action</td>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>No</th>
                    <th>Id</th>
                    <th>Nama</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Jenis Kelamin</th>
                    <th>Organization</th>
                    <th>Action</th>
                  </tr>
                </tfoot>

              </table>

JavaScript

<script>
  
    $(document).ready(function ()
          {
            $('#table-show tfoot th').each( function () {
                var title = $(this).text();
                if (title != 'Action') {
              $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
          }

    } );

              var table = $('#table-show').DataTable({
                  "scrollX": true,
                  "processing": true,
                  "serverSide": true,
                  "ajax":  "person_search.php",
                  "dataSrc": "",
                  order: [[2, 'asc']],
                  columnDefs: [{
                      orderable: false,
                      searchable: false,
                      targets: -1,
                      render: function(data, type, row){
                        var btn = '<a href="person_form.php?id='+row[0]+'&action=edit" class="mr-3"><i class="fas fa-edit"></i></a><a href="person_form.php?id='+row[0]+'&action=delete"><i class="fas fa-trash"></i></a>';
                        return btn;
                      }
                   }],
                   "order": [[ 1, 'asc' ]]
              });

              table.on( 'draw.dt', function () {
                var PageInfo = $('#table-show').DataTable().page.info();
                table.column(0, { page: 'current' }).nodes().each( function (cell, i) {
                  cell.innerHTML = i + 1 + PageInfo.start;
                } );
              } );
              table.columns().every(function () {
                  var table = this;
                  $('input', this.footer()).on('keyup change', function () {
                      if (table.search() !== this.value) {
                           table.search(this.value).draw();
                      }
                  });
              });
          });

    </script>