Pagination des tables Javascript vue.js, chargement asynchrone des données ajax

La pagination est généralement utilisée avec des tableaux. Le lien de pagination est utilisé dans le cadre du tableau. Il est plus raisonnable d'encapsuler le lien de pagination dans un composant indépendant, puis de l'intégrer dans le composant de table en tant que sous-composant.

Effet :

Code :

1. Enregistrez un composant

js

Vue.component('pagination',{
    template:'#paginationTpl',
    replace:true,
    props:['cur','all','pageNum'],
    methods:{
      //页码点击事件
      btnClick: function(index){
        if(index != this.cur){
          this.cur = index;
        }
      }
    },
    watch:{
      "cur" : function(val,oldVal) {
        this.$dispatch('page-to', val);
      }
    },
    computed:{
      indexes : function(){
        var list = [];
        //计算左右页码
        var mid = parseInt(this.pageNum / 2);//中间值
        var left = Math.max(this.cur - mid,1);
        var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum);
        if (right > this.all ) { right = this.all}
        while (left <= right){
          list.push(left);
          left ++;
        }
        return list;
      },
      showLast: function(){
        return this.cur != this.all;
      },
      showFirst: function(){
        return this.cur != 1;
      }
    }
  });

Modèle :

<script type="text/template" id="paginationTpl">
  <nav v-if="all > 1">
    <ul class="pagination">
      <li v-if="showFirst"><a href="javascript:" @click="cur--">«</a></li>
      <li v-for="index in indexes" :class="{ &#39;active&#39;: cur == index}">
        <a @click="btnClick(index)" href="javascript:">{{ index }}</a>
      </li>
      <li v-if="showLast"><a @click="cur++" href="javascript:">»</a></li>
      <li><a>共<i>{{all}}</i>页</a></li>
    </ul>
  </nav>
</script>

HTML :

<div id=&#39;item_list&#39;>
  ...
  <pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination>
</div>

Lorsque l'on clique sur un lien de pagination, l'événement de page vers est distribué via watch cur et le sous-composant, via @page La balise -to="loadList" spécifie l'utilisation de la méthode loadList du composant parent pour gérer l'événement. Le composant parent reçoit la valeur de la page puis charge les données avec ajax. Il calcule et met à jour sa propre valeur pageAll en fonction du retour du serveur. car le accessoire du composant enfant est lié dynamiquement via : all="pageAll" L'objet pageAll du composant parent, de sorte que les composants enfants seront mis à jour conjointement.

Ci-joint un exemple simple de composant de tableau :

var vm = new Vue({
    el: "#item_list",
    data: {
      items : [],
      //分页参数
      pageAll:0, //总页数,根据服务端返回total值计算
      perPage:10 //每页数量
    },
    methods: {
      loadList:function(page){
        var that = this;
        $.ajax({
          url : "/getList",
          type:"post",
          data:{"page":page,"perPage":this.perPage},
          dataType:"json",
          error:function(){alert('请求列表失败')},
          success:function(res){
            if (res.status == 1) {
              that.items = res.data.list;
              that.perPage = res.data.perPage;
              that.pageAll = Math.ceil(res.data.total / that.perPage);//计算总页数
            }
          }
        });
      },
      //初始化
      init:function(){
        this.loadList(1);
      }
    }
  });
  vm.init();

Merci d'avoir lu, j'espère que cela pourra aider tout le monde, merci pour votre soutien à ce site !

Pour plus d'articles sur la pagination des tables Javascript vue.js et le chargement de données asynchrones ajax, veuillez faire attention au site Web PHP chinois !