首页 > 代码库 > Atitit easyui翻页组件与vue的集成解决方案attilax总结
Atitit easyui翻页组件与vue的集成解决方案attilax总结
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="http://www.mamicode.com/easyui1.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/easyui1.5/themes/icon.css">
<script src="http://www.mamicode.com/easyui1.5/jquery.easyui.min.js"></script>
<script src="http://www.mamicode.com/paggingCoreV3r44.js"></script>
<script src="http://www.mamicode.com/js/paggingUtil_easyui_vue.js"></script>
<!-- pagging end-->
<script src="http://www.mamicode.com/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 =http://www.mamicode.com/> {
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=http://www.mamicode.com/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总结