一、Vue分页实现

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style type="text/css">
table thead tr th {
text-align: center;
}
</style>
</head>
<body>
<div style="padding:20px;" id="app">
<div class="panel panel-primary">
<div class="panel-heading">用户管理</div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr>
<th>用户名</th>
<th>年龄</th>
<th>毕业学校</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<template v-for="(row, index) in rows ">
<tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize">
<td>{{row.Name}}</td>
<td>{{row.Age}}</td>
<td>{{row.School}}</td>
<td>{{row.Remark}}</td>
</tr>
</template>
</tbody>
</table>
</div>
<nav style="float:right;">
<ul class="pagination pagination-lg">
<template v-for="page in Math.ceil(rows.length/pagesize)">
<li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li>
<li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
<li v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
<li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a href="#">下一页</a></li>
</template>
</ul>
</nav>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- <script src="vue.js"></script> -->
<script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script> <script type="text/javascript">
//Model
var data = {
rows: [
{ Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' },
{ Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' },
{ Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' },
{ Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' },
{ Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
{ Id: 6, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
{ Id: 7, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
{ Id: 8, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
{ Id: 9, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
{ Id: 11, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
],
pagesize: 3,
curpage:1,//当前页的页码
};
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
//上一页方法
PrePage: function (event) {
$(".pagination .active").prev().trigger("click");
},
//下一页方法
NextPage: function (event) {
$(".pagination .active").next().trigger("click");
},
//点击页码的方法
NumPage: function (num, event) {
if (this.curpage == num) {
return;
}
this.curpage = num;
$(".pagination li").removeClass("active");
if (event.target.tagName.toUpperCase() == "LI") {
$(event.target).addClass("active");
}
else {
$(event.target).parent().addClass("active");
}
if (this.curpage == 1) {
$("#prepage").addClass("disabled");
}
else {
$("#prepage").removeClass("disabled");
}
if (this.curpage == Math.ceil(this.rows.length / this.pagesize)) {
$("#nextpage").addClass("disabled");
}
else {
$("#nextpage").removeClass("disabled");
}
}
},
ready:function(){
var s = JSON.stringify(this.rows);
console.log(JSON.parse(s))
}
});
</script>
</body> </html>

一、Vue分页实现的更多相关文章

  1. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  2. 【laravel5.4】vue分页删除

    1.a标签执行ajax删除,后台删除成功后,执行vue分页对象删除对应数据 VUE.js

  3. java+springBoot+Thymeleaf+vue分页组件的定义

    导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...

  4. Vue 分页功能伪代码实现

    Vue分页功能的实现 其实分页功能是一个比较简单的demo 后端写好pageNum和pageSize的接口直接传参就是了 // 这里我们假设后端已经写好了 pageNum和pagesize <v ...

  5. vue分页组件table-pagebar

    之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作 ...

  6. VUE 分页组件

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  8. vue分页全选和单选操作

    <!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...

  9. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

随机推荐

  1. JS的数据类型及分类

    JS分两种数据类型: 基本数据类型: Number.String.Boolean.Null. Undefined.Symbol(ES6) 这些类型可以直接操作保存在变量中的实际值. 引用数据类型: O ...

  2. Linux系统重要文件

    Linux系统重要文件介绍与配置 一网卡配置文件 (一)网卡配置文件参数介绍 文件路径信息:/ec/sysconfig/network-scripts/ifcfg-eth0 文件作用说明:配置网卡地址 ...

  3. 重写NSString的setter方法

    - (void)setName:(NSString *)name { _name = [name copy]; } 就可以了 不需要写成: 第一种: (void)setName:(NSString * ...

  4. php fmod()函数 语法

    php fmod()函数 语法 作用:fmod()函数的作用是两个数值做除法运算后的余数 语法:fmod(X,Y).大理石平台哪家好 参数: 参数 描述 X 必须,X为除数 Y 必须,被除数,如果Y为 ...

  5. PHP curl_multi_exec函数

    curl_multi_exec — 运行当前 cURL 句柄的子连接 说明 int curl_multi_exec ( resource $mh , int &$still_running ) ...

  6. bzoj4397【Usaco2015 Dec】Breed Counting(前缀和、树状数组)

    题目描述 Farmer John's N cows, conveniently numbered 1…N, are all standing in a row (they seem to do so ...

  7. linux0.11内核源码——boot和setup部分

    https://blog.csdn.net/KLKFL/article/details/80730131 https://www.cnblogs.com/joey-hua/p/5528228.html ...

  8. 2019牛客多校第六场 B - Shorten IPv6 Address 模拟

    B - Shorten IPv6 Address 题意 给你\(128\)位的二进制,转换为十六进制. 每\(4\)位十六进制分为\(1\)组,每两组用一个\(":"\)分开. 每 ...

  9. 20180914-Java实例03

    Java 实例 – 字符串性能比较测试 以下实例演示了通过两种方式创建字符串,并测试其性能: // StringComparePerformance.java 文件 public class Stri ...

  10. VLOOUP

    VLOOKUP函数是Excel中的一个纵向查找函数 该函数的语法规则如下:VLOOKUP(lookup_value,table_array,col_index_num,range_lookup) 参数 ...