JS JQ table分页器

我就是我 2023-01-19 08:10 39阅读 0赞

## style样式 ##

.ul li { 
          padding: 0 5px;
          height: 20px;
          list-style: none;
          float: left;
          border: 1px solid rgb(242,242,242);
          text-align: center;
          cursor: pointer;
        }
    	.ul{ 
    	  position:absolute;
    		top:99%;
           left:80%;
    	}
         .actives { 
          background: rgb(29,29,29);
          color: #fff;
        }

## css样式 ##

## jsjq 模拟数据 ##

$(function(){ 
    var data = [{ 
        "errno": 0,
        "errmsg": "success",
        "data": [
            { 
                "id": "1155",
                "ak": "bjh_client",
                "room_id": "7123619",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7123619",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1620370729",
                "end_time": "0",
                "create_time": "2021-05-07 14:58:43",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-05-07 14:58:49"
            },
            { 
                "id": "1150",
                "ak": "bjh_client",
                "room_id": "7117918",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117918",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1619087572",
                "end_time": "0",
                "create_time": "2021-04-22 18:32:51",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-22 18:32:52"
            },
            { 
                "id": "1148",
                "ak": "bjh_client",
                "room_id": "7117604",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117604",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1619070089",
                "end_time": "0",
                "create_time": "2021-04-22 13:41:27",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-22 13:41:29"
            },
            { 
                "id": "1144",
                "ak": "bjh_client",
                "room_id": "7117149",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117149",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618994166",
                "end_time": "0",
                "create_time": "2021-04-21 16:36:04",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:36:06"
            },
            { 
                "id": "1143",
                "ak": "bjh_client",
                "room_id": "7117143",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117143",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618993763",
                "end_time": "0",
                "create_time": "2021-04-21 16:29:22",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:29:23"
            },
            { 
                "id": "1142",
                "ak": "bjh_client",
                "room_id": "7117140",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117140",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618993721",
                "end_time": "0",
                "create_time": "2021-04-21 16:28:39",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:28:41"
            },
            { 
                "id": "1141",
                "ak": "bjh_client",
                "room_id": "7117136",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117136",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618993566",
                "end_time": "0",
                "create_time": "2021-04-21 16:26:04",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:26:06"
            },
            { 
                "id": "1140",
                "ak": "bjh_client",
                "room_id": "7117133",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117133",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618993435",
                "end_time": "0",
                "create_time": "2021-04-21 16:23:54",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:23:55"
            },
            { 
                "id": "1139",
                "ak": "bjh_client",
                "room_id": "7117121",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117121",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618993007",
                "end_time": "0",
                "create_time": "2021-04-21 16:16:46",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:16:47"
            },
            { 
                "id": "1138",
                "ak": "bjh_client",
                "room_id": "7117118",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117118",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618992952",
                "end_time": "0",
                "create_time": "2021-04-21 16:15:51",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:15:52"
            },
            { 
                "id": "1137",
                "ak": "bjh_client",
                "room_id": "7117115",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117115",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618992921",
                "end_time": "0",
                "create_time": "2021-04-21 16:15:20",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:15:21"
            },
            { 
                "id": "1136",
                "ak": "bjh_client",
                "room_id": "7117112",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117112",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618992865",
                "end_time": "0",
                "create_time": "2021-04-21 16:14:24",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:14:26"
            },
            { 
                "id": "1135",
                "ak": "bjh_client",
                "room_id": "7117109",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117109",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618992702",
                "end_time": "0",
                "create_time": "2021-04-21 16:11:39",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:11:42"
            },
            { 
                "id": "1134",
                "ak": "bjh_client",
                "room_id": "7117102",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117102",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618992264",
                "end_time": "0",
                "create_time": "2021-04-21 16:04:23",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:04:24"
            },
            { 
                "id": "1133",
                "ak": "bjh_client",
                "room_id": "7117097",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117097",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618992193",
                "end_time": "0",
                "create_time": "2021-04-21 16:03:13",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:03:13"
            },
            { 
                "id": "1132",
                "ak": "bjh_client",
                "room_id": "7117092",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117092",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618992134",
                "end_time": "0",
                "create_time": "2021-04-21 16:02:14",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:02:15"
            },
            { 
                "id": "1131",
                "ak": "bjh_client",
                "room_id": "7117089",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117089",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618992084",
                "end_time": "0",
                "create_time": "2021-04-21 16:01:23",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:01:24"
            },
            { 
                "id": "1130",
                "ak": "bjh_client",
                "room_id": "7117084",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117084",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618992018",
                "end_time": "0",
                "create_time": "2021-04-21 16:00:17",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 16:00:19"
            },
            { 
                "id": "1129",
                "ak": "bjh_client",
                "room_id": "7117081",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117081",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618991964",
                "end_time": "0",
                "create_time": "2021-04-21 15:59:23",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 15:59:24"
            },
            { 
                "id": "1128",
                "ak": "bjh_client",
                "room_id": "7117074",
                "uid": "2802226267",
                "title": "诗和远方|星辰大海",
                "stream": "stream_bduid_2802226267_7117074",
                "status": "0",
                "screen": "1",
                "tag": "健康",
                "pull_url": "rtmp://10.12.72.106:8935/live/test",
                "release_time": "1618991921",
                "end_time": "0",
                "create_time": "2021-04-21 15:58:40",
                "is_test_live": "1",
                "ask_answer": "0",
                "operator": "",
                "update_time": "2021-04-21 15:58:41"
            }
        ],
        "count": 323
    }]
    var  aa  =JSON.stringify(data[0].data)
    var formtable  = JSON.parse(aa)
    var  len = formtable.length
    var  num = 18
    var totalPage = Math.ceil(len/num)
    var nownum = 1
    var str = `<li class="prev">上一页</li>`
    for (var i = 1; i <= totalPage; i++) { 
         str += `<li class="li">${ i}</li>`
          }
          str += `<li class="next">下一页</li>`
            $('.ul').html(str)  //展示页码
    	      showinfo(formtable, num, nownum)//展示首页数据
             $('.ul .li').eq(nownum - 1).addClass('active')
               for (let i = 0; i < totalPage; i++) {   //根据点击页码展示数据
                  $('.ul .li').eq(i).on('click', function () { 
                      nownum = i + 1;
                       lichange(i)
                    showinfo(formtable, num, nownum )
                         })
    	                     }	
                                     //点击切换上一页
                           $('.prev').on('click', function () { 
                          if(nownum == 1) { 
                     alert('已经是第一页了!')
                         } else { 
                       nownum = nownum - 1
                         lichange(nownum - 1)
                          showinfo(formtable, num, nownum)
                       }
    		  })
               $('.next').on('click', function () { 
                      if (nownum == totalPage) { 
                        alert('已经最后一页了!')
                          } else { 
                      nownum = nownum + 1
                      lichange(nownum - 1)
                     showinfo(formtable, num, nownum)
                   }
                })
    
    })
    
    
     //展示数据
    	 function showinfo(res,n,now){ 
    		 var data = res
    		 var resdata = []
    		 for(var i in data){ 
    			 if(data){ 
    				 resdata.push(data[i]) 
    			 }
    		 }
    		 console.log(resdata)
    		  let result = resdata
    		  var str = `<table> <th>id</th> <th>room_id</th> <th>uid</th> <th>title</th> <th>operator</th> <th>time</th> <th>status</th> <th>操作</th> </table>`
              var i = (now - 1) * n        //从下标多少开始截取
    		  console.log(i)
              if (now === Math.ceil(res.length / n)) { //如果是最后一页
              result = result.slice(i);
              var num = result.length
             for (var k = 0; k < num; k++) { 
             str+= `<tr> <td>${ result[k].id}</td> <td>${ result[k].room_id}</td> <td>${ result[k].uid}</td> <td>${ result[k].title}</td> <td>${ result[k].operator}</td> <td>${ result[k].create_time}</td> <td> ${ result[k].status == "0" ? ' 未开播 ' : '' } ${ result[k].status == "1" ? ' 未开播 ' : '' } ${ result[k].status == "-1" ? ' 未开播 ' : '' } </td> <td><button>操作</button></td> </tr>`
    
             }
            } else {  //不是最后一页
    		 var resultlength = result.length	
    		if( resultlength < 10 ){ 
    			  result = result.splice(i);
                  for (var j = 0; j < resultlength; j++) { 
                  str+= `<tr> <td>${ result[j].id}</td> <td>${ result[j].room_id}</td> <td>${ result[j].uid}</td> <td>${ result[j].title}</td> <td>${ result[j].operator}</td> <td>${ result[j].create_time}</td> <td> ${ result[j].status == "0" ? ' 未开播 ' : '' } ${ result[j].status == "1" ? ' 开播中 ' : '' } ${ result[j].status == "-1"? ' 已关播 ' : '' } </td> <td><button>操作</button></td> </tr>`
               }
    		 }else if(resultlength>10){ 
    			 result = result.splice(i);
                 for (var j = 0; j < n; j++) { 	
            str+= `<tr> <td>${ result[j].id}</td> <td>${ result[j].room_id}</td> <td>${ result[j].uid}</td> <td>${ result[j].title}</td> <td>${ result[j].operator}</td> <td>${ result[j].create_time}</td> <td> ${ result[j].status == "0" ? ' 未开播 ' : '' } ${ result[j].status == "1" ? ' 开播中 ' : '' } ${ result[j].status == "-1"? ' 已关播 ' : '' } </td> <td><button>操作</button></td> </tr>`
             }
    		}
           
         }
         $('#table_from').html(str)
         }