Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
	<div>
		<h2>Pagination - Lazy Load</h2>
		<div style="margin-bottom:10px">
			<Label for="c1">Pager on: </Label>
			<ComboBox inputId="c1" style="width:120px"
					:data="pageOptions" 
					v-model="pagePosition" 
					:editable="false"
					:panelStyle="{height:'auto'}">
			</ComboBox>
		</div>
		<DataGrid style="height:250px"
				:pagination="true"
        :lazy="true"
				:data="data"
				:total="total"
        :loading="loading"
        :pageNumber="pageNumber"
				:pageSize="pageSize"
				:pagePosition="pagePosition"
        @pageChange="onPageChange($event)">
			<GridColumn field="inv" title="Inv No"></GridColumn>
			<GridColumn field="name" title="Name"></GridColumn>
			<GridColumn field="amount" title="Amount" align="right"></GridColumn>
			<GridColumn field="price" title="Price" align="right"></GridColumn>
			<GridColumn field="cost" title="Cost" align="right"></GridColumn>
			<GridColumn field="note" title="Note"></GridColumn>
		</DataGrid>
	</div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      pageNumber: 1,
      pageSize: 20,
      data: [],
      loading: false,
      pagePosition: "bottom",
      pageOptions: [
        { value: "bottom", text: "Bottom" },
        { value: "top", text: "Top" },
        { value: "both", text: "Both" }
      ]
    };
  },
  created() {
    this.loadPage(this.pageNumber, this.pageSize);
  },
  methods: {
    onPageChange(event) {
      this.loadPage(event.pageNumber, event.pageSize);
    },
    loadPage(pageNumber, pageSize) {
      this.loading = true;
      setTimeout(() => {
        let result = this.getData(pageNumber, pageSize);
        this.total = result.total;
        this.pageNumber = result.pageNumber;
        this.data = result.rows;
        this.loading = false;
      }, 1000);
    },
    getData(pageNumber, pageSize) {
      let total = 100000;
      let data = [];
      let start = (pageNumber - 1) * pageSize;
      for (let i = start + 1; i <= start + pageSize; i++) {
        let amount = Math.floor(Math.random() * 1000);
        let price = Math.floor(Math.random() * 1000);
        data.push({
          inv: "Inv No " + i,
          name: "Name " + i,
          amount: amount,
          price: price,
          cost: amount * price,
          note: "Note " + i
        });
      }
      return {
        total: total,
        pageNumber: pageNumber,
        pageSize: pageSize,
        rows: data
      };
    }
  }
};
</script>