使用vue和datatables進行表格的伺服器端分頁執行個體代碼，vuedatatables

使用vue和datatables進行表格的伺服器端分頁執行個體代碼，vuedatatables

想法很簡單，用vue產生表格的行，datatables產生分頁資訊，不想過程曲折，特此記錄。

datatables端代碼：

$('#dataTables-example').DataTable({       responsive: true,       "serverSide" : true,        "ajax": function (data, callback, settings) {         postJson(             "/AccessControlSystem/user/selectByPrimary",             {'pageSize':data.length,'pageNo':data.start/data.length+1},             function(result){               callback({'draw':data.draw,'recordsTotal':userCount,'recordsFiltered':userCount,'data':[]});               $("#userList").html("");               getRoleForUser(result.data);               rendorUserList(result.data);                            }           );       }            });

vue端代碼：

//使用者列表 var UserListComponent = Vue.extend({   template:    `<tbody id="userList">   <tr v-for="(user, index) in userList" v-bind:class="index%2==0?'odd':'even'">     <td>{{user.name}}</td>     <td>       <label v-for="role in user.roleList" class="checkbox-inline">       <input type="checkbox" v-bind:value="role.id" disabled v-model="role.checked">{{role.name}}       </label>     </td>     <td>{{user.createTime}}</td>     <td class="center"><button type="button" class="btn btn-primary btn-xs" v-on:click="editUser(user.id)">修改</button></td>     <td class="center"><button type="button" class="btn btn-primary btn-xs" v-on:click="deleteUser(user.id)">刪除</button></td>   </tr>   </tbody>`,   data: function () {     return {'userList':[]};   },   methods: {     editUser:function(id){},     deleteUser:function(id){}   } });   function rendorUserList(userList){   var userListComponent = new UserListComponent();   userListComponent.userList = userList;   userListComponent.$mount('#userList');  } 

重點在rendorUserList函數中，每次產生表格行不能複用已有的vue執行個體，需要先destroy，再重建vue執行個體，否則無法正常顯示第1頁後面的頁。

不知為何，希望懂原理的高手告知。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。