原理就是利用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. 磁盘性能分析之iotop

    一.安装. yum install iotop [root@localhost tmp]# iotop -o iotop命令的键盘快捷键: 1.左右箭头改变排序方式,默认是按IO排序 2.r键是反向排 ...

  2. Qt软件打包发布（QT5.4.1(msvc2013_64_opengl)，Win7 64bit）

    环境:QT5.4.1(msvc2013_64_opengl),Win7 64bit 编译方式 Qt开发的程序发布的时候经常采用两种方式:1)静态编译,可生成单一的可执行文件:2)动态编译,需同时附上需 ...

  3. ORA-12514: TNS:listener does not currently know of service …

    问题描述: 今天数据库查询时遇到问题,具体情形如下截图所示: 问题分析: 看错误明显是TNS监听有问题,要么配置错了,要么数据库没起来.但是当前数据库起来了,也能正常连接使用,因此 考虑被查询对象可能 ...

  4. 洛谷P3387缩点

    传送门 有向图.. 代码中有两种方法,拓扑排序和记忆化搜索 #include <iostream> #include <cstdio> #include <cstring ...

  5. shell 中>/dev/null 2>&1含义

    shell中可能经常能看到:>/dev/null 2>&1 命令的结果可以通过%>的形式来定义输出 分解这个组合:“>/dev/null 2>&1” 为五 ...

  6. MySQL学习笔记：case when

    一.MySQL case when的三种用法: 1.case 字段 when, 字段的具体值: select a.*, case sex when '1' then '男' else '女' end ...

  7. oracle创建job和删除job

    https://blog.csdn.net/u010001043/article/details/56479774

  8. Java第三阶段学习（二、IO流--------递归，字节流Stream）

    一.递归 定义:指方法在方法内调用自己 适用于方法的运算主体不变,但运行的时候,参与运算的方法参数会变化注意:一定要给递归一个出口,否则内存溢出 练习题1:使用递归打印文件夹中所有的文件,包含子目录中 ...

  9. pyqt5猜数小程序

    程序界面用qt设计师制作,并用pyuic5命令转换成form.py文件 #-*- coding:utf-8 -*- from PyQt5.QtWidgets import QApplication,Q ...

  10. vue 中 使用 tradingview

    加载页面时初始化方法: mounted 可以在 mounted 方法中调用 methods 的中的方法 使用 data 中的数据时,在每个方法的开始推荐先定义 var that = this 现在还不 ...