使用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 confirm选择判断
Oct 18 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
详解Vue中CSS样式穿透问题
Sep 12 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
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
PHP经典面试题集锦
2015/03/19 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python装饰器基础详解
2016/03/09 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
Android面试题及答案
2015/09/04 面试题
车间调度岗位职责
2013/11/30 职场文书
毕业自荐信
2013/12/16 职场文书
《分一分》教学反思
2014/04/13 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
委托书英文
2015/01/28 职场文书
狮子林导游词
2015/02/03 职场文书
同意落户证明
2015/06/19 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
深入理解redis中multi与pipeline
2021/06/02 Redis
python编程项目中线上问题排查与解决
2021/11/01 Python
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js