vue分页

1.依赖文件

<link href="/css/index.css" rel="stylesheet" type="text/css" />
<script src="/js/bootstrap/jquery-2.1.4.min.js"></script>
<link href="/css/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" />

<script src="/js/bootstrap/bootstrap.js"></script>
<script src="/js/vue/vue.js"></script>
<script src="/js/index.js"></script>

 

2.HTML代码

<div id="material">
    <!--领域-->
    <div id="area">
        <div class="btn-group" role="group" aria-label="...">
            <button @click="selectArea(0,$event)" type="button"
            class="btn btn-default active" style="margin-right: 5px;">全部</button>
            <button @click="selectArea(item.id,$event)" v-for="item in areas" type="button" class="btn btn-default">
                {{item.name}}
            </button>
        </div>
    </div>
    <!--时间-->
    <div id="intime">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default active" style="margin-right: 5px;" name="0">全部</button>
            <button type="button" class="btn btn-default" name="1">一小时内</button>
            <button type="button" class="btn btn-default" name="8">八小时内</button>
            <button type="button" class="btn btn-default" name="24">二十四小时内</button>
            <button type="button" class="btn btn-default" name="168">一周内</button>
            <button type="button" class="btn btn-default" name="720">一个月内</button>
            <button type="button" class="btn btn-default" name="8640">一年内</button>
        </div>

    </div>
    <!--原创[1]、网络[0]-->
    <div id="original">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default active" name="1" style="margin-right: 5px;">原创</button>
            <button type="button" class="btn btn-default" name="0">网络</button>
        </div>
    </div>

    <div id="articles">
        <!--搜索-->
        <div id="search">
            <div class="input-group">
                <input type="text" :value="keyWord" @keyup.enter="search(1)" id="keyWord" class="form-control"
                       placeholder="请输入文章关键字" aria-describedby="basic-addon2">
                <span class="input-group-addon" @click.stop="search(1)">搜索</span>
            </div>
        </div>
        <table class="table">
            <thead>
            <tr>
                <th>
                    领域
                </th>
                <th>
                    标题
                </th>
                <th>
                    作者
                </th>
                <th>
                    发布时间
                </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in articles" class="">
                <td>
                    {{item.area.name}}
                </td>
                <td>
                    <a :href="'/article/detail?id='+item.id" target="_blank">{{item.title}}</a>
                </td>
                <td>
                    {{item.ower.username}}
                </td>
                <td>
                    {{item.shortDate.substring(0,item.shortDate.length-4)}}
                </td>
            </tr>
            </tbody>
        </table>
        <!--分页开始-->
        <div id="app">
            <page :allpage="allpage"></page>
        </div>
        <!--分页结束-->
    </div>
</div>

 

3.js

(function(){

    $(function () {
        //登录后不再显示登录按钮
        // $('.loginLi').addClass('login-toggle');

        $('.panel-default').click(function () {
            console.log(this.id)
            // $(this).siblings().find('.panel-collapse').removeClass('in')
            $(this).addClass('selectedBackground');
            $(this).siblings().removeClass('$(this).siblings()')
        })
    });

    var current=1;
    //局部注册
    Vue.component("page",{
        template:'<ul class="pagination" >\n' +
        '    <li v-show="current != 1" @click="current>1 && goto(current-1)" ><a>上一页</a></li>\n' +
        '    <li :id="\'li\'+index" v-for="index in pages" @click="goto(index)" :class="{\'active\':current == index}" :key="index">\n' +
        '        <a >{{index}}</a>\n' +
        '    </li>\n' +
        '    <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a >下一页</a></li>\n' +
        '    <li ><a >共{{allpage}}页</a></li>'+
        '</ul>',
        props:{
            // current:{
            //     type:Number,
            //     default:1
            // },
            allpage:{ //总页数,和父组件同步
                type:Number,
                default:1
            },
        },
        data:function(){
            return{
                current:1,
                showItem:5
            }
        },
        computed:{
            pages:function(){
                var pag = [];
                if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
                    //总页数和要显示的条数那个大就显示多少条
                    var i = Math.min(this.showItem,this.allpage);
                    while(i){
                        pag.unshift(i--);
                    }
                }else{ //当前页数大于显示页数了
                    var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
                        i = this.showItem;
                    if( middle >  (this.allpage - this.showItem)  ){
                        middle = (this.allpage - this.showItem) + 1
                    }
                    while(i--){
                        pag.push( middle++ );
                    }
                }
                return pag
            }
        },
        methods:{
            goto:function(index){
                if(index == this.current) return;
                this.current = index;
                //这里可以发送ajax请求
                Articles.search(index);
            }
        }
    })

    var Articles = new Vue({
        el:"#articles",
        data:{
            //一页容量
            pageSize:5,
            //当前页
            pageIndex:1,
            allpage:10, //总页数
            //领域
            area:0,
            //time
            time:0,
            original:1,
            keyWord:"",
            articles:[]
        },
        methods:{
            //初始化,第一页，筛选【all，all，all】
            init:function(){
                this.pageIndex=1;
                this.setAllPage()
                this.search(1)
            },
            // 根据标题关键字筛选 动态搜索 返回bool类型
            search:function(pageIndex){
                this.setAllPage();
                this.articles=[]
                var _this=this
                var params={}
                params.pageIndex=pageIndex
                params.pageSize=this.pageSize
                params.area=this.area
                params.time=this.time
                params.keyWord=this.keyWord
                params.original=this.original
                $.ajax({
                    url:"/article/getArticleRange",
                    type:"post",
                    data:params,
                    success:function (rs) {
                        console.log(rs)
                        for(i in rs){
                            _this.articles.push(rs[i])
                        }
                    },
                    error:function () {
                        alert("文章加载失败")
                    }
                })

            },
            //计算总页数
            setAllPage:function () {
                var _this = this
                var params={}
                params.pageSize=this.pageSize
                params.area=this.area
                params.time=this.time
                params.keyWord=this.keyWord
                params.original=this.original
                $.ajax({
                    url:'/article/getAllPage',
                    type:'post',
                    data:params,
                    success:function(rs){
                        _this.allpage=rs
                    },error:function () {

                    }
                })
            },
        }
    })

    //分页


    //领域
    var AreaVue = new Vue({
        el:"#area",
        data:{
            // areas:[{id:1,name:"法律"},{id:2,name:"十九大"},
            //     {id:3,name:"技术"},{id:4,name:"移民"}],
            areas:[],
            d:[1,2,3,4,5]
        },
        methods:{
            init:function(){
                var _this=this
                $.ajax({
                    url:"/area/getAreas",
                    type:"post",
                    success:function(rs){
                        for(i in rs){
                            //这里的this作用域
                            _this.areas.push(rs[i])
                        }
                    },error:function () {
                        alert("获取领域信息失败")
                    }
                })
            },
            //事件
            selectArea:function (id,event) {
                //颜色
                $(event.target).addClass("active")
                $(event.target).siblings().removeClass("active")
                Articles.area=id
                //更换领域，第一页
                Articles.search(1)
                $('#li1').click()
            }
        }
    })
    AreaVue.init()
    Articles.init()
    //搜索
    // $('#basic-addon2').click(function () {
    //     // alert(Articles.keyWord)
    //     Articles.search(1)
    // })

    //事件
    $("#intime button").click(function () {
        //颜色
        $(this).addClass("active")
        $(this).siblings().removeClass("active")
        //查询
        var time=$(this).attr('name')
        Articles.time=time
        Articles.search(1)
        $('#li1').click()
    })
    $("#original button").click(function () {
        console.log(this)
        //颜色
        $(this).addClass("active")
        $(this).siblings().removeClass("active")
        //查询
        var original=$(this).attr('name')
        Articles.original=original
        Articles.search(1)
        $('#li1').click()
    })
    $("#keyWord").change(function () {
        Articles.keyWord=this.value
    })
    $("#basic-addon2").click(function () {
        Articles.search(1)
    })

})()

 

 

 

 

 

 

 

 

 

 

 

 

 

end