欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-21 15:03:26
想法很简单,用vue生成表格的行,datatables生成分页信息,不想过程曲折,特此记录。 datatables端代码: $('#datatables-e...

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

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

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