原理就是利用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. Mac OS 下安装mysqlclient报“mysql_config not found”的解决

    如问题所示,应该是你没有将mysql_config所在文件夹加入系统的PATH路径,解决方案下: 1.第一步找到你的mysql_config所在位置 1.1. 如果是直接安装mysql,所在位置应该是 ...

  2. CentOS6.5配置rsyslog

    如何在RHEL 6.5安装和配置rsyslog现在7.6版本/ CentOS的6.5 .The情况是,安装和RHEL / CentOS的6.5安装rsyslog现在集中式日志服务器上.所有的客户端服务 ...

  3. Html5和Css3扁平化风格网页

    前言 扁平化概念的核心意义 去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来.同时在设计元素上,则强调了抽 ...

  4. Hive（六）内置函数与高级操作

    一内置函数 1 数学函数 Return Type Name (Signature) Description DOUBLE round(DOUBLE a) Returns the rounded BIG ...

  5. centos7 关闭默认firewalld，开启iptables

    编者按: 对于使用了centos6系列系统N年的运维来说,在使用centos7的时候难免会遇到各种不适应.比如防火墙问题.本文主要记录怎么关闭默认的firewalld防火墙,重新启用iptables. ...

  6. 【51nod】1564 区间的价值

    题解 这个要注意到一个长度大的区间的最大价值一定比长度小的区间的价值要大 然后我们以每个点为最小值,显然区间越长最大值越大,然后我们更新最大区间长度的取值,这个可以用单调栈求这个最小值能更新到的左右端 ...

  7. codeforces 354 D. Transferring Pyramid

    D. Transferring Pyramid time limit per test 3 seconds memory limit per test 256 megabytes input stan ...

  8. NET生成缩略图

    1.添加一个html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  9. Qt中两种定时器用法

    在Qt中使用定时器有两种方法,一种是使用QObiect类的定时器:一种是使用QTimer类.定时器的精确性依赖于操作系统和硬件,大多数平台支持20ms的精确度. 1.QObject类的定时器 QObj ...

  10. 同步 Visual Studio Code 的设置与插件

    工具推荐:Settings Sync. 小心有坑! VS Code 没有账号系统,所以设置不能同步,在多终端使用时不是很方便. 有一款插件能做这个事情:Settings Sync - Visual S ...