数据表TypeError: C未定义

Question

我有一个数据表，我添加了两个日期字段和一个按钮搜索，它给我一个错误: TypeError: C是未定义的。嗨，我有一个数据表，我添加了两个日期字段和一个按钮搜索，它给我一个错误: TypeError: C是未定义的。嗨，我有一个数据表，我添加了两个日期字段和一个按钮搜索，它给我一个错误: TypeError: C是未定义的。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
<meta charset="UTF-8" />
<div class="form-group col-md-4 offset-4">
    <label>start date</label>
    <input type="date" id="datePicker" class="form-control date-range">
        <label>end date</label>
        <input type="date" id="datePicker1" class="form-control date-range">
</div>
        <div class="form-group offset-5">
            <button class="btn btn-success " id="hide">search</button>
        </div>
        <table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>date of birth</th>
                    <th>name</th>
                    <th>email</th>
                    <th> adress</th>
                    <th>salary</th>
                </tr>
            </thead>
            <tbody>
               @foreach($pointages as $pointage)
                  <tr>
                    <td>{{ $pointage->datep }}</td>
                    <td>{{ $pointage->chantier }}</td>
                    <td>{{ $pointage->ouvrage }}</td>
                    <td>{{ $pointage->nbrj }}</td>
                    <td>{{ $pointage->solde }}</td>
                    <td></td>
                  </tr>
                @endforeach
            </tbody>
        </table>
<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="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js" integrity="sha256-H9jAz//QLkDOy/nzE9G4aYijQtkLt9FvGmdUTwBk6gs=" crossorigin="anonymous"></script>

jQuery代码

table = $('#example').DataTable({
  paging: false,
  info: false
});

// Extend dataTables search
$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var min = $('#datePicker').val();
    var max = $('#datePicker1').val();
    var birthday = data[0] || 0; // Our date column in the table

    if (
      (min == "" || max == "") ||
      (moment(birthday).isSameOrAfter(min) && moment(birthday).isSameOrBefore(max))
    ) {
      return true;
    }
    return false;
  }
);
// Re-draw the table when the a date range filter changes
$('#hide').click(function(){
table.draw();
})
// Re-draw the table when the a date range filter changes
$('.date-range').change(function() {
  //table.draw();
});

Answer 1

删除多余的<td></td>您正在使用的datatables库需要标头和tds的数量才能匹配。您有5个<th>和6个<td>

Answer 2

格式是您必须将thead和tbody包括在内

 <table> 
      <thead>
           <tr>
              <th>sn</th>
              <th>name</th>
              <th>address</th>
           </tr>
      </thead>
      <tbody>
           <tr>
              <th>1</th>
              <th>Avi chhetri</th>
              <th>Nepal</th>
           </tr>
      </tbody> 
 </table>