一、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. WPF 几种常用控件样式的总结

    这里把wpf中几种常用样式总结一下,后期可以直接拷贝使用,呵呵 一.Button <ResourceDictionary xmlns="http://schemas.microsoft ...

  2. axios之前端发送get与post请求模板

    import axios from "axios"; 一.get mounted() { axios .get( "/api/queryusertree?domId=&q ...

  3. 太可怕了！黑客是如何攻击劫持安卓用户的DNS？

    最近发现的针对Android设备的广泛路由器的DNS劫持恶意软件现在已升级为针对iOS设备以及桌面用户的功能. 被称为RoamingMantis的恶意软件最初发现在上个月劫持了互联网路由器,以散布旨在 ...

  4. 26.LockSupport线程阻塞工具

    import java.util.concurrent.locks.LockSupport; /** * 线程阻塞工具类:LockSupport * 可以在线程内任意位置让线程阻塞 */ public ...

  5. JAVA学习笔记--方法中的参数调用是引用调用or值调用

    文献来源:<JAVA核心技术卷Ⅰ>,第4章第5节 (没有相关书籍的可看传送门) ps:测试demo因为偷懒,用的是String对象 结论:Java使用的是对象的值引用.即将任何对象所在内存 ...

  6. BLUEHOST香港主机FTP连接不上解决办法

    昨天购买了BLUEHOST的香港主机后,以为一切顺风顺水,结果FTP却连接不上,用了多种FTP工具都不行,​​​按官方博客要求开启了TSL仍然不行​.​经过一晚上的测试后终于成功,现分享出来. 方法一 ...

  7. 拦截Restful API的三种方式

    如题, 方式有三种. (1). 过滤器filter javaEE规范 (2). 拦截器interceptor springmvc提供 (3). 切片 aspect 一. Filter使用示例 impo ...

  8. npm 是干什么的？（非教程）

    看了之后就很清楚什么叫NPM,以后它是干嘛的.谢谢楼主 网上的 npm 教程主要都在讲怎么安装.配置和使用 npm,却不告诉新人「为什么要使用 npm」.今天我就来讲讲这个话题. 本文目标读者是「不太 ...

  9. 4412 RS485

    一.485硬件原理 差分对传输数据的原理 IO数据的传输→差分对 rs232传输的距离在15米以下,RS485传输距离是几十米到1000米以上 为什么485可以传输这么远 差分对的机制可以降低电磁场的 ...

  10. java 标准输入输出流，打印流，数据流

    1 package stream; import static org.junit.Assert.assertNotNull; import java.io.BufferedReader; impor ...