小编给大家分享一下怎么使用vue和datatables进行表格的服务器端分页，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联建站成立与2013年，先为济阳等服务建站，济阳等地企业，进行企业商务咨询服务。为济阳企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
想法很简单，用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:
`
{{user.name}}
{{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页后面的页。
不知为何，希望懂原理的高手告知。
看完了这篇文章，相信你对“怎么使用vue和datatables进行表格的服务器端分页”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
