受欢迎的博客标签

vue2.0与bootstrap3实现列表分页,直接引入vue的js文件进行页面渲染分页

Published

直接引入vue的js文件进行页面渲染分页

<!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)" 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)" 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)" 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)" 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)" 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)" 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>