Vue.js实现分页

效果图

代码

<!DOCTYPE html>

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <title>用户管理页面</title>

    <!-- Bootstrap core CSS -->

    <link href="bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet">

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/dashboard.css" rel="stylesheet">

    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>

    <script src="js/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- 异步提交的库 -->

    <script src="js/vue-resource.min.js"></script>

    <style>

        .page-div-style {

            width: 100%;

            text-align: center;

        }

    </style>

</head>

<body>

<!-- container自适应 -->

<div class="container">

    <!-- 为表格添加基础样式 ，

        .table为任意<table>添加基本样式，

        .table-striped可以给tbody之内的每一行添加斑马条纹样式

        .table-bordered为表格和其中的每个单元格增加边框

    -->

    <table class="table table-bordered">

        <!-- 表格标题行的容器元素，用来识别表格列 -->

        <thead>

        <tr>

            <!-- 特殊的表格单元格，用来识别行或列 -->

            <th>序号</th>

            <th>用户名</th>

            <th>昵称</th>

            <th>手机号</th>

            <th>邮箱</th>

            <th>操作</th>

        </tr>

        </thead>

        <!-- 表格主题中的表格行的容器元素 -->

        <tbody id="example">

        <!-- 一组出现在单行单元格的容器元素 -->

        <tr v-for="item in items">

            <td> {{ item.num }}</td>

            <td> {{ item.username }}</td>

            <td> {{ item.avatar }}</td>

            <td> {{ item.phone }}</td>

            <td> {{ item.email }}</td>

            <td>

                <!--<button class="btn btn-warning" v-bind:value="item.id" v-on:click="reviewClick">

                    审核

                </button>-->

                <button class="btn btn-warning" v-bind:value="item.id" v-on:click="editorClick">

                    编辑

                </button>

                <!--

                     data-target：想要在页面上加载的模拟框的目标。

                     data-toggle：用于打开模态窗口。

                 -->

                <button class="btn btn-warning" v-bind:value="item.id" v-on:click="deleteClick">

                    删除

                </button>

            </td>

        </tr>

        </tbody>

    </table>

    <div class="page-div-style" id="page">

        <nav aria-label="Page navigation example">

            <ul class="pagination">

                <li class="page-item" v-show="isShowPrevious"><a class="page-link" v-on:click="previous">Previous</a>

                </li>

                <li class="page-item" v-for="item in pageCounts" v-on:click="pageClick"

                    v-bind:class="{active : item.isActive}">

                    <a class="page-link">{{item.pages}}</a>

                <li class="page-item">

                    <a class="page-link" v-show="isShowNext" v-on:click="next">Next</a>

                </li>

            </ul>

        </nav>

    </div>

</div>

</body>

<script>

   var v = new Vue({

        el: '#page',

        data: {

            pageCounts: [],

            curPage: 1,

            start: 1,

            end: 5,

            total: 0,

            pageCount: 5,

            pages: 0,

            isShowPrevious: false,

            isShowNext: false,

        },

        methods: {

            next() {

                v.curPage++;

                var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}

                sendPost(param);

            },

            previous() {

                v.curPage--;

                var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}

                sendPost(param);

            },

            pageClick(event) {

                //

                v.curPage = event.target.innerHTML;

                var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}

                sendPost(param);

                console.log(event.target.innerHTML);

            }

        }

    })

    var vm = new Vue({

        el: '#example',

        data: {

            items: [],

        },

        methods: {

            reviewClick(event) {

                //获取id

            },

            editorClick(event) {

                //获取id

                //console.log(event.target.value);

                var userIframe = window.parent.document.getElementById('userIframe');

                userIframe.src = "user_info.html?id=" + event.target.value;

                //window.location.href = "user_info.html?id=" + event.target.value;

            },

            deleteClick(event) {

                Vue.http.get('/deleteUserById/' + event.target.value).then(function (res) {

                    console.log(JSON.parse(res.bodyText));

                    var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}

                    sendPost(param);

                }, function (res) {

                })

                console.log("删除" + event.target.value);

            },

        }

    })

    var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}

    sendPost(param);

    function sendPost(param) {

        Vue.http.post('/allUser', param).then(function (res) {

                //请求成功

                var result = JSON.parse(res.bodyText);

                var data = result[0];

                var sum = result[1];

                v.total = Math.ceil((sum.total / sum.pageCount));

                if (v.total < 5)

                    v.end = v.total;

                //将分页的数据清空为0

                v.pageCounts.length = 0;

                //判断上一页、下一页是否显示

                if (sum.curPage == 1 && v.total == 1) {

                    v.isShowPrevious = false;

                    v.isShowNext = false;

                } else if (sum.curPage == 1 && v.total != 1 && v.total != 0) {

                    v.isShowPrevious = false;

                    v.isShowNext = true;

                } else if (sum.curPage == v.total) {

                    v.isShowPrevious = true;

                    v.isShowNext = false;

                } else {

                    v.isShowPrevious = true;

                    v.isShowNext = true;

                }

                if (v.curPage == v.end && v.end < v.total) {

                    v.start++;

                    v.end++;

                } else if (v.curPage == v.start && v.start > 1) {

                    v.start--;

                    v.end--;

                }

                //获取显示的椰树

                for (var i = v.start; i <= v.end; i++) {

                    v.pageCounts.push({

                        pages: i,

                        isActive: i == v.curPage ? true : false,

                    })

                }

                //获取服务端传递过来的数据，

                vm.items.length = 0;

                for (var i = 0; i < data.length; i++) {

                    //触发数组更新

                    vm.items.push({

                        num: (parseInt([i]) + 1),

                        username: data[i].username,

                        phone: data[i].phone,

                        email: data[i].email,

                        avatar: data[i].avatar,

                        id: data[i].id,

                    })

                }

            }

            ,

            function (res) {

                //请求失败

            }

        );

    }

</script>

</html>

Vue.js实现分页的更多相关文章

html+vue.js 实现分页可兼容IE
当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案, 先看一下实现效果: 上代码: 1.简单搞一搞 ...
Vue.js报错Failed to resolve filter问题原因
Vue.js报错Failed to resolve filter问题原因金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...
基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
用vue.js的v-for，v-if，computed写一个分页样式
在学Vue,总想写个分页,先写了一个样式. 主要看思路: 思路简单,得到总页数,判断总页数,循环. 先判断总页数是否需要分页,总页数==1页就不分了. 再判断总页数<11就不用--. 总页数&g ...
Vue.js 开发实践：实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
利用Vue.js实现拼图游戏
之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...

随机推荐

前端开发——让算法"动"起来
正文当然在我们不清楚具体操作细节前我们可以先假设一下,我们能够用什么来实现.按照以前看过的排序动画我将其分为 1.Js操作Dom,再搭配简单的css 2.Canvas动画之后在查资料的时候发现还有 ...
20道HTML基础面试题（附答案）
以下是我整理的一些HTML的基础面试体,并自己整理了答案. 1 DOCTYPE有什么作用?标准模式与混杂模式如何区分?它们有何意义? 告诉浏览器使用哪个版本的HTML规范来渲染文档.DOCTYPE不存 ...
使用宝塔面板配置nginx 访问ftp服务器下面的图片
如果你在服务器上运行war项目可以在tomcat 配置访问的: tomcat 也贴出来吧! 一.tomca配置访问,需要更改配置文件server.xml ,如果找不到,自己好好找一下一般在 ...
LeetCode328----奇偶链表
给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性. 请尝试使用原地算法完成.你的算法的空间复杂度应为 O(1),时 ...
第四周课程总结&实验报告
实验报告 1.写一个名为Rectangle的类表示矩形. 其属性包括宽width.高height和颜色color,width和height都是double型的,而color则是String类型的.要求 ...
mybatis 中的 update 返回值
摘自:https://www.jianshu.com/p/80270b93082a 如果定义一个如下的update函数,那么这个函数的返回值到底是啥意思呢?是受影响的行数吗? 验证之前我们先看看数据库 ...
nginx location正则
nginx location正则写法一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # ...
Java代码审计-铁人下载系统
初学 java 代码审计,跟着表哥们脚步,走一遍审计流程,就选了个没有使用 Java 框架的 java 系统,作为入门. 目的是为了熟悉代码审计流程,寻找漏洞的思路,入门记录. 准备工作为了验证审计 ...
代码实现:有n个整数，使其前面各数顺序向后移m个位置，最后m个数变成最前面的m个数
//有n个整数,使其前面各数顺序向后移m个位置,最后m个数变成最前面的m个数 import java.util.ArrayList; import java.util.Scanner; public ...
ArcGISDynamicMapServiceLayer 和 ArcGISTiledMapServiceLayer 区别
ArcGISDynamicMapServiceLayer(动态地图服务)通常用于实时显示经常变化的数据,支持控制单个图层可见性,可动态投影.但缺点是显示效果较差,整个服务出图较慢:ArcGISTile ...

Vue.js实现分页

Vue.js实现分页的更多相关文章

随机推荐

热门专题