Atitit easyui翻页组件与vue的集成解决方案attilax总结

===============使用1

===========\paggingUtil_easyui_vue.js2

C:\Users\Administrator\Desktop\00oa\js\paggingUtil_easyui_vue.js

===============使用

<!-- pagging-->

<link rel="stylesheet" type="text/css" href="easyui1.5/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="easyui1.5/themes/icon.css">

<script src="easyui1.5/jquery.easyui.min.js"></script>

<script src="paggingCoreV3r44.js"></script>

<script src="js/paggingUtil_easyui_vue.js"></script>

<!-- pagging end-->

<script src="api_cfg.js"></script>

</head>

<!-- 翻页控件区域-->

<div class="easyui-pagination" id="page_div" ></div>

</div>

<!--  绑定翻页查询数据事件-->

$("#button11").on('click',function(){

var s2 ="select * from ROLE_PARSE where 流程 like '%"+$('#textfield').val()+"%'";

var url2 = api_url+"/api?m=q&p1="+encodeURIComponent(encodeURIComponent(s2));

fetch(url2).then(response=>response.json()).then(data => {

setPageControl(data);

}

).catch(e => console.log("Oops, error", e));

})

===========\paggingUtil_easyui_vue.js

// JavaScript Document

//绑定翻页查询数据事件-->

function getTestdata()

{

var a=new Array();

for(i=1;i<99;i++)

{

a.push(i);

}

return a ;

}

function  showCurPageData2Table(cur_page_datas)

{

VueObj1.$data.list_data1=cur_page_datas;

}

function   clrOldPageData()

{

VueObj1.$data.list_data1=[];

}

var all_data=getTestdata();//获取数据,可以一般是从后台ajax获取。。前段分页是获取所有数据,后端分页只获取当前页数据

function setPageControl(all_data)

{

//设置翻页

$('#page_div').pagination({

total:all_data.length,

pageSize:10,

onSelectPage: function(pageNumber, pageSize){

clrOldPageData();//清空现有显示数据

//截取当前页面数据

var cur_page_datas=getCurPageDatas(all_data,pageNumber,pageSize);

//显示截取数据到界面

showCurPageData2Table(cur_page_datas);

}

});

$('#page_div').pagination('select', 1);//转到第一页

}

作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher

捕鸟王"Bird Catcher  kok  虔诚者Pious 宗教信仰捍卫者 Defender Of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak 万兽之王

简称:: Emir Attilax Akbar 埃米尔 阿提拉克斯 阿克巴

全名::Emir Attilax Akbar bin Mahmud bin  attila bin Solomon bin adam Al Rapanui 埃米尔 阿提拉克斯 阿克巴 本 马哈茂德 本 阿提拉 本 所罗门 本亚当  阿尔 拉帕努伊

常用名:艾提拉(艾龙),  EMAIL:1466519819@qq.com

头衔:uke总部o2o负责人,全球网格化项目创始人,

uke交友协会会长  uke捕猎协会会长 Emir Uke部落首席大酋长,

uke宗教与文化融合事务部部长, uke宗教改革委员会副主席

uke制度与重大会议委员会委员长,uke保安部首席大队长,uke制度检查委员会副会长,

uke 首席cto   软件部门总监 技术部副总监  研发部门总监主管  产品部副经理 项目部副经理   uke科技研究院院长uke软件培训大师

uke波利尼西亚区大区连锁负责人 汤加王国区域负责人 uke克尔格伦群岛区连锁负责人,莱恩群岛区连锁负责人,uke布维岛和南乔治亚和南桑威奇群岛大区连锁负责人

Uke软件标准化协会理事长理事长 Uke 数据库与存储标准化协会副会长

uke终身教育学校副校长   Uke医院 与医学院方面的创始人

uec学院校长, uecip图像处理机器视觉专业系主任   uke文档检索专业系主任

Uke图像处理与机器视觉学院首席院长

Uke 户外运动协会理事长  度假村首席大村长   uke出版社编辑总编

转载请注明来源:attilax的专栏  ?http://www.cnblogs.com/attilax/

--Atiend  v8

Atitit easyui翻页组件与vue的集成解决方案attilax总结的更多相关文章

  1. Atitit.pagging  翻页功能解决方案专题 与 目录大纲 v3 r44.docx

    Atitit.pagging  翻页功能解决方案专题 与 目录大纲 v3 r44.docx 1.1. 翻页的重要意义1 1.2. Dep废弃文档   paip.js翻页分页pageing组件.txt1 ...

  2. 一款易用、高可定制的vue翻页组件

    一款易用.高可定制的vue翻页组件 在线体验:pages.cixi518.com 使用 npm i vo-pages --save vo-pages组件父元素必须设置固定高度并填写属性overflow ...

  3. 翻页组件page-flip调用问题

    翻页组件重新调用解决方案 翻页组件:page-flip import { PageFlip } from 'page-flip' pagefile() { //绘制翻页 this.pageFlip = ...

  4. Atitit 基于sql编程语言的oo面向对象大规模应用解决方案attilax总结

    Atitit 基于sql编程语言的oo面向对象大规模应用解决方案attilax总结 1. Sql语言应该得到更大的范围的应用,1 1.1. 在小型系统项目中,很适合存储过程写业务逻辑2 1.2. 大型 ...

  5. Atitit 翻页功能的解决方案与版本历史 v4 r49

    Atitit 翻页功能的解决方案与版本历史 v4 r49 1. 版本历史与分支版本,项目版本记录1 1.1. 主干版本历史1 1.2. 分支版本  项目版本记录.1 2. Easyui 的翻页组件2 ...

  6. vue翻页器,包括上一页,下一页,跳转

    翻页组件 -- 子组件<template> <div class="pager-wrapper" ref="pager"> <di ...

  7. element-ui table 的翻页记忆选中

    公司中台项目刚开始开发,用了vue+element,需要许多前置调研,table的翻译记忆选中就是其中之一. template: <el-table :ref="tableRef&qu ...

  8. 解决Hexo博客模板hexo-theme-next的翻页按钮不正常显示问题

    用Hexo搭了个Gitpage的博客,兴冲冲的发了11篇博文后发现翻页按钮不正常显示,显示为<i class="fa fa-angle-right"></i> ...

  9. vue案例 - vue-awesome-swiper实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...

随机推荐

  1. BZOJ2333 [SCOI2011]棘手的操作 堆 左偏树 可并堆

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ2333 题意概括 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i ...

  2. 【Java】 剑指offer(34) 二叉树中和为某一值的路径

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 输入一棵二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有 ...

  3. 【Java】 剑指offer(57-2) 为s的连续正数序列

      本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 输入一个正数s,打印出所有和为s的连续正数序列(至少含有两个数 ...

  4. 学机器学习,不会数据分析怎么行——数据可视化分析(matplotlib)

    前言 前面两篇文章介绍了 python 中两大模块 pandas 和 numpy 的一些基本使用方法,然而,仅仅会处理数据还是不够的,我们需要学会怎么分析,毫无疑问,利用图表对数据进行分析是最容易的, ...

  5. 深度学习中 droupout层是咋回事??

    参考这篇博文 博主写的非常好!   https://blog.csdn.net/program_developer/article/details/80737724 参考这篇博文 博主写的非常好!  ...

  6. 潭州课堂25班:Ph201805201 第七课:控制流程 (课堂笔记)

    # 条件判断 s = '储蓄卡' if s == '男': # 如果if 表达式成立 ,则执行下级语句 print('男性') elif s == '女': # 如果上面表达式不成立,执行本次判断,本 ...

  7. LOJ6070 基因 分块+回文自动机

    这个在翁文涛的论文里有讲到 大概的就是一个子串的回文自动机是原串回文自动机的子图 于是每隔$\sqrt n$重新跑一个$(k \times \sqrt n,n)$的回文自动机 记录回文串个数和位置 并 ...

  8. ES-常见搜索方式

    1.query string search 2.query DSL 3.query filter 4.full-text search 5.phrase search 6.highlight sear ...

  9. C#键盘事件处理父窗体子窗体

    :                             :                             MessageBox.Show(, , Keys.F1);            ...

  10. 【BZOJ3036】绿豆蛙的归宿 概率DP

    链接: #include <stdio.h> int main() { puts("转载请注明出处[辗转山河弋流歌 by 空灰冰魂]谢谢"); puts("网 ...