使用vue和datatables进行表格的服务器端分页实例代码


Posted in Javascript onJune 07, 2017

想法很简单,用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页后面的页。

不知为何,希望懂原理的高手告知。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态生成私有变量访问器
Dec 06 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
Vue实现简易计算器
Feb 25 Javascript
Angular 4 指令快速入门教程
Jun 07 #Javascript
jstree单选功能的实现方法
Jun 07 #Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 #jQuery
webpack打包单页面如何引用的js
Jun 07 #Javascript
vue使用Axios做ajax请求详解
Jun 07 #Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 #Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 #Javascript
You might like
php下实现农历日历的代码
2007/03/07 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
javascript实现的右下角弹窗实例
2015/04/24 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
js中的闭包学习心得
2018/02/06 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
python相似模块用例
2016/03/04 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
2015年入党积极分子评语
2015/03/26 职场文书
网络营销实训总结
2015/08/03 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
Python Django模型详解
2021/10/05 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android