使用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 JSON操作入门实例
Apr 16 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
加速vue组件渲染之性能优化
Apr 09 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脚本的10个技巧(1)
2006/10/09 PHP
php上传文件的增强函数
2010/07/21 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
python3转换code128条形码的方法
2019/04/17 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
python基于event实现线程间通信控制
2020/01/13 Python
Python能做什么
2020/06/02 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
pandas按条件筛选数据的实现
2021/02/20 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
行政专员的岗位职责
2014/03/10 职场文书
个人承诺书
2014/03/26 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
导游词之西安大清真寺
2019/12/17 职场文书