想法很简单,用vue生成表格的行,datatables生成分页信息,不想过程曲折,特此记录。
datatables端代码:
rush:js;">
$('#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端代码:
rush:js;">
//用户列表
var UserListComponent = Vue.extend({
template:
`Box-inline">
Box" v-bind:value="role.id" disabled v-model="role.checked">{{role.name}}
修改删除`,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页后面的页。
不知为何,希望懂原理的高手告知。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
相关文章
可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...