使用vue和datatables进行表格的服务器端分页实例代码

使用vue和datatables进行表格的服务器端分页实例代码

想法很简单，用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">

{{role.name}}

{{user.createTime}}

`,

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页后面的页。

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。