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. Python String 方法详解

    官网文档地址:https://docs.python.org/3/library/stdtypes.html#string-methods 官网 公号:软测小生ruancexiaosheng 文档里的 ...

  2. redis分布式锁小试

    一.场景 项目A监听mq中的其他项目的部署消息(包括push_seq, status, environment,timestamp等),然后将部署消息同步到数据库中(项目X在对应环境[environm ...

  3. HQL count(*)

    public int getTarPage() {        String hql = "'";        Query query = getSession().creat ...

  4. C#多线程编程实战(二):线程同步

    2.1 简介 竞争条件:多个线程同时使用共享对象.需要同步这些线程使得共享对象的操作能够以正确的顺序执行 线程同步问题:多线程的执行并没有正确的同步,当一个线程执行递增和递减操作时,其他线程需要依次等 ...

  5. Logging模块 + traceback模块 + importlib模块 + requests模块

    Logiging模块日志级别 CRITICAL = 50FATAL = CRITICALERROR = 40WARNING = 30WARN = WARNINGINFO = 20DEBUG = 10N ...

  6. maven的pom.xml配置文件中常用的配置标签解析(2018-03-13)

    来自:https://www.cnblogs.com/Nick-Hu/p/7288198.html 拿过来记录下 <project xmlns="http://maven.apache ...

  7. mysql 跨表更新

    update hhs_goods as g INNER JOIN (select SUM(goods_number) as goods_number,goods_id from hhs_order_g ...

  8. Maven入门指南⑥:将项目发布到私服

    1 . 修改私服中仓库的部署策略 Release版本的项目应该发布到Releases仓库中,对应的,Snapshot版本应该发布到Snapshots仓库中.Maven根据pom.xml文件中版本号&l ...

  9. UML类图的几个名词及对应符号

    实现(Implements) 实现的符号为:\(--- \triangleright\) 箭头指向接口. 泛化/继承(Inheritance) 继承的符号为:$ -\triangleright $ 箭 ...

  10. 查看linux系统硬盘目录占用大小

    http://jingyan.baidu.com/article/3aed632e198ae870108091b4.html   du -sh /* 先看看根目录下面 du -sh /usr/* du ...