Question

我正在使用Twitter Bootstrap，我有一个带paginator的响应表。在加载页面上，分页工作，但在Jquery Ajax事件之后，更新了body表中的行和数据，表不是分页。

表格

<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函数的select按钮。

事件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

插入新项目后，您必须完全重新初始化dataTable：

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实例（如果有）而不会发生冲突。

在Jquery ajax查询之后，Paginator表没有分页

1 个答案: