使用vue和datatables进行表格的服务器端分页
来源:互联网 发布:ro膜纯水量算法 编辑:程序博客网 时间:2024/05/17 19:23
想法很简单,用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"> <tr v-for="(user, index) in userList" v-bind:class="index%2==0?'odd':'even'"> <td>{{user.name}}</td> <td> <label v-for="role in user.roleList" class="checkbox-inline"> <input type="checkbox" v-bind:value="role.id" disabled v-model="role.checked">{{role.name}} </label> </td> <td>{{user.createTime}}</td> <td class="center"><button type="button" class="btn btn-primary btn-xs" v-on:click="editUser(user.id)">修改</button></td> <td class="center"><button type="button" class="btn btn-primary btn-xs" v-on:click="deleteUser(user.id)">删除</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页后面的页。
不知为何,希望懂原理的高手告知。
阅读全文
0 0
- 使用vue和datatables进行表格的服务器端分页
- datatables表格分页和导出的例子
- datatables.js 简单使用--多选框和服务器端分页
- datatables.js 简单使用--多选框和服务器端分页
- datatables服务器端分页查询
- Datatables 服务器端分页
- DataTables服务器端分页
- Bootstrap风格的分页表格Datatables
- DataTables分页表格
- jQuery表格插件DataTables 的服务器端参数解析工具
- 插件介绍: DataTables 表格分页
- DataTables服务器端传入传出(接收与提交)的数据格式 搜索、排序和分页与后台数据的交互
- JFinal+bootstrap开发,使用datatables的分页
- Datatables.Net服务器端分页,客户与服务器端的交互过程数据
- Datatables(1.10以上版本)服务器端分页(Java)
- 基于Vue.js的表格分页组件
- datatables的服务器分页
- [dataTables使用的坑]dataTables和angular的结合
- 快速排序
- mysql高级教程-02
- PHP数据库连接失败--could not find driver 解决办法 .
- 【第三篇】SAP HANA XS的JavaScript安全事项
- 阅读疑惑(java编程思想)
- 使用vue和datatables进行表格的服务器端分页
- MySql中的varchar类型
- 选择器优先顺序
- Could not create the view: An unexpected exception was thrown.问题解决
- Nginx反向代理服务器安装与配置(win)
- Servlet简介
- I/O知识点汇总
- 应用/游戏在三星Galaxy S8及S8+上的适配办法
- Java多线程-1 创建线程