http://www.cnblogs.com/landeanfen/p/6054654.html#_label3_8

<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>

　　

vuejs实现表格分页的更多相关文章

  1. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  2. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  3. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  4. Angular.js+Bootstrap实现表格分页

    最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...

  5. 如何用angularjs制作一个完整的表格之二__表格分页功能

    接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...

  6. 【转】基于jquery的无刷新表格分页

    效果图 css样式 <style> html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, ...

  7. ASP.NET MVC 之表格分页

    简单效果图:(框架:MVC+NHibernate) 要点: (1)首先建立表格分页Model(GridModel.cs) (2)然后建立数据展示页(PageCloth.cshtml) (3)再建分页版 ...

  8. dojo表格分页插件报错

    dojo表格分页插件报错 (1)dojo/parser::parse() error ReferenceError {stack:(...),message:"layout is not d ...

  9. dojo表格分页之各个参数代表的意义（一）

    下面是dojo表格分页参数代表的意义 //每页可以显示10/15/20/25/30条记录 (1)pageSizes: [10, 15, 20, 25,30], //每页显示的记录从多少到多少,共多少条 ...

随机推荐

  1. $.widget 编写jQueryUI插件(widget)

    转自:MainTao: 编写jQueryUI插件(widget) 使用jQueryUI的widget来写插件,相比于基本的jquery插件有一些好处: * 方便实现继承,代码重用 * 默认是单例 * ...

  2. PostgreSQL Replication之第三章 理解即时恢复（4）

    3.4 重放事务日志 一旦我们创建了一个我们自己的初始基础备份,我们可以收集数据库创建的XLOG.当时间到时,我们可以使用所有这些XLOG 文件并执行我们所期望的恢复进程.这就像本节描述的一样工作. ...

  3. HDU 2515 Yanghee 的算术【找规律】

    题意:中文的题目 找规律可以发现 sum[1]=a[1]+a[2] sum[2]=a[1]+a[3] sum[n]=a[2]+a[3] 解出a[1],就可以求出其他的了 #include<ios ...

  4. HDU 1789 Doing Homework again【贪心】

    题意:给出n个作业的截止时间,和该作业没有完成会被扣掉的分数.问最少会被扣掉多少分. 第一次做这一题是好久之前,当时不会(不会处理两个关键字关系@_@)---现在还是不会---看了题解---原来是这样 ...

  5. monad-本质解释- a monad is a design pattern--monad与泛型相关

    monad的特征: 类型转化+添加新的操作. monad  RACStream RACSignal RACSubject monad:单一体,(不可分的)个体 以计算为中心的封装. In functi ...

  6. 微星(MSI)新主板B150M MORTAR U盘装win7的坎坷经历

    新买的微星主板,热心的同事帮忙装好了win10,但是显卡驱动没装好,屏幕都快看瞎了眼,再者,楼主非常不喜欢win10的花哨,所以就装回了win7.下面来说一下我装win7的痛苦经历. 我是用UItra ...

  7. [NOIP2012提高组]国王游戏

    题目:洛谷P1080.Vijos P1779.codevs1198. 题目大意:国王和每个大臣左.右手各写了一个数.规定每个大臣得到的金币数为他前面所有人左手的数字的乘积除以他自己右手的数(向下取整) ...

  8. NetHogs---按进程或程序实时统计网络带宽使用率。

    NetHogs是一个开源的命令行工具(类似于Linux的top命令),用来按进程或程序实时统计网络带宽使用率. 来自NetHogs项目网站: NetHogs是一个小型的net top工具,不像大多数工 ...

  9. 【Henu ACM Round#19 E】 Om Nom and Candies

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 紫书上的原题: 链接 [代码] #include <bits/stdc++.h> #define ll long lon ...

  10. 用C3P0建立server与数据库的连接

    1:在MyEclipse建立 Web Service Project 2:在project中建立servlets包 3:在包中新建Servlet文件(採用new Servlet方法可省去配置web.x ...