一、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. json字符串处理—Json&C#

    C# 转自:https://blog.csdn.net/sajiazaici/article/details/77647625# 本文是全网第二简单的方法,因为我女票也发了一篇博客说是全网最简单的方法 ...

  2. Java实现sock5代理服务器

    入职练手socks5代理服务器,过程总结一下. 1.下载火狐浏览器,设定代理为socks5代理,地址为127.0.0.1:1080. 2.socks5协议1928,中文版,原版,认真阅读 3.按照协议 ...

  3. hadoop集群常见问题解决

    1:namenode启动 datanode未启动 解决: /hadoop/tmp/dfs/name/current VERSION 查看截取id 与 data/current VERSION集群ID ...

  4. Center os vi

    vi /etc/virc set nu 设置所有文件显示行号 :1,$s/after/befer/g  全局替换 :%s/after/befer/g 全局替换 yy 复制一行 p 粘贴 yw 复制一个 ...

  5. 微软Cortana可以帮助任何人解锁您的Windows 10系统

    Cortana是微软在每个版本的Windows10中都内置的基于人工智能的智能助手,可以帮助攻击者解锁你的系统密码. 在周二发布的最新补丁中,微软推出了一项重要更新,以解决Cortana中容易被利用的 ...

  6. 26.LockSupport线程阻塞工具

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

  7. Mac下通过npm安装webpack 、vuejs，以及引入jquery、bootstrap等（初稿）

    前言: 初次接触前端开发技术,一些方向都是在同事的指引和自己的探索后,跑了个简易web,迈入全栈系列.由于是事后来的文章,故而暂只是杂记,写的粗略且不清晰,后续将补之. 主要参考文档: http:// ...

  8. 【leetcode】719. Find K-th Smallest Pair Distance

    题目如下: 解题思路:对于这一类知道上限和下限,求第N位是什么的题目,可以先看看二分查找的方法可不可行.首先对nums进行排序,很显然任意两个元素距离绝对值最小是0,最大是nums[-1] - num ...

  9. 多线程模拟生产者消费者示例之Lock

    public class Test { public static void main(String[] args) { List<String> list = new ArrayList ...

  10. 【靶场练习_sqli-labs】SQLi-LABS Page-2 (Adv Injections)

    Less-21:括号+单引号绕过+base64cookie编码 总感觉我已经把sql注入做成代码审计了:P <?php //including the Mysql connect paramet ...