本篇文章主要介绍了使用vue和datatables进行表格的服务器端分页实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
想法很简单，用vue生成表格的行，datatables生成分页信息，不想过程曲折，特此记录。
datatables端代码：
$('#dataTables-example').DataTable({ responsive: true, "serverSide" : true, "ajax": fun<p style="color:transparent">本文来源gao!%daima.com搞$代*!码网1</p>ction (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> <td>{{user.name}}</td><td> <label class="checkbox-inline"> {{role.name}} </label></td><td>{{user.createTime}}</td><td class="center"><button type="button" class="btn btn-primary btn-xs">修改</button></td><td class="center"><button type="button" class="btn btn-primary btn-xs">删除</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页后面的页。
不知为何，希望懂原理的高手告知。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是使用vue和datatables进行表格的服务器端分页实例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：使用vue和datatables进行表格的服务器端分页实例代码
转载请注明原文链接：使用vue和datatables进行表格的服务器端分页实例代码
