Twitter Bootstrap Question posted in

Pagination table with external json-Twitter bootstrap

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": [{
        "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"
    }

]

}

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

    ]

  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search