@{ ViewBag.Title = "Home Page"; Layout = null; } <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>分页</title> <style> * { margin: 0; padding: 0; } #page-break { margin-top: 20px; margin-left: 20px; } #page-break li { list-style: none; } #page-break a { border: 1px solid #ddd; text-decoration: none; float: left; padding: 6px 12px; color: #337ab7; cursor: pointer; } #page-break a:hover { background-color: #eee; } #page-break a .banclick { cursor: not-allowed; } #page-break .active a { color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; } #page-break i { font-style: normal; color: #d44950; margin: 0px 4px; font-size: 12px; } #page-break .jumpbox .jumppage { border: 1px solid #ddd; margin-left: 40px; height: 33px; 40px; float: left; } #page-break .jumpbox .jumpbtn { cursor: pointer; margin-left: 10px; } #page-break .jumpbox .jumpbtn:active { color: #337ab7; } </style> <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>姓名</th> <th>日期</th> <th>地址</th> </tr> </thead> <tbody> <tr v-for="item in tableData"> <td>{{ item.name }}</td> <td>{{ item.address }}</td> <td>{{ item.date }}</td> </tr> </tbody> </table> </div> <div id="page-break"> <ul> <li v-if="cur>1"> <a v-on:click="cur--,pageClick()">上一页</a> </li> <li v-if="cur==1"> <a class="banclick">上一页</a> </li> <li v-for="item in indexs" v-bind:class="{'active':cur==item}"> <a v-on:click="btnClick(item), pageClick()">{{item}}</a> </li> <li v-if="cur!=all"> <a v-on:click="cur++,pageClick()">下一页</a> </li> <li v-if="cur==all"> <a class="banclick">下一页</a> </li> <li><a>共<i>{{all}}</i>页</a></li> <div class="jumpbox"> <input type="text" class="jumppage" /> <a class="jumpbtn" v-on:click="pageSkip()">跳转</a> </div> </ul> </div> <script> var app = new Vue({ el: '#app-4', data: { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }); var app1 = new Vue({ el: '#page-break', data: { cur: 1, all: 20 }, 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); }, pageSkip() { var maxPage = this.all; var skipPage = Number(document.getElementsByClassName("jumppage")[0].value); console.log(typeof skipPage); if (!skipPage) { alert("请输入跳转页码"); return; } else if (skipPage < 1 || skipPage > maxPage) { alert("您输入的页码超过页数范围了！"); return; } else { //this.cur=skipPage; this.btnClick(skipPage); this.pageClick(); } } }, computed: { indexs() { var left = 1; var right = this.all; var arr = []; if (this.all >= 7) { if (this.cur > 4 && this.cur < this.all - 3) { left = this.cur - 3; right = this.cur + 3; } else if (this.cur <= 4) { left = 1; right = 7; } else { left = this.all - 6; 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 {date= "2016-05-02", name= "王小虎",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-04-02", name= "王小虎2",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-06-02", name= "王小虎3",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-07-02", name= "王小虎4",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-08-02", name= "王小虎5",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-09-02", name= "王小虎6",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-10-02", name= "王小虎7",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎8",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎8",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-34", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-05", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-01", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-04", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"}, new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"}, }; return Json(new { total = product.Count(), rows = product.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList()}, JsonRequestBehavior.AllowGet); }