写之前先抱怨几句。本来一心一意做.net开发的，渐渐地成了只做前端。最近项目基本都用java做后台，我们这些.net的就成了前端，不是用wpf做界面，就是用html写web页面。

深知自己前端技术不足，以前虽说用asp.net前后台都做，但是，对于前端都是用现成的js库和页面模板，对于vue.js等框架基本没有接触过。

只怪自己不会写java，最近做一个项目，负责前端，后台传来数据不分页，前端收到所有数据后自己分页。我尽是无语。

正好最近在看vue.js。这个页面就用它来实现吧。顺便总结下。

效果图：

语法：

数据绑定 {{...}}或者v-model

<td >{{dataItem.id}}</td>
<input v-model="message">

事件绑定 v-on

<th v-on:click="sortBy('id')">ID</th>

循环 v-for

<option v-for="item in arrPageSize" value="{{item}}">{{item}}</option>

判断 v-if

<span v-if="item==1" class="btn btn-default" v-on:click="showPage(1,$event)">首页</span>

过滤器 Vue.filter

//定义
Vue.filter( 'name' , function(value) {
  return value * .5 ;
 });
//使用
<td>{{dataItem.age | name}}</td>
<input v-model="message | name">

排序orderBy

<tr v-for="dataItem in arrayData | orderBy sortparam sorttype">
  <td >{{dataItem.id}}</td>
  <td >{{dataItem.name}}</td>
  <td>{{dataItem.age}}</td>
</tr>

html

<div id="test" class="form-group">
   <div class="form-group">
    <div class="page-header">
     数据
    </div>
    <table class="table table-bordered table-responsive table-striped">
     <tr>
      <th v-on:click="sortBy('id')">ID</th>
      <th>姓名</th>
      <th v-on:click="sortBy('age')">年龄</th>
     </tr>
     <tr v-for="dataItem in arrayData | orderBy sortparam sorttype">
      <td >{{dataItem.id}}</td>
      <td >{{dataItem.name}}</td>
      <td>{{dataItem.age}}</td>
     </tr>
    </table>
    <div class="page-header">分页</div>
    <div class="pager" id="pager">
     <span class="form-inline">
      <select class="form-control" v-model="pagesize" v-on:change="showPage(pageCurrent,$event,true)" number>
       <option v-for="item in arrPageSize" value="{{item}}">{{item}}</option>
      </select>
     </span>
     <template v-for="item in pageCount+1">
      <span v-if="item==1" class="btn btn-default" v-on:click="showPage(1,$event)">
       首页
      </span>
      <span v-if="item==1" class="btn btn-default" v-on:click="showPage(pageCurrent-1,$event)">
       上一页
      </span>
      <span v-if="item==1" class="btn btn-default" v-on:click="showPage(item,$event)">
       {{item}}
      </span>
      <span v-if="item==1&&item<showPagesStart-1" class="btn btn-default disabled">
       ...
      </span>
      <span v-if="item>1&&item<=pageCount-1&&item>=showPagesStart&&item<=showPageEnd&&item<=pageCount" class="btn btn-default" v-on:click="showPage(item,$event)">
       {{item}}
      </span>
      <span v-if="item==pageCount&&item>showPageEnd+1" class="btn btn-default disabled">
       ...
      </span>
      <span v-if="item==pageCount&&item!=1" class="btn btn-default" v-on:click="showPage(item,$event)">
       {{item}}
      </span>
      <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCurrent+1,$event)">
       下一页
      </span>
      <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCount,$event)">
       尾页
      </span>
     </template>
     <span class="form-inline">
      <input class="pageIndex form-control" style="width:60px;text-align:center" type="text" v-model="pageCurrent | onlyNumeric" v-on:keyup.enter="showPage(pageCurrent,$event,true)" />
     </span>
     <span>{{pageCurrent}}/{{pageCount}}</span>
    </div>
   </div>
  </div>

javascript

 //只能输入正整数过滤器
  Vue.filter('onlyNumeric', {
   // model -> view
   // 在更新 `<input>` 元素之前格式化值
   read: function (val) {
    return val;
   },
   // view -> model
   // 在写回数据之前格式化值
   write: function (val, oldVal) {
    var number = +val.replace(/[^\d]/g, '')
    return isNaN(number) ? 1 : parseFloat(number.toFixed(2))
   }
  })
  //模拟获取数据
  var getData=function(){
   var result = [];
   for (var i = 0; i < 500; i++) {
    result[i] ={name:'test'+i,id:i,age:(Math.random()*100).toFixed()};
    }
   return result;
  }

  var vue = new Vue({
   el: "#test",
   //加载完成后执行
   ready:function(){
    this.arrayDataAll = getData();
    this.totalCount = this.arrayDataAll.length;
    this.showPage(this.pageCurrent, null, true);
   },
   data: {
    //总项目数
    totalCount: 200,
    //分页数
    arrPageSize:[10,20,30,40],
    //当前分页数
    pageCount: 20,
    //当前页面
    pageCurrent: 1,
    //分页大小
    pagesize: 10,
    //显示分页按钮数
    showPages: 11,
    //开始显示的分页按钮
    showPagesStart: 1,
    //结束显示的分页按钮
    showPageEnd: 100,
    //所有数据
    arrayDataAll:[],
    //分页数据
    arrayData: [],
    //排序字段
    sortparam:"",
    //排序方式
    sorttype:1,


   },
   methods: {
    //分页方法
    showPage: function (pageIndex, $event, forceRefresh) {

     if (pageIndex > 0) {


      if (pageIndex > this.pageCount) {
       pageIndex = this.pageCount;
      }

      //判断数据是否需要更新
      var currentPageCount = Math.ceil(this.totalCount / this.pagesize);
      if (currentPageCount != this.pageCount) {
       pageIndex = 1;
       this.pageCount = currentPageCount;
      }
      else if (this.pageCurrent == pageIndex && currentPageCount == this.pageCount && typeof (forceRefresh) == "undefined") {
       console.log("not refresh");
       return;
      }

      //处理分页点中样式
      var buttons = $("#pager").find("span");
      for (var i = 0; i < buttons.length; i++) {
       if (buttons.eq(i).html() != pageIndex) {
        buttons.eq(i).removeClass("active");
       }
       else {
        buttons.eq(i).addClass("active");
       }
      }

      //从所有数据中取分页数据
      var newPageInfo = [];
      for (var i = 0; i < this.pagesize; i++) {
      var index =i+(pageIndex-1)*this.pagesize;
      if(index>this.totalCount-1)break;
       newPageInfo[newPageInfo.length] = this.arrayDataAll[index];
      }
      this.pageCurrent = pageIndex;
      this.arrayData = newPageInfo;

      //计算分页按钮数据
      if (this.pageCount > this.showPages) {
       if (pageIndex <= (this.showPages - 1) / 2) {
        this.showPagesStart = 1;
        this.showPageEnd = this.showPages - 1;
        console.log("showPage1")
       }
       else if (pageIndex >= this.pageCount - (this.showPages - 3) / 2) {
        this.showPagesStart = this.pageCount - this.showPages + 2;
        this.showPageEnd = this.pageCount;
        console.log("showPage2")
       }
       else {
        console.log("showPage3")
        this.showPagesStart = pageIndex - (this.showPages - 3) / 2;
        this.showPageEnd = pageIndex + (this.showPages - 3) / 2;
       }
      }
     }
     //排序
    },sortBy: function (sortparam) {
     this.sortparam = sortparam;
     this.sorttype = this.sorttype == -1 ? 1 : -1;
    }
   }
  });

参考网址：Vue.js结合bootstrap实现分页控件

源码下载：vue.js分页

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Vue.js  # bootstrap  # 分页  # Vue.js实现多条件筛选、搜索、排序及分页的表格功能  # vue.js框架实现表单排序和分页效果  # Vue.js结合bootstrap前端实现分页和排序效果  # 基于Vue.js的表格分页组件  # vuejs2.0实现一个简单的分页示例  # Vue.js实现分页查询功能  # vue.js表格分页示例  # vuejs手把手教你写一个完整的购物车实例代码  # 用vuex写了一个购物车H5页面的示例代码  # vue 2.0 购物车小球抛物线的示例代码  # Vue+Node实现商品列表的分页、排序、筛选  # 添加购物车功能详解  # 首页  # 绑定  # 都是  # 成了  # 下一页  # 上一页  # 尾页  # 做一个  # 几句  # 就用  # 都用  # 都做  # 只做  # 它来  # 前先  # 大家多多  # 接触过  # 源码下载  # 中取 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何使用Passport实现OAuth2？（完整配置步骤）  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  如何在IIS服务器上快速部署高效网站？  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  iOS验证手机号的正则表达式  制作公司内部网站有哪些,内网如何建网站？  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  javascript中对象的定义、使用以及对象和原型链操作小结  如何用JavaScript实现文本编辑器_光标和选区怎么处理  简单实现Android验证码  Python文本处理实践_日志清洗解析【指导】  JavaScript如何实现继承_有哪些常用方法  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  简单实现jsp分页  Laravel如何集成Inertia.js与Vue/React？（安装配置）  如何快速完成中国万网建站详细流程？  Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层  网站优化排名时，需要考虑哪些问题呢？  Android仿QQ列表左滑删除操作  如何注册花生壳免费域名并搭建个人网站？  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  如何在不使用负向后查找的情况下匹配特定条件前的换行符  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  大学网站设计制作软件有哪些,如何将网站制作成自己app？  Laravel怎么判断请求类型_Laravel Request isMethod用法  如何在Tomcat中配置并部署网站项目？  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  Bootstrap CSS布局之列表  JavaScript如何实现错误处理_try...catch如何捕获异常？  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  Laravel观察者模式如何使用_Laravel Model Observer配置  Laravel如何与Docker（Sail）协同开发？（环境搭建教程）  Firefox Developer Edition开发者版本入口  如何为不同团队 ID 动态生成多个非值班状态按钮  如何在阿里云ECS服务器部署织梦CMS网站？  新三国志曹操传主线渭水交兵攻略  如何快速生成橙子建站落地页链接？  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  浅析上传头像示例及其注意事项  C++时间戳转换成日期时间的步骤和示例代码  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  BootStrap整体框架之基础布局组件  清除minerd进程的简单方法  网站建设保证美观性，需要考虑的几点问题！  宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程