vue.js 分页查询实例

分页工具
vuejs-paginate

https://github.com/lokyoung/vuejs-paginate

安装 npm install vuejs-paginate
（需安装bootstrap）

Page组件：

<template>
<div id="page">
  <div class="form-group">
    <input v-model="findmessage" placeholder="搜索">
    <button v-on:click="loadData(CurrentPage)">Submit</button>
<i class="iconfont">&#xe645;</i>
  </div>
  <ul>
    <li v-for='item in items'>{{ item.name }}</li>
  </ul>
  <paginate
    :page-count="20"
    :click-handler="loadData"
    :prev-text="'Prev'"
    :next-text="'Next'"
    :container-class="'pagination'">
  </paginate>
</div>
</template>


<script>
import Paginate from 'vuejs-paginate'

export default {
  name: 'page',
  data () {
    return {
      items: [],
      perpage: 2,
      findmessage: '',
      CurrentPage: 1
    }
  },
  methods: {
    loadData (PageNum) {
      this.CurrentPage = PageNum
      const options = {
        params: {
          find: this.findmessage,
          limit: this.perpage,
          offset: this.perpage * (PageNum - 1),
          emulateJSON: true
          /* additional parameters */
        }
      }
      this.$http.jsonp('http://localhost/test_json/text.php?flag=showmessage', options).then(function (response) {
        // 这里是处理正确的回调
        console.log(response.data.comments)
        this.items = response.data.comments
        // this.articles = response.data["subjects"] 也可以
      },
      function (response) {
        // 这里是处理错误的回调
        console.log(response)
      })
    }
  },
  created: function () {
    this.loadData(1)
  },
  components: {
    Paginate
  }
}
</script>
<style>
@font-face {font-family: "iconfont";
  src: url('../assets/iconfont.eot?t=1509605424186'); /* IE9*/
  src: url('../assets/iconfont.eot?t=1509605424186#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAV8AAsAAAAACBwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kgvY21hcAAAAYAAAABeAAABhppMBr5nbHlmAAAB4AAAAakAAAIE2jGiq2hlYWQAAAOMAAAALwAAADYPYQZcaGhlYQAAA7wAAAAcAAAAJAfeA4RobXR4AAAD2AAAAAwAAAAMC+kAAGxvY2EAAAPkAAAACAAAAAgAdgECbWF4cAAAA+wAAAAfAAAAIAETAGVuYW1lAAAEDAAAAUUAAAJtPlT+fXBvc3QAAAVUAAAAJgAAADdM3kXmeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sE4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxzZW7438AQw9zA0AAUZgTJAQAoewyxeJzFkMENgDAMAy9t6QMxCA/W6A68mKMTd41iQnkwQS05VhxLiQIsQBQPMYFdGA9OueZ+ZHU/eSZLjUBtpXf1nyqiWXYNKplpsHmr/9i87qPTV6iDOrGVl4Qb/7cMowAAeJx1kE1r1FAUhu97r0lm0nw0yc33fN2JM7FTEzCTzoyUTl24UboouFAXLvoD6rZQFFqoIuLChb9ABHGl4LaCa39Cd6J/Y6K3uLWXs3gO5+UcnksUQv78ZOcsIh65QW6Ru2SfEKibGFq0C5HXJd2ELxQ/5BbLs1xo2bBkOwiHKg+qWT0OVU21YaGHqahmeUlzbNVLuo0q6AJxmjxwRx2XvYUe5b0XzX36Hn4/69jLorl3c5dXA691ZLhu7LpvWqqitCi9Zls4DIO20tbV5oNiJ/55f4P2YcR5svfYHKTuwav6aXcUtoGTE3jpwPq46ySOrGdJ4Lmxtm62osTMrnMc/V6LPKM7/kXkU6XrZ/aD7ZMBmZCa3CF75JG0zbZK5MKC5meXVttwegjFEnNnWs3mJUb1bC56kN8hPTUhw55QVE2m5NgpMb2C2ZdvWEyai8mCftVt09iRHc03bmOq22Brq9MOx5h3mmNqIvBWF74Ao2fNOAZsfpl49x+i34vJAnJTYQX26uU/psemoa8XPAVSXqyehEMg4vT5a0TNJ8M0DTyUJ6/gvzEJUCAAAAB4nGNgZGBgAGLWZRa/4/ltvjJwszCAwDWFhwYI+v96FgbmACCXg4EJJAoAGCYJrAB4nGNgZGBgbvjfwBDDwgACQJKRARUwAwBHCQJsBAAAAAPpAAAEAAAAAAAAAAB2AQJ4nGNgZGBgYGaIZGBjAAEmIOYCQgaG/2A+AwAR1gF5AHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgJmRiZGZkYWBsYIzJzErsyIzMS+dgQEAJBoEVQAA') format('woff'), url('../assets/iconfont.ttf?t=1509605424186') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../assets/iconfont.svg?t=1509605424186#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
import Paginate from 'vuejs-paginate'
Vue.component('paginate', Paginate)
Vue.use(VueResource)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

php文件：
test.php:

<?php  
    require_once('conn.php');  
    /* 
     *选择数据表  
     * */  
    $limit = $_GET['limit'];
    $offset = $_GET['offset'];
    $find = $_GET['find'];
    $sql = 'SELECT * from test where name like "%'.$find.'%" limit '.$offset.', '.$limit.'';  
    $result = $conn->query($sql);  
    $dataarr = array();  
    while($row = $result->fetch_array()){  
        $dataarr[]=$row;  
    }  

    // $id=$_GET['id'];  
    // if($id==1){  
    Response::json(1,'数据返回成功',$dataarr);  
    // }else if($id==2){  
    //     Message::json(0,'失败');  
    // }  
?>

conn.php:

<?php  
    header("charset=utf-8");  
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
    $servername="localhost";  
    $username="root";  
    $password="";  
    $dbname="test";  
    $conn = new mysqli($servername,$username,$password,$dbname);  
    if(!$conn){  
        echo "数据库连接失败！";  
    }  
    //mysqli_select_db($dbname);  
    class Response{  
        public static function json($code,$message="",$comments=array()){  
            $result=array(  
              'code'=>$code,  
              'message'=>$message,  
              'comments'=>$comments   
            );  
            //输出json  
            $b = json_encode($result);  
            echo "{$_GET['callback']}({$b})";
            exit;  
        }  
    }  

?>