Heim > Web-Frontend > js-Tutorial > Hauptteil

Javascript vue.js Tabellenpaginierung, asynchrones Ajax-Laden von Daten

高洛峰
Freigeben: 2017-01-12 13:44:29
Original
1302 Leute haben es durchsucht

Paging wird im Allgemeinen zusammen mit Tabellen verwendet. Es ist sinnvoller, den Paging-Link in eine unabhängige Komponente zu kapseln und ihn dann als Unterkomponente in die Tabellenkomponente einzubetten.

Wirkung:

Javascript vue.js表格分页,ajax异步加载数据

Code:

1. Registrieren Sie eine Komponente

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;
      }
    }
  });
Nach dem Login kopieren

Vorlage:

<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>
Nach dem Login kopieren

HTML:

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

Wenn auf einen Paging-Link geklickt wird, wird das Page-to-Ereignis über watch cur und die Unterkomponente über @page verteilt -to="loadList"-Tag gibt die Verwendung der LoadList-Methode der übergeordneten Komponente an, um das Ereignis zu verarbeiten. Die übergeordnete Komponente empfängt den Seitenwert und lädt dann die Daten mit Ajax. Sie berechnet und aktualisiert ihren eigenen pageAll-Wert basierend auf der Serverrückgabe. weil die Requisite der untergeordneten Komponente dynamisch gebunden ist durch: all="pageAll" Das pageAll-Objekt der übergeordneten Komponente, sodass die untergeordneten Komponenten gemeinsam aktualisiert werden.

Im Anhang finden Sie ein einfaches Beispiel für eine Tabellenkomponente:

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(&#39;请求列表失败&#39;)},
          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();
Nach dem Login kopieren

Vielen Dank fürs Lesen, ich hoffe, es kann allen helfen, vielen Dank für Ihre Unterstützung dieser Website!

Weitere Artikel zum Thema Javascript vue.js-Tabellenpaginierung und asynchrones Laden von Ajax-Daten finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!