การใช้งาน Refresher และ Infinite Scroll จัดการรายการข้อมูลใน Ionic

<ion-header>
  <ion-navbar color="primary">
      <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>   
  <ion-title>province</ion-title>
  <ion-buttons end>
      <button ion-button icon-only (click)="openFilter($event)">
        <ion-icon name="funnel"></ion-icon>
      </button>
    </ion-buttons>    
</ion-navbar>
<ion-toolbar no-border-top>
    <ion-searchbar color="primary"
                   [(ngModel)]="queryText"
                   (ionInput)="getItems()"
                   placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>  
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>  
  <ion-list>
    <ion-item  *ngFor="let province of results;let i=index" >
    {{province.name}}
    </ion-item>
  </ion-list>
</ion-content>

import { Component } from '@angular/core';
import { 
  NavController, 
  NavParams, 
  PopoverController,
  ToastController,
  Refresher
} from 'ionic-angular';

// มีการใช้งาน PopoverController
// import service และ popover page มาใช้งาน
import { ProvinceServiceProvider } from '../../providers/province-service/province-service';
import { PopoverPage } from '../popover/popover';
 
@Component({
  selector: 'page-province',
  templateUrl: 'province.html',
})
export class ProvincePage {
 
    // กำหนดตัวแปร สำหรับค่าต่างๆ 
  public queryText:string = ''; // เก็บข้อความที่ใช้ค้น
  public results:any; // ไว้รับข้อมูล
  public sorttype:string = 'province_id ASC'; // เก็บรุปแบบเงื่อนไขการเรียงข้อมูล
 
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public popoverCtrl: PopoverController, // inject PopoverController มาใช้งาน
    public provinceService:ProvinceServiceProvider, // inject ProvinceServiceProvider มาใช้งาน
    public toastCtrl: ToastController
  ) {
  }
 
  ionViewDidLoad() {
    console.log('ionViewDidLoad ProvincePage');
    // เมื่อเข้ามาใน province page ให้ทำการดึงข้อมูลมาแสดงทันที
    this.provinceService.getProvince().subscribe((data) =>{
      this.results = data;
    });
   
 
  }
 
  // ฟังก์ชั่นคำสั่งสำหรับแสดง popover page มีการรับค่า $event object ผ่านตัวแปร ev
  openFilter(ev:any){
  // กำหนด option ให้กับ popover ที่จะสร้าง ในที่นี้ส่ง cssClass 
  // เข้าไปเพื่อกำหนดพื้นหลังสีทิบมี popover แสดง
    let popoverOpt = {
      cssClass: 'backdropOpacityPopover'     
    }
    // กำหนดตัวแปร ที่จะส่งไปยัง popover ในที่นี้เราส่งค่าเริ่มต้นการจัดเรียงข้อมูลไป
    let popoverData = {
      sorttype:this.sorttype
    }
    // กำหนดตัวแปรสร้าง popover มีส่งค่า และกำหนด option 
    let popover = this.popoverCtrl.create(PopoverPage,popoverData,popoverOpt);
    popover.present({
  //    ev: ev // แสดง popover และส่งค่า $event object ผ่านตัวแปร ev เข้าไปด้วย
    }); 
    // การส่ง $event object เข้าไปใน popover จะทำให้สามารถอ้างอิงตำแหน่งของปุ่ม ทำให้ popover แสดง
    // ที่ตำแหน่งปุ่มบน ในตัวอย่าง เราจะ comment  // ev:ev เพื่อให้ popover แสดงตรงกลางแทน
     
    // กำหนด event เมื่อ popover ปิดลง ให้รับค่า รูปแบบการจัดเรียง ถ้ามีการส่งค่ากลับมา
    popover.onDidDismiss((data)=>{
      if(data){
        this.sorttype = data.sorttype;
      }
      this.getItems(); // ทำการดึงข้อมูล
    });
  } 
 
  // ฟังก์ชั่นดึงข้อมูล โดยเรียกใช้ผ่าน provinceService อีกที
  getItems(){
    let q = this.queryText;
    let sort = this.sorttype;
    this.provinceService.getProvince(q,sort)
    .subscribe((data) =>{
      this.results = data;
    });
  }

  doRefresh(refresher: Refresher) {
    let q = this.queryText;
    let sort = this.sorttype;    
    this.provinceService.getProvince(q,sort).subscribe((data) =>{
      this.results = data;
      refresher.complete();
   
      let toast = this.toastCtrl.create({
        message: 'แสดงรายการอัพเดทล่าสุดเรียบร้อยแล้ว.',
        duration: 3000
      });
      toast.present();      
    });
  }
 
}

{
	"curPage": 1,
	"perPage": 15,
	"totalData": 15,
	"totalPage": 6,
	"data": [
		{
			"id": "1",
			"name": "กรุงเทพมหานคร",
			"geo_id": "2"
		},
		{
			"id": "2",
			"name": "สมุทรปราการ",
			"geo_id": "2"
		}
	]
}

<?php
header('Access-Control-Allow-Origin: *'); 
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
require_once("dbconnect.php");

$perPage = 15;
$totalData = 0;
$totalShow = 0;
$totalPage = 0;

if(!isset($_GET['page']) || $_GET['page']<=0){
	$page = 1;
	$beginPage = 0;
}else{
	$page =  (int) $_GET['page'];	
	$beginPage = ($page-1)*$perPage;
}


$json_data = array();
$more_sql = "";
// ถ้ามีการส่งคำค้นหามา และไม่ใช่ค่าว่าง
if(isset($_GET['queryString']) && $_GET['queryString']!=""){
    $more_sql = " AND province_name LIKE '%".trim($_GET['queryString'])."%' ";
}
$sort = "";
// ถ้ามีการส่งค่าเงื่อนไขการเรียงข้อมูลมา และไม่ใช่ค่าว่าง
if(isset($_GET['sorttype']) && $_GET['sorttype']!=""){
    $sort = " ORDER BY ".$_GET['sorttype']." ";
}
$sql = "
SELECT * FROM tbl_provinces WHERE 1 $more_sql $sort
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
	$totalData = $result->num_rows;
}
$sql.="
 LIMIT $beginPage,$perPage
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
	$totalShow = $result->num_rows;
	$json_data['curPage']=$page;
	$json_data['perPage']=15;
	$json_data['totalData']=$totalShow;
	$json_data['totalPage']=ceil($totalData/$perPage);
    while($row = $result->fetch_assoc()){
        $json_data['data'][] = array(
            "id" => $row['province_id'],
            "name" => $row['province_name'],
            "geo_id" => $row['geo_id']                
        );
    }
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data);    
    if(isset($_GET['callback']) && $_GET['callback']!=""){    
    echo $_GET['callback']."(".$json.");";        
    }else{    
    echo $json;    
    }    
}
?>

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
 
@Injectable()
export class ProvinceServiceProvider {
 
  constructor(public http: HttpClient) {
    console.log('Hello ProvinceServiceProvider Provider');
  }
 
  getProvince(q?:any,sort?:any,page?:any){
    return this.http.get('http://localhost/demo/api.php',{
      params: {
        queryString: q!=null?q:'',
        sorttype: sort!=null?sort:'',
        page: page!=null?page:1
      }
    }
    );   
  }
  
}

<ion-header>
  <ion-navbar color="primary">
      <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>   
  <ion-title>province</ion-title>
  <ion-buttons end>
      <button ion-button icon-only (click)="openFilter($event)">
        <ion-icon name="funnel"></ion-icon>
      </button>
    </ion-buttons>    
</ion-navbar>
<ion-toolbar no-border-top>
    <ion-searchbar color="primary"
                   [(ngModel)]="queryText"
                   (ionInput)="getItems()"
                   placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>  
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>  
  <ion-list>
    <ion-item  *ngFor="let province of results;let i=index" >
      {{province.name}}
    </ion-item>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="page < totalPage">
    <ion-infinite-scroll-content loadingSpinner="bubbles" 
    loadingText="กำลังโหลดข้อมูล...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>  
  
</ion-content>

import { Component } from '@angular/core';
import { 
  NavController, 
  NavParams, 
  PopoverController,
  ToastController,
  Refresher
} from 'ionic-angular';
// มีการใช้งาน PopoverController
// import service และ popover page มาใช้งาน
import { ProvinceServiceProvider } from '../../providers/province-service/province-service';
import { PopoverPage } from '../popover/popover';
 
interface resultData{
  curPage:number,
  perPage:number,
  totalData:number,
  totalPage:number,
  data:any[]
}

@Component({
  selector: 'page-province',
  templateUrl: 'province.html',
})
export class ProvincePage {
 
    // กำหนดตัวแปร สำหรับค่าต่างๆ 
  public queryText:string = ''; // เก็บข้อความที่ใช้ค้น
  public results:any; // ไว้รับข้อมูล
  public sorttype:string = 'province_id ASC'; // เก็บรุปแบบเงื่อนไขการเรียงข้อมูล
  public page:number = 1;
  public totalData:number = 0;
  public totalPage:number = 0;
 
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public popoverCtrl: PopoverController, // inject PopoverController มาใช้งาน
    public provinceService:ProvinceServiceProvider, // inject ProvinceServiceProvider มาใช้งาน
    public toastCtrl: ToastController
  ) {
  }
 
  ionViewDidLoad() {
    console.log('ionViewDidLoad ProvincePage');  
    // เมื่อเข้ามาใน province page ให้ทำการดึงข้อมูลมาแสดงทันที
    this.provinceService.getProvince().subscribe((result:resultData) =>{
      this.page = result.curPage;
      this.totalData = result.totalData;
      this.totalPage = result.totalPage;
      this.results = result.data;
    });     
  }
 
  // ฟังก์ชั่นคำสั่งสำหรับแสดง popover page มีการรับค่า $event object ผ่านตัวแปร ev
  openFilter(ev:any){
  // กำหนด option ให้กับ popover ที่จะสร้าง ในที่นี้ส่ง cssClass 
  // เข้าไปเพื่อกำหนดพื้นหลังสีทิบมี popover แสดง
    let popoverOpt = {
      cssClass: 'backdropOpacityPopover'     
    }
    // กำหนดตัวแปร ที่จะส่งไปยัง popover ในที่นี้เราส่งค่าเริ่มต้นการจัดเรียงข้อมูลไป
    let popoverData = {
      sorttype:this.sorttype
    }
    // กำหนดตัวแปรสร้าง popover มีส่งค่า และกำหนด option 
    let popover = this.popoverCtrl.create(PopoverPage,popoverData,popoverOpt);
    popover.present({
  //    ev: ev // แสดง popover และส่งค่า $event object ผ่านตัวแปร ev เข้าไปด้วย
    }); 
    // การส่ง $event object เข้าไปใน popover จะทำให้สามารถอ้างอิงตำแหน่งของปุ่ม ทำให้ popover แสดง
    // ที่ตำแหน่งปุ่มบน ในตัวอย่าง เราจะ comment  // ev:ev เพื่อให้ popover แสดงตรงกลางแทน
     
    // กำหนด event เมื่อ popover ปิดลง ให้รับค่า รูปแบบการจัดเรียง ถ้ามีการส่งค่ากลับมา
    popover.onDidDismiss((data)=>{
      if(data){
        this.sorttype = data.sorttype;
      }
      this.getItems(); // ทำการดึงข้อมูล
    });
  } 
 
  // ฟังก์ชั่นดึงข้อมูล โดยเรียกใช้ผ่าน provinceService อีกที
  getItems(){
    this.page = 1;
    let q = this.queryText;
    let sort = this.sorttype;
    let page = this.page;
    this.provinceService.getProvince(q,sort,page)
    .subscribe((result:resultData) =>{
      this.page = result.curPage;
      this.totalData = result.totalData;
      this.totalPage = result.totalPage;
      this.results = result.data;
    });
  }

  doRefresh(refresher: Refresher) {
    this.page = 1;
    let q = this.queryText;
    let sort = this.sorttype;
    let page = this.page;
    this.provinceService.getProvince(q,sort,page)
    .subscribe((result:resultData) =>{
      this.page = result.curPage;
      this.totalData = result.totalData;
      this.totalPage = result.totalPage;
      this.results = result.data;
      refresher.complete();
   
      let toast = this.toastCtrl.create({
        message: 'แสดงรายการอัพเดทล่าสุดเรียบร้อยแล้ว.',
        duration: 3000
      });
      toast.present();      
    });
  }

  doInfinite(infiniteScroll) {
    this.page = this.page+1;
    let q = this.queryText;
    let sort = this.sorttype;
    let page = this.page;
    this.provinceService.getProvince(q,sort,page)
    .subscribe((result:resultData) =>{
      this.page = result.curPage;
      this.totalData = result.totalData;
      this.totalPage = result.totalPage;
      for(let i=0; i<this.totalData; i++) { 
        this.results.push(result.data[i]);
      }      
      infiniteScroll.complete();
      
    });    

  }
 
}

interface resultData{
  curPage:number,  // รับค่าหน้าปัจจุบันที่กำลังแสดงอยู่
  perPage:number, // รับค่าจำนวนรายการสูงสุดที่แสดงแต่ละหน้า
  totalData:number, // รับค่าจำนวนรายการของหน้านั้น มีค่า <= perPage
  totalPage:number, // รับค่าจำนวนหน้า page ทั้งหมด ได้จากการคำนวณ
  data:any[] // array object ข้อมูล
}

    // กำหนดตัวแปร สำหรับค่าต่างๆ 
  public queryText:string = ''; // เก็บข้อความที่ใช้ค้น
  public results:any; // ไว้รับข้อมูล
  public sorttype:string = 'province_id ASC'; // เก็บรุปแบบเงื่อนไขการเรียงข้อมูล
  public page:number = 1;
  public totalData:number = 0;
  public totalPage:number = 0;

    this.provinceService.getProvince().subscribe((data) =>{
      this.results = data;
    });

    this.provinceService.getProvince().subscribe((result:resultData) =>{
      this.page = result.curPage;
      this.totalData = result.totalData;
      this.totalPage = result.totalPage;
      this.results = result.data;
    });     

  doInfinite(infiniteScroll) {
    this.page = this.page+1;
    let q = this.queryText;
    let sort = this.sorttype;
    let page = this.page;
    this.provinceService.getProvince(q,sort,page)
    .subscribe((result:resultData) =>{
      this.page = result.curPage;
      this.totalData = result.totalData;
      this.totalPage = result.totalPage;
      for(let i=0; i<this.totalData; i++) { 
        this.results.push(result.data[i]);
      }      
      infiniteScroll.complete();
      
    });    

  }

this.results = result.data;