具有外部json的分页表 [英] Pagination table with external json
本文介绍了具有外部json的分页表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有分页和ext json的表，但是执行该表时出现错误，任何人都可以帮我，以下是json，下面给出了代码，需要修改相同的代码，谢谢.我有一个带有分页和ext json的表，但是执行该表时出现错误，任何人都可以帮我，以下是json，下面给出了代码，需要修改相同的代码，谢谢
I have a table with pagination and ext json but I am getting error while executing the table,Can anyone help me,below is the json and code has been given below,Same code need to modifed,Thanks in advance. I have a table with pagination and ext json but I am getting error while executing the table,Can anyone help me,below is the json and code has been given below,Same code need to modifed,Thanks in advance
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>bootstrap-table pagination</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css'>
<style>
.pagination .active a {
width: 40px;
height: 34px;
-webkit-transform: skew(-21deg);
position: relative;
overflow: hidden;
background: red;
}
.pagination .active span{
-webkit-transform: skew(0deg) !important;
width: 40px !important;
height: 34px !important;
}
.pagination>li>a{
width: 40px;
height: 34px;
-webkit-transform: skew(-21deg);
background: #fff;
}
.pagination > li.page-pre >a,.pagination > li.page-next >a {
width: 85px !important;
}
.fixed-table-pagination div.pagination{
margin-right:20px;
}
.pagination-detail{
display:none;
}
.major{
background-color:green;
}
.critical{
background-color:orange;
}
</style>
</head>
<body>
<table id="table" data-show-header="true" data-pagination="true"
data-id-field="name"
data-page-list="[5, 10, 25, 50, 100, ALL]"
data-page-size="5">
<thead><tr><th>Name</th><th>stargazers_count</th><th>forks_count</th><th>description</th></tr></thead>
<tbody>
</tbody>
</table>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js'></script>
<script>
$.ajax({
type:"GET",
contentType: "application/json; charset=UTF-8",
dataType: 'json',
cache:false,
url:"http://localhost/members.json"
success: function (data) {
console.log(data);
var test = members;
$.each(test, function(i, ele){
$('table#table TBODY').append('<tr><td>'+elem.name+'</td><td>'+elem.stargazerscount +'</td><td class="'+ elem.forkscount +'">'+elem.forkscount +'</td><td>'+elem.description +'</td></tr>');
});
}
} )
/* var series = [];
var dmJSON = "http://localhost/test/members.json";
$.getJSON( dmJSON, function(data) {
$.each(data.series, function(i, item) {
$('<tr class="text-center">').html(
"<td>"+item.data+"</td>").appendTo('#msg');
});
});
$('#msg').append(data);
$.each(data.myMonths, function (index, item) {
})
*/
/* var a = {};
$.getJSON('members.json', function (data) {
a = data;
$.each(a, function(idx, elem){
$('table#table TBODY').append('<tr><td>'+elem.name+'</td><td>'+elem.stargazerscount +'</td><td class="'+ elem.forkscount +'">'+elem.forkscount +'</td><td>'+elem.description +'</td></tr>');
});
});
*/
$(function () {
$('#table').bootstrapTable({
// data: data
});
});
</script>
</body>
</html>
members.json
members.json
{
"members": [{
"name": "bootstrap-table",
"stargazerscount": 526,
"forkscount": "critical",
"description": "ssssssssss"
},
{
"name": "bootstrap-table",
"stargazerscount": 526,
"forkscount": "critical",
"description": "ssssssssss"
},
{
"name": "bootstrap-table",
"stargazerscount": 526,
"forkscount": "major",
"description": "ssssssssss"
},
{
"name": "bootstrap-table",
"stargazerscount": 526,
"forkscount": "major",
"description": "ssssssssss"
},
{
"name": "bootstrap-table",
"stargazerscount": 526,
"forkscount": "critical",
"description": "ssssssssss"
},
{
"name": "bootstrap-table",
"stargazerscount": 526,
"forkscount": "critical",
"description": "ssssssssss"
},
{
"name": "bootstrap-table",
"stargazerscount": 526,
"forkscount": "critical",
"description": "ssssssssss"
}
]
}
推荐答案
如果将$ .each函数替换为:
If you replace the $.each function with:
$.each(a, function(idx, elem){
$('table#table TBODY').append('<tr><td>'+elem.name+'</td><td>'+elem.stargazerscount +'</td><td class="'+ elem.forkscount +'">'+elem.forkscount +'</td><td>'+elem.description +'</td></tr>');
});
然后将以下代码添加到样式组件中，您将获得期望的结果:
And then added following code into your style component, then you'll get what you expected:
.major{
background-color:green;
}
.critical{
background-color:orange;
}
这篇关于具有外部json的分页表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
