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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 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之Smarty入门
2007/01/04 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
JavaScript编码小技巧分享
2020/09/17 Javascript
Python里隐藏的“禅”
2014/06/16 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
python进行参数传递的方法
2020/05/12 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
活动总结报告怎么写
2014/07/03 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
避暑山庄导游词
2015/02/04 职场文书
Nginx快速入门教程
2021/03/31 Servers
Python matplotlib绘制雷达图
2022/04/13 Python