原理就是利用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. jQuery UI 给button添加ID

    $("#addOrEditApp").dialog({ modal: true ,maxHeight:dialogHeight,width:dialog_width,title: ...

  2. Gradle设置代理

    在本地仓库路径下(如果没有修改的话默认C:\Users\用户名\.gradle),或者项目下,新建一个文件gradle.properties systemProp.http.proxyHost=网址 ...

  3. js点击页面其他地方如何隐藏div元素菜单

    web页面常用的一个需求,写下拉菜单是我们往往不是用select_option,而是自定义一个元素列出选项来满足需求,当我们点击按钮出现菜单, 点击按钮或菜单以外页面空白地方隐藏该菜单,这里提供一种简 ...

  4. Hadoop（三）：MapReduce程序（python）

    使用python语言进行MapReduce程序开发主要分为两个步骤,一是编写程序,二是用Hadoop Streaming命令提交任务. 还是以词频统计为例 一.程序开发1.Mapper for lin ...

  5. 云计算IaaS浅谈

    (本篇文章仅仅是整理文档资料时,发现的一篇课程报告,感觉还挺有参考意义的) 最近几年云计算一直是IT业的热点,一股炽热的云计算浪潮席卷了世界,全世界都在讲云计算,都在搞云计算.虽然最初是由谷歌公司提出 ...

  6. Java @SuppressWarnings

    @SuppressWarnings() 注解以@开头可以接受参数 @SuppressWarnings("unchecked") 不受检查的警告信息应该被抑制 //: holding ...

  7. CF1030A 【In Search of an Easy Problem】

    题目巨简单,主要是给大家翻译一下 给n个数,其中存在1就输出HARD,否则输出EASY,不区分大小写 #include<iostream> #include<cstdio> u ...

  8. 使用django发送邮件时的连接超时问题解决

    一.报错 研究报错半天,没看出代码有什么毛病,就是发送邮件时连接超时,发送邮件的连接用户名密码都没有错误,于是就网上各种查... 终于皇天不负有心人,找到答案了.. 在服务器上输入telnet smt ...

  9. 20165203《Java程序设计》第四周学习总结

    教材学习内容总结 第5章 子类与继承 子类的继承性 子类和父类在同一包中的继承性:子类继承父类中不是private的成员变量和方法作为自己的成员变量和方法 子类和父类不在同一包中的继承性:子类只继承父 ...

  10. 一步一步学习IdentityServer3 (13) 令牌

    IdentityServer3中客户端保护了授权资源,不难看出在IdentityServer3中,有这样一个设置 AllowedScopes = new List<string> { &q ...