vue2.0与bootstrap3实现列表分页效果


Posted in Javascript onNovember 28, 2017

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

直接引入vue的js文件进行页面渲染分页,不是vuex的哦,以下源码可以直接运行哟^_^

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>使用vue2.0与bootstrap3进行简单列表分页</title>
    <link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script>
  </head>
  <body>

    <div class="bs-example" id="table">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="listData.length>0" v-for="item in listData">
            <th scope="row">{{item.id}}</th>
            <td>{{item.name}}</td>
            <td>
              <button v-on:click="editItem(item.id)" class="btn btn-default" >编辑</button>
              <button v-on:click="deleteItem(item.id)" class="btn btn-default" >删除</button>
            </td>
          </tr>
          <tr>
            <td colspan=3>
              <div id="pagelist">
                  <div class="row">
                    <div class="col-sm-6" style="line-height: 80px">
                      <div class="dataTables_info" id="sample-table-2_info">
                        共{{pageData.total}}条,当前显示第
                        <span v-if="pageData.pageSize==1 || pageData.total == 0 || pageData.total == 1">
                        {{pageData.itemStart}}</span>
                        <span v-else>{{pageData.itemStart}}-{{pageData.itemEnd}}</span>
                        条
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="dataTables_paginate paging_bootstrap">
                        <ul class="pagination">
                          <li v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1" class="prev disabled">
                            <a>首页</a>
                          </li>
                          <li v-else class="prev">
                            <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(1,pageData.pageSize);">
                              首页
                            </a>
                          </li>
                          <li v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1" class="prev disabled">
                            <a>上一页</a>
                          </li>
                          <li v-else class="prev">
                            <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageData.curPage-1,pageData.pageSize);">
                              上一页</i>
                            </a>
                          </li>
                          <li v-if="pageData.totalPage > 5 && pageData.curPage > 3" class="next disabled">
                            <a>...</a>
                          </li>
                          <template v-for="pageItem in pageData.pageIndex">
                            <li v-if="pageData.curPage == pageItem" class="active">
                              <a>{{pageItem}}</a>
                            </li>
                            <li v-else>
                              <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageItem,pageData.pageSize);">
                                {{pageItem}}
                              </a>
                            </li>
                          </template>
                          <li v-if="pageData.totalPage > 5 && pageData.curPage < pageData.totalPage-2" class="next disabled">
                            <a>...</a>
                          </li>
                          <li v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1" class="next disabled">
                            <a>下一页</i></a>
                          </li>
                          <li v-else class="next">
                            <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageData.curPage+1,pageData.pageSize);">
                              下一页</i>
                            </a>
                          </li>
                          <li v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1" class="next disabled">
                            <a>末页</a>
                          </li>
                          <li v-else class="next">
                            <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageData.totalPage,pageData.pageSize);">
                              末页
                            </a>
                          </li>
                          <template v-if="pageData.totalPage > 5" class="next disabled">
                            <li>
                              <input value="" ref="goPage" class="input-mini" type="text" style="height: 32px;width:40px;margin:auto 5px auto 20px;line-height: 24px;">
                              <label><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="goPage(pageData.pageSize,pageData.totalPage)">Go</a></label>
                            </li>
                          </template>
                        </ul>
                      </div>
                    </div>
                  </div>
              </div>
            </td>
          <tr>
        </tbody>
      </table>
    </div>


    <script type="text/javascript">

    function getData($page,$pageSize){//获取数据,可使用各种语言替换^_^
      var $data = [];
      for (var $i=($page-1)*$pageSize+1; $i <=$page*$pageSize ; $i++) { 
        $data.push( {
          id:$i,
          name:'name'+$i
        });
      }
      var $returnData = {'data':$data,'total':103};
      return $returnData;
    }

    var vm = new Vue({
      el: '#table',
      data: {
        listData:[],
        page: 1,//当前页码
        pageSize: 10,//每页条数
        total:0,//总数
        pageData: {
          curPage: 1,
          pageSize: 10,
          total: 0,
          totalPage: 0,
          pageIndex: [],
          itemStart: 0,
          itemEnd: 0
        }
      },
      methods:{
        listItems: function () {//列出需要的数据
          var returnData =getData(this.page,this.pageSize);
          this.listData = returnData.data;
          this.total=returnData['total'];
          this.setPageList(this.total, this.page, this.pageSize);
        },
        editItem:function ($id) {//编辑操作在这儿哟
          alert('编辑第'+$id+'条数据!');
        },
        deleteItem:function ($id) {//这里可以删除数据
          alert('删除第'+$id+'条数据!');
        },
        setPageList: function (total, page, pageSize) {
        total = parseInt(total);
        var curPage = parseInt(page);
        pageSize = parseInt(pageSize);
        var totalPage = Math.ceil(total / pageSize);
        var itemStart = (curPage - 1) * pageSize + 1;
        if (curPage == totalPage) {
          itemEnd = total;
        } else {
          itemEnd = curPage * pageSize;
        }
        var pageIndex = [];
        if (curPage >= 1 && curPage <= totalPage) {
          if (totalPage < 5) {//5页以内
            for (var $i = 1; $i <= totalPage; $i++) {
              pageIndex.push($i);
            }
          } else {//大于5页
            if (curPage == 1) {
              pageIndex = [curPage, curPage + 1, curPage + 2, curPage + 3, curPage + 4];
            } else if (curPage == 2) {
              pageIndex = [curPage - 1, curPage, curPage + 1, curPage + 2, curPage + 3];
            } else if (curPage == totalPage - 1) {
              pageIndex = [curPage - 3, curPage - 2, curPage - 1, curPage, totalPage];
            } else if (curPage == totalPage) {
              pageIndex = [curPage - 4, curPage - 3, curPage - 2, curPage - 1, curPage];
            } else {
              pageIndex = [curPage - 2, curPage - 1, curPage, curPage + 1, curPage + 2];
            }
          }
        }

        this.pageData.curPage = curPage;
        this.pageData.pageSize = pageSize;
        this.pageData.total = total;
        this.pageData.totalPage = totalPage;
        this.pageData.pageIndex = pageIndex;
        this.pageData.itemStart = itemStart;
        this.pageData.itemEnd = itemEnd;
      },
      changeCurPage: function (page, pageSize) {//换页
        this.page = page;
        this.pageSize = pageSize;
        this.listItems();
      },
      goPage: function (pageSize, totalPage) {//跳转页
        var pageIndex = this.$refs.goPage.value;
        if (pageIndex <= 0) {
          pageIndex = 1;
          this.$refs.goPage.value = 1;
        } else if (pageIndex >= totalPage) {
          pageIndex = totalPage;
          this.$refs.goPage.value = totalPage;
        }
        this.changeCurPage(pageIndex, pageSize);
      }
      }
    });

    window.onload = function(){
     console.log('Hello World!');
     vm.listItems();
    }; 
    </script>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
instanceof和typeof运算符的区别详解
Jan 06 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 #Javascript
Vue实现web分页组件详解
Nov 28 #Javascript
基于vue2实现左滑删除功能
Nov 28 #Javascript
JavaScript生成简单等差数列
Nov 28 #Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 #Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 #Javascript
浅谈vue中慎用style的scoped属性
Nov 28 #Javascript
You might like
php 图像函数大举例(非原创)
2009/06/20 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
PHP实现八皇后算法
2019/05/06 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
js有序数组的连接问题
2013/10/01 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
angularJs中datatable实现代码
2017/06/03 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
python使用htmllib分析网页内容的方法
2015/05/08 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python操作qml对象过程详解
2019/09/26 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
Python接收手机短信的代码整理
2020/08/02 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
工作表现评语
2014/01/19 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
工作证明格式范文
2015/06/15 职场文书
小学运动会加油词
2015/07/18 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang