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. BZOJ1845 [Cqoi2005] 三角形面积并 扫描线 计算几何

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1845 题意概括 给出n个三角形,求其面积并. 题解 有一个很经典的扫描线题目:矩形面积并.那个比较 ...

  2. 004.HAProxy的管理与维护

    一 安装 [root@haproxy_master ~]# yum -y install gcc gcc-c++ make openssl-devel wget openssh-clients #安装 ...

  3. AD软件原理图封装过程(即由原理图转换到PCB)

    第一步:先画出你所要的原理图 第二步:点击菜单栏的工具→封装管理器,进去封装管理器页面,点击左边的每一个元件, 然后选择封装时的元器件,再点击右边的确定(每一个元器件确定好封装要用的元件都要点确定) ...

  4. Springzz中使用监听器,用于容器一启动就加载准备数据(application范围内的数据,用于减轻服务器压力,不用每次都去查数据)

    java代码: public class InitListener implements ServletContextListener { public void contextInitialized ...

  5. 常用类及 LeetCode 每日一题

    1 日期时间类 在 Java 语言中,是通过时间戳来表示时间的.所谓的时间戳,在 Java 中就是指当前时间距离历元(1970-01-01 00:00:00)的时间间隔,单位是毫秒,所以 Java 中 ...

  6. Structured Streaming教程(1) —— 基本概念与使用

    近年来,大数据的计算引擎越来越受到关注,spark作为最受欢迎的大数据计算框架,也在不断的学习和完善中.在Spark2.x中,新开放了一个基于DataFrame的无下限的流式处理组件--Structu ...

  7. 对请求并发数做限制的通用RequestDecorator

    使用场景 在开发中,我们可能会遇到一些对异步请求数做并发量限制的场景,比如说微信小程序的request并发最多为5个,又或者我们需要做一些批量处理的工作,可是我们又不想同时对服务器发出太多请求(可能会 ...

  8. nginx 负载均衡集群解决方案 healthcheck_nginx_upstreams模块测试 (二)

    在这里详细讲解healthcheck_nginx_upstreams模块中存在的bug,对于healthcheck_nginx_upstreams模块的安装和使用请阅读上一篇blog进行学习. 测试环 ...

  9. AngularJS中的ng-controller是什么东东

    在AngularJS中,ng-controller是最常用的directive.比如: var app = angular.module("app",[]); app.contro ...

  10. Android:Unable to find explicit activity class

    写了两个Activity,确定java代码和xml配置文件没问题之后,运行工程,报错: E/AndroidRuntime(10513): FATAL EXCEPTION: main E/Android ...