Question

我正在使用Jquery Datatables。我得到的f没有定义控制台错误。我没有在Datatables中使用ajax请求。

以下是我的表：

<table id="myTable"  class="table table-striped table-bordered dataTable"  >

    <thead>
      <tr>
         <th>Trip ID</th>
         <th>User Name</th>
         <th>From</th> 
         <th>To</th>
     </tr>
    </thead>
    <tbody>
     <tr><td>123231</td></tr>
     <tr><td>John</td></tr>
     <tr><td>dfshggsf</td></tr>
     <tr><td>dsfgfsgfsg</td></tr> 
   </tbody>
    <tfoot>
         <tr>
          <th>Trip ID</th>
          <th>User Name</th>
          <th>From</th> 
          <th>To</th>       
         </tr>
    </tfoot> 
        </table>    
</table>

以下是Jquery代码：

$(document).ready(function(){
      $('#myTable').DataTable({

          'ordering':false,
            dom: 'Bfrtip',

            buttons:[
                 {
                     extend: 'excelHtml5',
                     title: 'Data export'
                 },
                 {
                     extend: 'pdfHtml5',
                     title: 'Data export'
                 },
                  {
                     extend: 'csvHtml5',
                     title: 'Data export'
                 },
                  {
                     extend: 'print',
                     title: 'Data export'
                 } 
           ]
        });
    });

以下是控制台错误：

请帮我解决这个问题...任何帮助将不胜感激。

Answer 1

tbody部分中的表结构不正确。

更正的表格结构如下所示。

<tbody>
   <tr>
      <td>123231</td>
      <td>John</td>
      <td>dfshggsf</td>
      <td>dsfgfsgfsg</td>
   </tr> 
</tbody>

请参阅this example以获取代码和演示。

Answer 2

是 - 这就是DataTables告诉你表结构不匹配的原因。最可能的解决方案是确保您的<th>行符合您的<td>行。

我昨晚遇到这个问题时，我发现last_name不是DataTables搜索框的一部分。 DataTables搜索列定义中提供的字段名称，而不是最终呈现的字段名称。所以我将last_name列添加为visible：false认为它不需要标题。看到相同的样式错误消息，不得不返回并添加到标题行=问题解决的最后。

var columns = [

  { data: "first_name",
    render: function(data, type, row) {
      return row.first_name + " " + row.last_name;
    }
  },
  { data: "last_name",
    visible: false
  },
...
]

Jquery Datatable：f未在jquery.dataTables.min.js中定义

2 个答案: