使用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端代码：
//用户列表
varUserListComponent=Vue.extend({
template:
`
{{user.name}}
{{role.name}}
{{user.createTime}}
修改
删除
`,
data:function(){
return{'userList':[]};
},
methods:{
editUser:function(id){},
deleteUser:function(id){}
}
});
functionrendorUserList(userList){
varuserListComponent=newUserListComponent();
userListComponent.userList=userList;
userListComponent.$mount('#userList');
}
重点在rendorUserList函数中，每次生成表格行不能复用已有的vue实例，需要先destroy，再重新生成vue实例，否则无法正常显示第1页后面的页。
不知为何，希望懂原理的高手告知。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。