使用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 相关文章推荐
初识SmartJS - AOP三剑客
Jun 08 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
详解JavaScript匿名函数和闭包
Jul 10 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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学习之PHP运算符
2006/10/09 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP strripos函数用法总结
2019/02/11 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
javascript新手语法小结
2008/06/15 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
vue下拉列表功能实例代码
2018/04/08 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
vue实现数字滚动效果
2020/06/29 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
Python查找相似单词的方法
2015/03/05 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
python交互模式基础知识点学习
2020/06/18 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
授权委托书
2015/01/28 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python