使用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 相关文章推荐
日期 时间js控件
May 07 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
javascript解析json实例详解
Nov 05 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
Angular2入门--架构总览
Mar 29 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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封装好的人民币数值转中文大写类
2015/12/20 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python异常处理例题整理
2019/07/07 Python
kali中python版本的切换方法
2019/07/11 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
零件设计自荐信范文
2013/11/27 职场文书
大学学生会辞职信
2015/05/13 职场文书
单位工作证明范本
2015/06/15 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Django 实现jwt认证的示例
2021/04/30 Python
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python