在vue中使用 jquery分页组件

先来看下效果：

<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery Pagination分页插件demo</title><link rel="stylesheet" href="./css/pagination.css" /><script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script><script type="text/javascript" src="./js/jquery.pagination.js"></script><script src="./js/vue.js"></script><style>th,td {width: 200px;background: pink;text-align: center;}</style>
</head><body><div id="app"><h2>使用说明</h2>此jQuery插件为Ajax分页插件，一次性加载，故分页切换时无刷新与延迟，如果数据量较大不建议用此方法，因为加载会比较慢。<div class="box01"><table><tr><th>省份</th><th>用户数</th></tr><tr v-for="(item,key) in list" v-if="key>=leftNum1 && key<rightNum1"><td>{{item.con}}</td><td>{{key}}</td></tr></table><div id="Pagination1" class="pagination"></div></div><div class="box01"><table><tr><th>省份</th><th>用户数</th></tr><tr v-for="(item,key) in list" v-if="key>=leftNum2 && key<rightNum2"><td>{{item.con}}</td><td>{{key}}</td></tr></table><div id="Pagination2" class="pagination"></div></div></div><script>new Vue({el: '#app',data: {list: [{'con': '内容1'}, {'con': '内容2'}, {'con': '内容3'}, {'con': '内容4'}, {'con': '内容5'}, {'con': '内容6'}, {'con': '内容7'}, {'con': '内容8'}, {'con': '内容9' }, {'con': '内容10'}, {'con': '内容11'}, {'con': '内容12'}, {'con': '内容13'}, {'con': '内容14'}, {'con': '内容15'}, {'con': '内容16'}, {'con': '内容17'}, {'con': '内容18'}, {'con': '内容19'}, {'con': '内容20'}, {'con': '内容21'}, {'con': '内容22'}, {'con': '内容23'}, {'con': '内容24'}],leftNum1: '',   // 第一个分页的 数  [rightNum1: '',   // 第一个分页的  数 )leftNum2: '',   // 第二个分页的 数  [rightNum2: '',  // 第二个分页的 数  )},methods: {// 分页函数pagePagination(id, num) { // id：页面div的id值     num：一页展示几个（必须是5的倍数）var that = this;if (num % 5 != 0) {alert('该函数只能展示页数为5的倍数的,请重新确定num的值')} else {var initPagination = function () {var len = Math.ceil((that.list.length) / num);// 创建分页$("#" + id).pagination(len, {num_edge_entries: 1, //边缘页数num_display_entries: 4, //主体页数callback: pageselectCallback,items_per_page: 1 //每页显示1项});}();function pageselectCallback(page_index, jq) {console.log(id);if (id == 'Pagination1') {that.leftNum1 = page_index * num;that.rightNum1 = (page_index + 1) * num;} else if (id == 'Pagination2') {that.leftNum2 = page_index * num;that.rightNum2 = (page_index + 1) * num;}return false;}}}},mounted() {this.pagePagination('Pagination1', 5);this.pagePagination('Pagination2', 15);}})</script>
</body>
</html>

以上代码可以直接拿来在浏览器里面运行。

---------------------------完

在vue中使用 jquery分页组件相关推荐

基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...
vue学习笔记十：Vue中引入jquery
文章目录前言一.引入方式 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目二.使用方法 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目总结前言本篇实现vu ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
[vue] vue中什么是递归组件？举个例子说明下？
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件
啥是应用程序状态,为什么咱们需要它? 状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了.简单的说,状态是一个包含应用程序使用的最新值的对象.但是,如果咱们从结构 ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
有关QJ_Filecenter在vue中的使用和组件封装
有关QJ_Filecenter在vue中的使用和组件封装 QJ_FileCenter在vue中的使用和组件封装安装第一步:在官网下载QJ_FileCenter安装包第二部:访问FileCente ...
vue中，右键菜单组件v-contextmenu的使用
vue中,右键菜单组件v-contextmenu的使用 1.效果右键菜单之禁用和子菜单 2.流程第一步:安包 npm install v-contextmenu --save-dev npm in ...

在vue中使用 jquery分页组件

在vue中使用 jquery分页组件相关推荐

最新文章

热门文章