vue day8 table page

ゝ一纸荒年。 2022-01-06 02:04 134阅读 0赞

@{
        ViewBag.Title = "Home Page";
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>分页</title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    </head>
    <body>
    
        <div id="app-4" class="col-xs-12 main-table-wrapper">
            <table class="table table-striped table-hover table-bordered" id="main-table">
                <thead>
                    <tr>
                        <th><input type="checkbox" v-model="checkall" v-on:click='checkAll'></th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>数量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in tableData">
                        <td><input type="checkbox" v-model="checked" :value="item.id" />   </td>
                        <td>{
        { item.name }}</td>
                        <td>{
        { item.address }}</td>
                        <td>{
        { item.date }}</td>
                        @*<td><button @click="handleRemove(index)">移除</button></td>*@
    
                    </tr>
    
    
                </tbody>
            </table>
            <div>{
        {
        checked}}</div>
        </div>
        <ul class="pagination" id="page-break" v-if="seen">
            <li v-if="cur>5">
                <a v-on:click="cur=1,pageClick()" style="cursor:pointer">««</a>
            </li>
            <li v-if="cur>1">
                <a v-on:click="cur--,pageClick()" style="cursor:pointer">«</a>
            </li>
            <li v-if="cur-5>0">
                <a style="cursor:not-allowed">...</a>
            </li>
            <li v-for="item in indexs" v-bind:class="{'active':cur==item}">
                <a v-on:click="btnClick(item), pageClick()" style="cursor:pointer">{
        {item}}</a>
            </li>
            <li v-if="all-cur-4>0">
                <a style="cursor:not-allowed">...</a>
            </li>
            <li v-if="cur!=all">
                <a v-on:click="cur++,pageClick()" style="cursor:pointer">»</a>
            </li>
            <li v-if="cur!=all && all>10 && all-cur-4>0">
                <a v-on:click="cur=all,pageClick()" style="cursor:pointer">»»</a>
            </li>
            <li><a>Page {
        {cur}} of {
        {all}}</a></li>
        </ul>
    
        <script>
    
    
    
    
    
            var app = new Vue({
                el: '#app-4',
                data: {
                    tableData: [
                    ],
                    checkall:false,
                    checked:[]
                },
                methods: {
                    handleRemove: function(index){
                            this.tableData.splice(index,1);
                        },
                    checkAll: function () {
                        var _this = this
                        if (this.checkall) {
                        // 实现反选
                            this.checked = []
                        } else {
                        // 实现全选
                            this.checked = []
                            this.tableData.forEach(function (item) {
                                _this.checked.push(item.id)
                            })
                        }
                        if (this.checked.length === this.tableData.length) {
                            this.checkall = true
                        // console.log(this.checkall)
                        // console.log(this.checked)
                        }
                    }
                }
            });
    
            var app1=new Vue({
                    el: '#page-break',
                    data: {
         
    　　　　　　　　　　　　seen: true,
                        cur: 1,
                        all: 2
    
                    },
                    watch: {
                        cur: function(newValue, oldValue){
                            console.log(arguments);
                        }
                    },
                    methods: {
                        btnClick(num){
                            if(num!=this.cur){
                                this.cur=num;
                            }
                        },
                        pageClick(){
                            console.log('现在是'+this.cur+'页')
                            loaddata(this.cur);
                        },
                    },
                    computed: {
                        indexs(){
                            var left = 1;
                            var right = this.all;
                            var arr = [];
                            if(this.all>=10){
                                if(this.cur>5 && this.cur<this.all-4){
                                    left = this.cur-4;
                                    right = this.cur+4;
                                }else if(this.cur<=6){
                                    left=1;
                                    right=10;
                                }else{
                                    left=this.all-9;
                                    right=this.all;
                                }
                            }
                            while(left<=right){
                                arr.push(left);
                                left++;
                            }
                            return arr;
                        }
                    }
                })
    
            function loaddata(page)
            {
                $.ajax({
                    url: "@Url.Action("Data")",
                    type: "Post",
                    data: { pageIndex: page },
                dataType: "json",
                success: function (data) {
                    app.tableData = data.rows;
                    app1.all = data.total % 10 == 0 ? (data.total / 10) : (Math.floor(data.total / 10) + 1);
                },
                error: function (jqXHR, textStatus, errorThrown) {
    
                }
            });
            }
            loaddata(1);
    
    
        </script>
    </body>
    </html>

public JsonResult Data(int pageIndex = 1, int pageSize = 10)
            {
                var product = new[]
              {
                    new {id=1,date= "2016-05-02", name= "王小虎",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=2,date= "2016-04-02", name= "王小虎2",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=3,date= "2016-06-02", name= "王小虎3",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=4,date= "2016-07-02", name= "王小虎4",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=5,date= "2016-08-02", name= "王小虎5",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=6,date= "2016-09-02", name= "王小虎6",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=7,date= "2016-10-02", name= "王小虎7",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=8,date= "2016-11-02", name= "王小虎8",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=9,date= "2016-11-02", name= "王小虎8",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=11,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=12,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=13,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=14,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=15,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=16,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=17,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=18,date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
                    new {id=19,date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
              };
        
                return Json(new { total = product.Count(), rows = product.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList() }, JsonRequestBehavior.AllowGet);
            }

转载于:https://www.cnblogs.com/LiuFengH/p/10669381.html