使用使用vue的的v-for生成生成table并给并给table加上序号的实例代码加上序号的实例代码
现在有一个使用mybatis的分页插件生成的table，table中数据是通过vue获得的 ， 前台显示使用<tr v-for=”item in items”>
后台vue获取数据使用分页插件进行查询然后使用回调,将结果返回给vue的一个model
/**
* 分页控件加载
* @param data
*/
function aspnetPagerInfoIM(pageDataShow,pageModule,resource, modelCallBack) {
var pageDataShow = $("#"+pageDataShow);
var pageModule = $("#"+pageModule);
pageDataShow.empty();
pageModule.empty();
resource.get({
page: '0'
}).then(function(response){
initLaypage(pageDataShow,pageModule,response.data, resource, modelCallBack);
modelCallBack(response.data.content);
})
}
/**
* 初始化分页组件
* @param page 查询出来的数据包括分页信息
* @param resource vue的resource对象
* @param modelCallBack 每次页面跳转回调方法 modelCallBack(response.data.content)
*/
function initLaypage(pageDataShow,pageModule,page, resource, modelCallBack) {
var singleInvoke = false
laypage({
cont : pageModule,
pages : page.totalPages, //总页数
skin : '#fff', //加载内置皮肤
skip: true, //是否开启跳页
groups : 5, //连续显示分页数
hash : true, //开启hash
jump : function(obj) {
if(!singleInvoke) {
singleInvoke = true;
}else {
resource.get({
page: obj.curr -1
}).then(function(response){
modelCallBack(response.data.content);
})
}
pageDataShow.empty();
if(page.totalElements>0){
$("<p>共"+page.totalElements+"条记录，"
+"每页"+page.size+"条，"
+"当前第 "+obj.curr +"/"+page.totalPages+"页"
+"</p>").appendTo(pageDataShow);
}
}
});
}
需求是：给生成的table添加序号
刚开始使用js的函数
function rownum(){
//首先拿到table中tr的数量 得到一共多少条数据
var len = $("#tableId table tbody tr").length;
//使用循环给每条数据加上序号
for(var i = 1;i<len+1;i++){
$('#tableId table tr:eq('+i+') span:first').text(i);
}
}
将上面的方法放在点击生成table的事件上 , 可以显示序号，接着点击分页的下一页或者页数，跳转到下一页的时候，序号消失
了，
很自然的想到在点击下一页后也应该有添加序号的操作，于是找到显示下一页数据的方法，加上上面的js方法，结果没有生
效，
weixin_38624975
- 粉丝: 5
- 资源: 907
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0