Vue.js實現分頁

本文轉載自查看原文 2019-05-02 12:38 2563 Vue.js的學習筆記
效果圖
代碼
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用戶管理頁面</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dashboard.css" rel="stylesheet">

    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <!-- 異步提交的庫 -->
    <script src="js/vue-resource.min.js"></script>
    <style>
        .page-div-style {
            width: 100%;
            text-align: center;
        }


    </style>
</head>
<body>

<!-- container自適應 -->
<div class="container">
    <!-- 為表格添加基礎樣式 ，
        .table為任意<table>添加基本樣式，
        .table-striped可以給tbody之內的每一行添加斑馬條紋樣式
        .table-bordered為表格和其中的每個單元格增加邊框
    -->


    <table class="table table-bordered">
        <!-- 表格標題行的容器元素，用來識別表格列 -->
        <thead>
        <tr>
            <!-- 特殊的表格單元格，用來識別行或列 -->
            <th>序號</th>
            <th>用戶名</th>
            <th>昵稱</th>
            <th>手機號</th>
            <th>郵箱</th>
            <th>操作</th>
        </tr>
        </thead>
        <!-- 表格主題中的表格行的容器元素 -->
        <tbody id="example">
        <!-- 一組出現在單行單元格的容器元素 -->
        <tr v-for="item in items">
            <td> {{ item.num }}</td>
            <td> {{ item.username }}</td>
            <td> {{ item.avatar }}</td>
            <td> {{ item.phone }}</td>
            <td> {{ item.email }}</td>
            <td>
                <!--<button class="btn btn-warning" v-bind:value="item.id" v-on:click="reviewClick">
                    審核
                </button>-->
                <button class="btn btn-warning" v-bind:value="item.id" v-on:click="editorClick">
                    編輯
                </button>
                <!--
                     data-target：想要在頁面上加載的模擬框的目標。
                     data-toggle：用於打開模態窗口。
                 -->
                <button class="btn btn-warning" v-bind:value="item.id" v-on:click="deleteClick">
                    刪除
                </button>


            </td>
        </tr>
        </tbody>
    </table>
    <div class="page-div-style" id="page">
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item" v-show="isShowPrevious"><a class="page-link" v-on:click="previous">Previous</a>
                </li>
                <li class="page-item" v-for="item in pageCounts" v-on:click="pageClick"
                    v-bind:class="{active : item.isActive}">
                    <a class="page-link">{{item.pages}}</a>

                <li class="page-item">
                    <a class="page-link" v-show="isShowNext" v-on:click="next">Next</a>
                </li>
            </ul>
        </nav>
       
      
    </div>

</div>

</body>
<script>
   var v = new Vue({
        el: '#page',
        data: {
            pageCounts: [],
            curPage: 1,
            start: 1,
            end: 5,
            total: 0,
            pageCount: 5,
            pages: 0,
            isShowPrevious: false,
            isShowNext: false,
        },
        methods: {
            next() {
                v.curPage++;
                var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
                sendPost(param);
            },
            previous() {
                v.curPage--;
                var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
                sendPost(param);
            },
            pageClick(event) {
                //
                v.curPage = event.target.innerHTML;
                var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
                sendPost(param);
                console.log(event.target.innerHTML);
            }
        }
    })
    var vm = new Vue({
        el: '#example',
        data: {
            items: [],
        },
        methods: {
            reviewClick(event) {
                //獲取id

            },
            editorClick(event) {
                //獲取id
                //console.log(event.target.value);
                var userIframe = window.parent.document.getElementById('userIframe');
                userIframe.src = "user_info.html?id=" + event.target.value;
                //window.location.href = "user_info.html?id=" + event.target.value;
            },
            deleteClick(event) {
                Vue.http.get('/deleteUserById/' + event.target.value).then(function (res) {
                    console.log(JSON.parse(res.bodyText));
                    var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
                    sendPost(param);
                }, function (res) {

                })
                console.log("刪除" + event.target.value);
            },
        }
    })
    var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}

    sendPost(param);

    function sendPost(param) {
        Vue.http.post('/allUser', param).then(function (res) {
                //請求成功
                var result = JSON.parse(res.bodyText);
                var data = result[0];
                var sum = result[1];
                v.total = Math.ceil((sum.total / sum.pageCount));
                if (v.total < 5)
                    v.end = v.total;
                //將分頁的數據清空為0
                v.pageCounts.length = 0;
                //判斷上一頁、下一頁是否顯示
                if (sum.curPage == 1 && v.total == 1) {
                    v.isShowPrevious = false;
                    v.isShowNext = false;
                } else if (sum.curPage == 1 && v.total != 1 && v.total != 0) {
                    v.isShowPrevious = false;
                    v.isShowNext = true;
                } else if (sum.curPage == v.total) {
                    v.isShowPrevious = true;
                    v.isShowNext = false;
                } else {
                    v.isShowPrevious = true;
                    v.isShowNext = true;
                }
                if (v.curPage == v.end && v.end < v.total) {
                    v.start++;
                    v.end++;
                } else if (v.curPage == v.start && v.start > 1) {
                    v.start--;
                    v.end--;
                }
                //獲取顯示的椰樹
                for (var i = v.start; i <= v.end; i++) {
                    v.pageCounts.push({
                        pages: i,
                        isActive: i == v.curPage ? true : false,
                    })
                }

                //獲取服務端傳遞過來的數據，
                vm.items.length = 0;
                for (var i = 0; i < data.length; i++) {
                    //觸發數組更新
                    vm.items.push({
                        num: (parseInt([i]) + 1),
                        username: data[i].username,
                        phone: data[i].phone,
                        email: data[i].email,
                        avatar: data[i].avatar,
                        id: data[i].id,
                    })
                }


            }
            ,

            function (res) {
                //請求失敗
            }
        );
    }
</script>
</html>
免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找 Vue.js分頁組件實現：diVuePagination Vue.js實現下拉無限刷新分頁基於Vue.js的表格分頁組件 Vue.js的表格分頁組件 Vue.js 是如何實現 MVVM 的？ Vue.js 源碼實現 Vue.js 開發實踐：實現精巧的無限加載與分頁功能 Vue.js 2 vs Vue.js 3的實現 – 雲棲社區 vue.js 分頁加載，向上滑動，依次加載數據。 Vue.js實現注冊功能