原理就是利用Layui的分页组件和Vue组件的模板渲染功能。

我下面直接贴代码，比较直观。

index.html

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href="/international/Content/plugins/layui-v2.2.45/css/layui.css" media="all" />

</head>

<body>

<!--列表-->

<div id="vueContainer">

    <table class="layui-table" lay-filter="test">

        <thead>

            <tr>

                <th width="10%">ID</th>

                <th width="50%">语言名称</th>

                <th width="40%">语言备注</th>

            </tr>

        </thead>

        <tbody>

            <tr v-for="item in translateLanguages">

                <td>{{item.Id}}</td>

                <td>{{item.LangName}}</td>

                <td>{{item.LangComment}}</td>

            </tr>

        </tbody>

    </table>

</div>

<!--分页容器-->

<div id="pagination"></div>

<script src="/international/Content/js/jquery-2.1.1.min.js"></script>

<script src="/international/Content/plugins/layui-v2.2.45/layui.js"></script>

<script src="/international/Content/js/vue.js"></script>

<script src="/international/Content/js/translate/translateLanguage/list.js"></script>

</body>

</html>

list.js

//使用Vue渲染模板，初始化时是没有数据的，需要ajax请求拿到数据

var vue = new Vue({

    el: "#vueContainer",

    data: {

        translateLanguages: null

    }

});

//使用layui分页

layui.use('laypage', function () {

    var laypage = layui.laypage;

    laypage.render({

        elem: 'pagination'

        , count: totalCount

        , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']

        , jump: function (obj, first) {

            //点击非第一页页码时的处理逻辑。比如这里调用了ajax方法，异步获取分页数据

            if (!first) {

                pagination(obj.curr, obj.limit);//第二个参数不能用变量pageSize，因为当切换每页大小的时候会出问题

            }

        }

    });

});

var pageIndex = 1;

var pageSize = 10;

var totalCount = 0;

pagination(pageIndex, pageSize);

function pagination(pageIndex, pageSize) {

    //查询条件

    var param = {

        pageIndex: pageIndex,

        pageSize: pageSize,

        //其它查询条件可在下面添加

    };

    $.ajax({

        type: 'POST',

        url: '/international/translatelanguage/getlist',

        dataType: 'json',

        data: param,

        async: false,//这里设置为同步执行，目的是等数据加载完再调用layui分页组件，不然分页组件拿不到totalCount的值

        success: function (data) {

            vue.translateLanguages = data.data;

            totalCount = data.count;

        }

    });

};

使用Layui和Vue实现分页的更多相关文章

  1. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  2. JS(vue iview)分页解决方案

    JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...

  3. 基于vue的分页插件

    相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...

  4. Layui 点击查询分页，页码不刷新解决方法

    Layui 点击查询分页,页码不刷新解决方法 function queryDataGrid() { layui.table.reload(tableName, { where: { //设定异步数据接 ...

  5. 新人 记录VUE中分页实现

    关于函数传值 this.getPurchaseHistoryData(index, num,timeType);第一位是显示的页数,第二是控制首页4上一页-1下一页是2末页是5 第三是是对昨天是1,今 ...

  6. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  7. vue day5 分页控件 更新 PagedList.mvc 仿

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

  8. vue day6 分页显示

    @{ ViewBag.Title = "Home Page"; Layout = null; } <!DOCTYPE html> <html> <he ...

  9. vue day5 分页控件

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

随机推荐

  1. WPF中ListBox的绑定

    WPF中列表式控件派生自ItemsControl类,继承了ItemsSource属性.ItemsSource属性可以接收一个IEnumerable接口派生类的实例作为自己的值(所有可被迭代遍历的集合都 ...

  2. 「要买车网」免费获取汽车电商要买车网购车优惠券 - 持续更新（2016-03-12）www.fortunelab.cn

    汽车电商要买车网简介 “要买车”(www.yaomaiche.com)网站是上海运图投资有限公司旗下网站,是首家真正打通交易闭环的汽车电商网站,由中国电子商务成功探索者——卜广齐于2014年10月在上 ...

  3. win7 64位mysql安装及navicat 解压版

    教程:http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html Mysql修改设置root密码的命令及方法:http://jingy ...

  4. 007_苹果Mac系统锁屏不待机效果设置方法介绍

    Mac如何设置锁屏不断网?Mac如何设置锁屏不待机?这是一个非常麻烦的设置,有时候一锁屏幕电脑就跟着待机了,这非常的麻烦,所以今天小编就用图文教程的方式教大家Mac如何设置锁屏不断网Mac如何设置锁屏 ...

  5. 十八、springboot中hibernate配置sessionFactory访问数据库

    前提 在yml或properties文件中配置数据库与数据库连接池 Hibernate配置 几种方式: 方式一: @Configuration public class HibernateConfig ...

  6. C++模板(Templates)

    模板(template)是泛型编程的基础,"泛型"的含义就是没有不依赖具体的数据类型.模板的引入是为了创建一般性的类(模板类)或者函数(模板函数).典型的容器比如迭代器/算法等是泛 ...

  7. ggplot2使用初探

    ggplot2已经成为了R语言中数据可视化的同义词, 这是一个强大的工具, 可以帮助我们制作优良的图表, 创造出令人吃惊的图片, 下面我们一起学习(本博文参考了知乎问题如何使用 ggplot2中黄宝臣 ...

  8. js函数前加分号和感叹号的作用

    js函数前加分号和感叹号是什么意思?有什么用? 一般看JQuery插件里的写法是这样的 (function($) { //... })(jQuery); 今天看到bootstrap的javascrip ...

  9. 《Javascript启示录》要点汇总

    前言:本文是阅读<Javascript启示录>后的一个读书笔记,对本书的要点进行了一个归纳,不是原创内容哦.要想详细了解相关内容,请阅读原书. 对象是由存储值的已命名属性组成的. Java ...

  10. **CI中使用IN查询(where_in)

    注意别漏了$this->db->get(); /** * 匹配用户手机号,返回匹配的用户列表 * @param $column_str 'user_id, user_name, user_ ...