Pagination table with external json

前端未结

关注

 2  1257

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

相关标签:

2条回答

青春惊慌失措

2021-01-27 01:10

I resolved that issue with other json format,but I need to add same class of td in the particular tr when we inspect element

<!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='js/bootstrap-table.js'></script>

<script>

    $.ajax({
        url: "http://localhost/bspaginationtable/ext-json/members.json", 
        type: "POST",    
        dataType:"json",   
        success: function (response) 
        {
         // var trHTML = '';
          $.each(response, function (key,value) {
             $('table#table TBODY').append('<tr><td>'+value.name+'</td><td>'+value.stargazerscount +'</td><td class="'+ value.forkscount +'"><span>'+value.forkscount +'</span></td><td>'+value.description +'</td></tr>');    
          });

           // $('#table').append(trHTML);
        }   
    });

$(function () {
    $('#table').bootstrapTable({
       // data: data
    });
});
  </script>
 </body>    
</html>

json format

 [{
            "name": "bootstrap-tables",
            "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"
        }

    ]

0 讨论(0)

野的像风

2021-01-27 01:35

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;
}

0 讨论(0)