1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Music</title>
6 <script src="https://code.jquery.com/jquery.js"></script>
7 <!-- 引入 Bootstrap -->
8 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
9 <!--<link rel="stylesheet" type="text/css" href="../CSS/index.css">-->
10 </head>
11 <body>
12 <!-- **********************************View start********************************-->
13 <div>
14 <table class="table">
15 <thead>
16 <th>编号</th>
17 <th>歌曲名称</th>
18 <th>歌手</th>
19 <th>song_id</th>
20 <th>bitrate_fee</th>
21 <th>publishtime</th>
22 <th>pic_big</th>
23 <th>pic_small</th>
24 </thead>
25 <tbody>
26 </tbody>
27 </table>
28 <button id="btn">获取数据</button>
29 </div>
30 <nav>
31 <ul class="pagination">
32 <li>
33 <a href="#" aria-label="Previous" id="prev">
34 <span aria-hidden="true">«</span>
35 </a>
36 </li>
37 <li><a name="page1">1</a></li>
38 <li><a name="page2">2</a></li>
39 <li><a name="page3">3</a></li>
40 <li><a name="page4">4</a></li>
41 <li><a name="page5">5</a></li>
42 <li><a name="page6">6</a></li>
43 <li><a name="page7">7</a></li>
44 <li><a name="page8">8</a></li>
45 <li><a name="page9">9</a></li>
46 <li><a name="page10">10</a></li>
47 <li>
48 <a aria-label="Next" id="next">
49 <span aria-hidden="true">»</span>
50 </a>
51 </li>
52 </ul>
53 </nav>
54 <!-- **********************************View end********************************-->
55 </body>
56 <script type="text/javascript">
57
58 var listData = new Array();
59 // **********************************Model start********************************
60 function musicModel() {
61 this.title = "";
62 this.songName = "";
63 this.songAuthor = "";
64 this.songId = "";
65 this.bitrate_fee = "";
66 this.publishtime = "";
67 this.pic_big = "";
68 this.pic_small = "";
69 this.number = 0;
70
71 musicModel.prototype.getTitle = function() {
72 return this.title;
73 }
74
75 musicModel.prototype.songName = function() {
76 return this.songName;
77 }
78
79 musicModel.prototype.songAuthor = function() {
80 return this.songAuthor;
81 }
82
83 musicModel.prototype.songId = function() {
84 return this.songId;
85 }
86
87 musicModel.prototype.bitrate_fee = function() {
88 return this.bitrate_fee;
89 }
90
91 musicModel.prototype.publishtime = function() {
92 return this.publishtime;
93 }
94
95 musicModel.prototype.pic_big = function() {
96 return this.pic_big;
97 }
98
99 musicModel.prototype.pic_small = function() {
100 return this.pic_small;
101 }
102
103 musicModel.prototype.number = function() {
104 return this.number;
105 }
106
107 musicModel.prototype.title = function(title) {
108 this.title = title;
109 }
110
111 musicModel.prototype.songName = function(songName) {
112 this.songName = songName;
113 }
114
115 musicModel.prototype.songAuthor = function(songAuthor) {
116 this.songAuthor = songAuthor;
117 }
118
119 musicModel.prototype.songId = function(songId) {
120 this.songId = songId;
121 }
122
123 musicModel.prototype.bitrate_fee = function(bitrate_fee) {
124 this.bitrate_fee = bitrate_fee;
125 }
126
127 musicModel.prototype.publishtime = function(publishtime) {
128 this.publishtime = publishtime;
129 }
130
131 musicModel.prototype.pic_big = function(pic_big) {
132 this.pic_big = pic_big;
133 }
134
135 musicModel.prototype.pic_small = function(pic_small) {
136 this.pic_small = pic_small;
137 }
138
139 musicModel.prototype.number = function(number) {
140 this.number = number;
141 }
142 }
143 // **********************************Model end********************************
144
145 // **********************************controller start********************************
146 //请求数据
147 function requestData(url){
148 $.ajax({
149 url:url,
150 dataType:"jsonp",
151 jsonp:"callback",
152 success:function(data){
153 getData(data);
154 }
155 });
156 }
157 //解析数据
158 function getData(data){
159 var songList = data["song_list"];
160 if(listData.length != 0){
161 listData.length = 0;
162 }
163 $.each(songList,function (i,v) {
164 var model = new musicModel();
165 model.number = i+1;
166 model.title = v["title"];
167 model.songAuthor =v["author"];
168 model.songId = v["song_id"];
169 model.bitrate_fee = v["bitrate_fee"];
170 model.publishtime = v["publishtime"];
171 model.pic_big = v["pic_big"];
172 model.pic_small = v["pic_small"];
173 listData.push(model);
174 })
175 //清除原来的数据
176 clearData();
177 //填充新的数据
178 setData();
179 }
180 //赋值
181 function setData(){
182 for(var i = 0;i < listData.length;i++) {
183 //添加行
184 $(".table").append("<tr id=option"+i+
185 "><td>"+listData[i].number+
186 "</td><td>"+listData[i].title+
187 "</td><td>"+listData[i].songAuthor+
188 "</td><td>"+listData[i].songId+
189 "</td><td>"+listData[i].bitrate_fee+
190 "</td><td>"+listData[i].publishtime+
191 "</td><td>"+listData[i].pic_big+
192 "</td><td>"+listData[i].pic_small+
193 +"</td>"+
194 "</tr>")
195 }
196 }
197 //删除行(清空旧数据)
198 function clearData(){
199 for(var i = 0;i < listData.length;i++){
200 $("#option"+i).remove();
201 }
202 }
203 //分页响应事件
204 function pageClick(name) {
205 console.log(name);
206 switch (name) {
207 case "page1":
208 {
209 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0");
210 }
211 break;
212 case "page2":
213 {
214 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=1");
215 }
216 break;
217 case "page3":
218 {
219 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=2");
220 }
221 break;
222 case "page4":
223 {
224 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=3");
225 }
226 break;
227 case "page5":
228 {
229 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=4");
230 }
231 break;
232 case "page6":
233 {
234 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=5");
235 }
236 break;
237 case "page7":
238 {
239 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=6");
240 }
241 break;
242 case "page8":
243 {
244 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=7");
245 }
246 break;
247 case "page9":
248 {
249 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=8");
250 }
251 break;
252
253 case "page10":
254 {
255 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=9");
256 }
257 break;
258 }
259 }
260 // **********************************controller end********************************
261 //获取链接中的参数
262 function getUrlParam(url,name){
263 var pattern = new RegExp("[?&]" + name +"\=([^&]+)","g");
264 var matcher = pattern.exec(url);
265 var items = null;
266 if(matcher != null){
267 try{
268 items = decodeURIComponent(decodeURIComponent(matcher[1]));
269 }catch(e){
270 try{
271 items = decodeURIComponent(matcher[1]);
272 }catch(e){
273 items = matcher[1];
274 }
275 }
276 }
277 return items;
278 }
279 //加载页面
280 $(document).ready(function(){
281 var url = window.location;
282
283 //加载数据
284 $("#btn").click(function(){
285 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0");
286 });
287 //分页处理<数字页数>
288 $("ul li a").click(function(){
289 var name = $(this).attr("name");
290 pageClick(name);
291 });
292 //实现上一页/下一页跳转
293 $("#prev").click(function(){
294 var currentPage = getUrlParam(url,"offset"); //获取当前页码
295 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset="+(parseInt(currentPage)-1).toString());
296 });
297
298 $("#next").click(function(){
299 var currentPage = getUrlParam(url,"offset"); //获取当前页码
300 console.log(currentPage);
301 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset="+(parseInt(currentPage)+1).toString());
302 });
303
304 });
305
306 </script>
307 </html>
