javascript - 分页器表在 Jquery ajax 查询后不分页

Question

我正在使用 Twitter Bootstrap 并且我有一个带有 paginator 的响应表.在加载页面中，分页有效，但在更新正文表中的行和数据的 Jquery Ajax 事件之后，表不分页。

表格:

<table id="tblFaltas" class="table table-striped table-bordered">
    <thead id="theadFaltas">
        <tr class="header">
            <th rowspan="2">
                Name
            </th>
        </tr>
        <tr id="lnDia">
            <th>
            </th>                           
        </tr>
        </thead>
        <tbody id="tBodyFaltas">
            <tr>
                <td>
                     <center>
                      No data
                     </center>
               </td>
               <td>
                    <center>
                    No data
                    </center>
              </td>
          </tr>
      </tbody>
</table>

还有一个调用 Jquery ajax 函数的选择按钮。

带有事件 onChange 的按钮:

<select class="form-control" id="day" onChange="selectDay()">
    <option>         
    </option>
</select>

函数selectDay():

function selectDay() {

   $.ajax({
      type: 'POST',
      data: JSON.stringify(data),
      cache: false,
      contentType: 'application/json',
      datatype: "json",
      url: '/home/getdays',
      success: function (returns) {
      $('#tBodyFaltas').empty();
          $('#tBodyFaltas').append($tr); // UPDATE THE BODY TABLE HERE
      }
   });
   $('#tblFaltas').dataTable(); // Call the dataTable pagintator
};

---

我的疑问是:$('#tblFaltas').dataTable(); 以这种方式工作？

Answer 1

您必须在插入新项目后完全重新初始化数据表:

function selectDay() {
  $.ajax({
     type: 'POST',
     data: JSON.stringify(data),
     cache: false,
     contentType: 'application/json',
     datatype: "json",
     url: '/home/getdays',
     success: function (returns) {
        $('#tBodyFaltas').empty();
        $('#tBodyFaltas').append($tr); // UPDATE THE BODY TABLE HERE
        $('#tblFaltas').dataTable({
           destroy : true
        });
      }
   });
}

destroy选项让您重新初始化现有的 dataTable 实例(如果有)而不会发生冲突。