使用bootstrap table不显示数据
网页使用bootstraptable来显示数据,但最后结果是上图那样的,很奇怪。我用alert获取了数据,只有两条我的代码是这样的,求大神帮忙看看,怎么回事。$(func...
网页使用bootstrap table来显示数据,但最后结果是上图那样的,很奇怪。
我用alert获取了数据,只有两条
我的代码是这样的,求大神帮忙看看,怎么回事。
$(function () {
$.post('/ManageSys/getUserInfo', function (data2) {
alert(data2);
$('#table').bootstrapTable({
data:data2,
columns: [{
field: 'userid',
title: '用户编号'
}, {
field: 'username',
title: '用户名'
}, {
field: 'email',
title: '邮箱'
}, {
field: 'statusid',
title: '申请管理员'
}, {
field: 'ischeck',
title: '审核状态'
}, {
field: 'registerTime',
title: '注册时间'
}, {
field: 'loginTime',
title: '最近登陆时间'
}]
});
});
});
找到问题了 是因为读取数据的格式的问题 应该把json变成数组。 展开
我用alert获取了数据,只有两条
我的代码是这样的,求大神帮忙看看,怎么回事。
$(function () {
$.post('/ManageSys/getUserInfo', function (data2) {
alert(data2);
$('#table').bootstrapTable({
data:data2,
columns: [{
field: 'userid',
title: '用户编号'
}, {
field: 'username',
title: '用户名'
}, {
field: 'email',
title: '邮箱'
}, {
field: 'statusid',
title: '申请管理员'
}, {
field: 'ischeck',
title: '审核状态'
}, {
field: 'registerTime',
title: '注册时间'
}, {
field: 'loginTime',
title: '最近登陆时间'
}]
});
});
});
找到问题了 是因为读取数据的格式的问题 应该把json变成数组。 展开
4个回答
展开全部
首先, 你要知道一个基础table的标签怎么去写, 只有知道这个基础, 你才能更好的用bootstrap中的table. html在这不过多说明. 既然看这篇文章, 肯定都能够理解. 然后现在就把bootstrap中的table来详细说明一下. 基础的table如下:
下面了解一下bootstrap中table, 没有什么大道理可以讲解. 唯有一点, 通过表格的方式展示页面. 首先有必要样式.table. 和一些选用样式. 举例说明必要样式. 首先要搭建一个基础框架, 请看系列经验第一篇.
在搭建的基础框架里面的body部分填写table信息. 然后在table的标签上加上基础样式.table的css样式. 你立刻发现, 界面瞬间好看多了.
说明一下除了必要的.table之外, 还有很多可选的class. 不同的可选class. 是可以联合使用的.
1.我们常用的就有边框的table. 只需要使用.table-bordered 查看效果图.
2.斑马线, 也就是隔行相同颜色的一个样式. 使用.table-striped样式.
注意点有2个:
(1)斑马线是对tbody中的行起作用
(2)斑马线的实现方式是通过:nth-child CSS选择器实现的, 但是呢, 他不被ie8支持, 你懂我说的.
3.鼠标悬停在行上, 改变行的背景颜色. 使用.table-hover样式.
注意: 这个需要多行的时候, 这种效果更加明显.
4.让表格更加紧凑的样式.table-condensed, 它是让表格单元格中的内部(padding)减半.展现更多的内容, 和更多的显示内容.
其他的提醒说明: 在bootstrap中有这样的几个样式, 可以说是提醒样式. 每个样式都是一种提醒方式. 这些方式也可以放到table中. 只需要使用class即可.
上面状态的样式, 可以使用到不同的内容中, 比方说, tr中, td中, 都是可以的. 下面的举例说明.
注意点: 在使用这个样式的时候不能使用.table-striped的样式, 会出现不能正常显示的问题.
还有就是现在比较流行的响应式的table. 只需要在table包含在.table-responsive中即可, 作用为: 当屏幕小于768的时候, 才会出现滚动条, 否则滚动条消失.
10
动手去尝试, 你发现学习bootstrap也就是这么简单.祝你更快的学会这个框架.
下面了解一下bootstrap中table, 没有什么大道理可以讲解. 唯有一点, 通过表格的方式展示页面. 首先有必要样式.table. 和一些选用样式. 举例说明必要样式. 首先要搭建一个基础框架, 请看系列经验第一篇.
在搭建的基础框架里面的body部分填写table信息. 然后在table的标签上加上基础样式.table的css样式. 你立刻发现, 界面瞬间好看多了.
说明一下除了必要的.table之外, 还有很多可选的class. 不同的可选class. 是可以联合使用的.
1.我们常用的就有边框的table. 只需要使用.table-bordered 查看效果图.
2.斑马线, 也就是隔行相同颜色的一个样式. 使用.table-striped样式.
注意点有2个:
(1)斑马线是对tbody中的行起作用
(2)斑马线的实现方式是通过:nth-child CSS选择器实现的, 但是呢, 他不被ie8支持, 你懂我说的.
3.鼠标悬停在行上, 改变行的背景颜色. 使用.table-hover样式.
注意: 这个需要多行的时候, 这种效果更加明显.
4.让表格更加紧凑的样式.table-condensed, 它是让表格单元格中的内部(padding)减半.展现更多的内容, 和更多的显示内容.
其他的提醒说明: 在bootstrap中有这样的几个样式, 可以说是提醒样式. 每个样式都是一种提醒方式. 这些方式也可以放到table中. 只需要使用class即可.
上面状态的样式, 可以使用到不同的内容中, 比方说, tr中, td中, 都是可以的. 下面的举例说明.
注意点: 在使用这个样式的时候不能使用.table-striped的样式, 会出现不能正常显示的问题.
还有就是现在比较流行的响应式的table. 只需要在table包含在.table-responsive中即可, 作用为: 当屏幕小于768的时候, 才会出现滚动条, 否则滚动条消失.
10
动手去尝试, 你发现学习bootstrap也就是这么简单.祝你更快的学会这个框架.
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
它是把数据一次性加载出来放到界面上,然后根据你设置的每页记录数,自动生成分页。当点击第二页时,会自动加载出数据,不会再向服务器发送请求。同时用户可以使用其自带的搜索功能,可以实现全数据搜索。对于数据量较少的时候
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2018-05-23
展开全部
使用第三方组件就要按照对方的格式返回数据,否则就在js里自己组装成需要的格式。
好像必须以官方这种数据 格式 返回数据才能 显示
{
"total": 200,
"rows": [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
},
{
"id": 6,
"name": "Item 6",
"price": "$6"
},
{
"id": 7,
"name": "Item 7",
"price": "$7"
},
{
"id": 8,
"name": "Item 8",
"price": "$8"
},
{
"id": 9,
"name": "Item 9",
"price": "$9"
},
{
"id": 10,
"name": "Item 10",
"price": "$10"
}
]
}
好像必须以官方这种数据 格式 返回数据才能 显示
{
"total": 200,
"rows": [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
},
{
"id": 6,
"name": "Item 6",
"price": "$6"
},
{
"id": 7,
"name": "Item 7",
"price": "$7"
},
{
"id": 8,
"name": "Item 8",
"price": "$8"
},
{
"id": 9,
"name": "Item 9",
"price": "$9"
},
{
"id": 10,
"name": "Item 10",
"price": "$10"
}
]
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询