1. @{
  2.     ViewBag.Title = "Home Page";
  3.     Layout = null;
  4. }
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9.     <title>分页</title>
  10.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  11.     <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  12.  
  13.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  14.  
  15. </head>
  16. <body>
  17.  
  18.     <div id="app-4" class="col-xs-12 main-table-wrapper">
  19.         <table class="table table-striped table-hover table-bordered" id="main-table">
  20.             <thead>
  21.                 <tr>
  22.                     <th><input type="checkbox" v-model="checkall" v-on:click='checkAll'></th>
  23.                     <th>商品名称</th>
  24.                     <th>商品单价</th>
  25.                     <th>数量</th>
  26.                 </tr>
  27.             </thead>
  28.             <tbody>
  29.                 <tr v-for="(item,index) in tableData">
  30.                     <td><input type="checkbox" v-model="checked" :value="item.id" />   </td>
  31.                     <td>{{ item.name }}</td>
  32.                     <td>{{ item.address }}</td>
  33.                     <td>{{ item.date }}</td>
  34.                     @*<td><button @click="handleRemove(index)">移除</button></td>*@
  35.  
  36.                 </tr>
  37.  
  38.             </tbody>
  39.         </table>
  40.         <div>{{checked}}</div>
  41.     </div>
  42.     <ul class="pagination" id="page-break" v-if="seen">
  43.         <li v-if="cur>5">
  44.             <a v-on:click="cur=1,pageClick()" style="cursor:pointer">&laquo;&laquo;</a>
  45.         </li>
  46.         <li v-if="cur>1">
  47.             <a v-on:click="cur--,pageClick()" style="cursor:pointer">&laquo;</a>
  48.         </li>
  49.         <li v-if="cur-5>0">
  50.             <a style="cursor:not-allowed">...</a>
  51.         </li>
  52.         <li v-for="item in indexs" v-bind:class="{'active':cur==item}">
  53.             <a v-on:click="btnClick(item), pageClick()" style="cursor:pointer">{{item}}</a>
  54.         </li>
  55.         <li v-if="all-cur-4>0">
  56.             <a style="cursor:not-allowed">...</a>
  57.         </li>
  58.         <li v-if="cur!=all">
  59.             <a v-on:click="cur++,pageClick()" style="cursor:pointer">&raquo;</a>
  60.         </li>
  61.         <li v-if="cur!=all && all>10 && all-cur-4>0">
  62.             <a v-on:click="cur=all,pageClick()" style="cursor:pointer">&raquo;&raquo;</a>
  63.         </li>
  64.         <li><a>Page {{cur}} of {{all}}</a></li>
  65.     </ul>
  66.  
  67.     <script>
  68.  
  69.         var app = new Vue({
  70.             el: '#app-4',
  71.             data: {
  72.                 tableData: [
  73.                 ],
  74.                 checkall:false,
  75.                 checked:[]
  76.             },
  77.             methods: {
  78.                 handleRemove: function(index){
  79.                         this.tableData.splice(index,);
  80.                     },
  81.                 checkAll: function () {
  82.                     var _this = this
  83.                     if (this.checkall) {
  84.                     // 实现反选
  85.                         this.checked = []
  86.                     } else {
  87.                     // 实现全选
  88.                         this.checked = []
  89.                         this.tableData.forEach(function (item) {
  90.                             _this.checked.push(item.id)
  91.                         })
  92.                     }
  93.                     if (this.checked.length === this.tableData.length) {
  94.                         this.checkall = true
  95.                     // console.log(this.checkall)
  96.                     // console.log(this.checked)
  97.                     }
  98.                 }
  99.             }
  100.         });
  101.  
  102.         var app1=new Vue({
  103.                 el: '#page-break',
  104.                 data: {
    　　　　　　　　　　　　seen: true,
  105.                     cur: ,
  106.                     all: 2
  107.                 },
  108.                 watch: {
  109.                     cur: function(newValue, oldValue){
  110.                         console.log(arguments);
  111.                     }
  112.                 },
  113.                 methods: {
  114.                     btnClick(num){
  115.                         if(num!=this.cur){
  116.                             this.cur=num;
  117.                         }
  118.                     },
  119.                     pageClick(){
  120.                         console.log('现在是'+this.cur+'页')
  121.                         loaddata(this.cur);
  122.                     },
  123.                 },
  124.                 computed: {
  125.                     indexs(){
  126.                         var left = ;
  127.                         var right = this.all;
  128.                         var arr = [];
  129.                         if(this.all>=){
  130.                             if(this.cur> && this.cur<this.all-){
  131.                                 left = this.cur-;
  132.                                 right = this.cur+;
  133.                             }else if(this.cur<=){
  134.                                 left=;
  135.                                 right=;
  136.                             }else{
  137.                                 left=this.all-;
  138.                                 right=this.all;
  139.                             }
  140.                         }
  141.                         while(left<=right){
  142.                             arr.push(left);
  143.                             left++;
  144.                         }
  145.                         return arr;
  146.                     }
  147.                 }
  148.             })
  149.  
  150.         function loaddata(page)
  151.         {
  152.             $.ajax({
  153.                 url: "@Url.Action("Data")",
  154.                 type: "Post",
  155.                 data: { pageIndex: page },
  156.             dataType: "json",
  157.             success: function (data) {
  158.                 app.tableData = data.rows;
  159.                 app1.all = data.total %  ==  ? (data.total / ) : (Math.floor(data.total / ) + );
  160.             },
  161.             error: function (jqXHR, textStatus, errorThrown) {
  162.  
  163.             }
  164.         });
  165.         }
  166.         loaddata();
  167.  
  168.     </script>
  169. </body>
  170. </html>
  1.   public JsonResult Data(int pageIndex = , int pageSize = )
  2.         {
  3.             var product = new[]
  4.           {
  5.                 new {id=,date= "2016-05-02", name= "王小虎",address="上海市普陀区金沙江路 1518 弄"},
  6.                 new {id=,date= "2016-04-02", name= "王小虎2",address="上海市普陀区金沙江路 1518 弄"},
  7.                 new {id=,date= "2016-06-02", name= "王小虎3",address="上海市普陀区金沙江路 1518 弄"},
  8.                 new {id=,date= "2016-07-02", name= "王小虎4",address="上海市普陀区金沙江路 1518 弄"},
  9.                 new {id=,date= "2016-08-02", name= "王小虎5",address="上海市普陀区金沙江路 1518 弄"},
  10.                 new {id=,date= "2016-09-02", name= "王小虎6",address="上海市普陀区金沙江路 1518 弄"},
  11.                 new {id=,date= "2016-10-02", name= "王小虎7",address="上海市普陀区金沙江路 1518 弄"},
  12.                 new {id=,date= "2016-11-02", name= "王小虎8",address="上海市普陀区金沙江路 1518 弄"},
  13.                 new {id=,date= "2016-11-02", name= "王小虎8",address="上海市普陀区金沙江路 1518 弄"},
  14.                 new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
  15.                 new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
  16.                 new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
  17.                 new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
  18.                 new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
  19.                 new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
  20.                 new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
  21.                 new {id=,date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
  22.                 new {id=,date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
  23.           };
  24.  
  25.             return Json(new { total = product.Count(), rows = product.Skip((pageIndex - ) * pageSize).Take(pageSize).ToList() }, JsonRequestBehavior.AllowGet);
  26.         }

vue day8 table page的更多相关文章

  1. 关于【vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  2. vue day7 table checkbox 全选

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. vue day4 table

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. vue+ element table如何给指定的单元格添加点击事件？

    今天使用vue,以及element-ui这个框架时,发现业务需要在表格里加一个连接跳转,当时立刻打开element的官网,进行查看http://element-cn.eleme.io/#/zh-CN/ ...

  5. vue.js table组件封装

    table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用em ...

  6. vue导出table内容至excel——转

    一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <template> <div c ...

  7. vue的table组件

    一个vue-table的组件 说明: 1.基于element-ui开发的vue表格组件. 功能: 1.支持树形数据的展示 2.行拖拽排序 3.单元格拖拽排序 github 使用方法: 1.下载npm包 ...

  8. ant design for vue 关于table的一些问题

    1.为table添加分页: :pagination="pagination" pagination: { defaultPageSize: 10, showTotal: (tota ...

  9. vue的table切换

    HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...

随机推荐

  1. php使用gearman进行任务分发

    一.安装gearman 下载gearman源码包 1 https://launchpad.net/gearmand/+download 如: gearmand-1.1.12.tar.gz 下载php的 ...

  2. 清除冗余的css

    下载旧版的火狐浏览器,如Firefox 48.0.exe, 下载地址:https://ftp.mozilla.org/pub/firefox/releases/48.0/win32/zh-CN 关闭更 ...

  3. 与Recommender System相关的会议及期刊

      会议 We refer specifically to ACM Recommender Systems (RecSys), established in 2007 and now the prem ...

  4. 浅析构造函数，及public、private、protected、final、this、super关键字

    初学JAVA,感觉很多知识点不熟悉,看了好多遍教材,最终还是决定把它写下来,加深印象以便忘了的时候再过来复习一下.看上去字数可能比较多,其实内容很简明. 首先看this的用法: package tes ...

  5. JAVA面向对象之重载与重写

    重写:子类对父类方法的重新编写 返回值不变,形参不变 不能抛出新的或者范围更广的异常 class Animal{ public void move(){ System.out.println(&quo ...

  6. mybatis 注解的方式批量插入，更新数据

    一,当向数据表中插入一条数据时,一般先检查该数据是否已经存在,如果存在更新,不存在则新增  使用关键字  ON DUPLICATE KEY UPDATE zk_device_id为主键 model  ...

  7. 责任链模式（Chain of Responsibility)

    定义:为一个请求定义含有链状关系的接受对象,基于请求的类型,松耦合发送者和接受者之间的关系. 实现方式: 首先定义一个抽象类,包括一个公共抽象行为和决定子类链状关系的属性,然后创建一系列对象继承这个抽 ...

  8. selenium中的alter弹框

    from selenium import webdriverimport timedriver=webdriver.Chrome()driver.get('http://ui.imdsx.cn/uit ...

  9. OpenGL4.6+vs2017+CMake+Glad+Glfw-3.2.1+GLM随手记一发完整版OpenGL配置过程

    参考自:https://blog.csdn.net/sigmarising/article/details/80470054 下载过程参考上面的链接. 下载好的OpenGL文件夹我已经做好(具体的版本 ...

  10. win8 tiles风格标签插件jquery.wordbox.js

    http://www.html580.com/12180 jquery.wordbox.js轻松实现win8瓦片tiles式风格标签插件,只需要调用JS就能轻松实现瓦片菜单,自定义菜单背景颜色,支持响 ...