小編給大家分享一下怎么使用vue和datatables進行表格的服務(wù)器端分頁，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站成立與2013年，先為濟陽等服務(wù)建站，濟陽等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為濟陽企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

想法很簡單，用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:  
  ` 
   
    {{user.name}} 
     
       
      {{role.name}} 
       
     
    {{user.createTime}} 
    修改 
    刪除 
   
  `, 
  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函數(shù)中，每次生成表格行不能復(fù)用已有的vue實例，需要先destroy，再重新生成vue實例，否則無法正常顯示第1頁后面的頁。

不知為何，希望懂原理的高手告知。

看完了這篇文章，相信你對“怎么使用vue和datatables進行表格的服務(wù)器端分頁”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！