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 相关文章推荐
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
浅谈javascript的调试
Jan 28 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
ES6中数组array新增方法实例总结
Nov 07 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实现猴子选大王问题算法实例
2015/04/20 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
JS中递归函数
2016/06/17 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
Element input树型下拉框的实现代码
2018/12/21 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
js实现动态时钟
2020/03/12 Javascript
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Python urllib3软件包的使用说明
2020/11/18 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
家长会邀请书
2014/01/25 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书