(JQuery for a little novice, I am also learning, write a bad place, please forgive me)
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<title></title>
<style>
span {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid gray;
text-align: center;
line-height: 20px;
}
.page {
padding-top: 20px;
}
.blue {
background: deepskyblue;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<table border id="tables">
</table>
<div class="page">
</div>
<script src="./js/jquery-1.11.3.min.js"></script>
<script>
// Here are two global variables
var size = 6 // 6 is assigned to because you want to customize every six to one
var num = 1 // starting from the first page
function getList() {
$.ajax({
type: 'GET', //GET
url: 'http://120.77.38.79:8080/demo/api/product',
//parameter
data: {
pageSize: size, use commas to separate // parameter, or will be error
pageNum: num // page, second page when the time will be a plus
},
dataType: 'json',
success: function(res) {
var pages = Math.ceil(res.data.pageCount / size)
// pageCount = 14; ceil () function: rounding up
// console.log (pages) 3 is the total number of pages, I do not understand what can be printed
var data = res.data.data // here because there are two interfaces, it is necessary to point 2 data
//console.log(res.data)
All child nodes elements $ ( "# tables"). Empty () //. Empty () to delete matches.
// the top row of cells described
$ ( "# Tables"). Append ( '<tr> <th> handset Name </ th> <th> quote </ th> <th> mobile photo </ th> </ tr>')
for (var j = 0; j < data.length; j++) {
$("#tables").append('<tr><td>' + data[j].name + '</td><td>' + data[j].price +
'</td><td><img src="' + data[j].image + '" /></td></tr>')
// get by for cyclic data and add data to the table to table, which is a mosaic of dynamic data, here to get the name and phone prices have pictures
}
$ ( ". Page"). Empty () //. All child nodes of elements to delete matching empty ().
// must be cleared, or when the button other pages when the page before the data will be preserved
for (var i = 0; i <pages; i ++) {// pages number of pages, the above calculation is approximately equal ceil 3
$ ( ". Page"). Append ( '<span onclick = "changePage (' + i + ')">' + parseInt (i + 1) + '</ span>') // for loop is then added to
Splicing} // Here is a click event
// flip to page first delete empty span tag data (if there are data under the circumstances), then go append data, or add style
$ ( "Span") removeClass ( "") // removeClass:. Delete all or specified classes from all matched elements.
. $ ( "Span") eq (num - 1) .addClass ( "blue") // addClass: Adds the specified class name for the element of each match.
// define the style of the blue, do not write .blue, because it is not class, otherwise the style will not take effect
}
});
}
getList call this method () //
function changePage (ind) {// ind = it, I is the value above for loop
num = ind + 1 // ind loop for the first time when equal to 0, 0 + 1 = 1, it will see the first page, ind changePage (value) is changed corresponding to the data page in accordance with
getList()
// This method is called once again
}
</script>
</body>
</html>