参考举例：
function $(id) {
return document.getElementById(id)
} //定义获取ID的方法
function GotoPage(num) { //跳转页
Page = num
OutputHtml()
}
var PageSize = 9//每页个数
var Page = 1//当前页码
function OutputHtml() {
var obj = eval(siteList)//获取JSON
var sites = obj.sites
//获取分页总数
var Pages = Math.floor((sites.length - 1) / PageSize) + 1
if (Page <1) Page = 1//如果当前页码小于1
if (Page >Pages) Page = Pages//如果当前页码大于总数
var Temp = ""
var BeginNO = (Page - 1) * PageSize + 1//开始编号
var EndNO = Page * PageSize//结束编号
if (EndNO >sites.length) EndNO = sites.length
if (EndNO == 0) BeginNO = 0
if (! (Page <= Pages)) Page = Pages
$("total").innerHTML = "Total:<strong class='f90'>" + sites.length + "</strong> Show:<strong class='f90'>" + BeginNO + "-" + EndNO + "</strong>"
//分页
if (Page >1 &&Page !== 1) {
Temp = "<a href='javascript:void(0)' onclick='GotoPage(1)'><<Index</a><a href='javascript:void(0)' onclick='GotoPage(" + (Page - 1) + ")'>Previous</a>"
} else {
Temp = "<<Index Previous "
}
//完美的翻页列表
var PageFrontSum = 3//当页前显示个数
var PageBackSum = 3//当页后显示个数
var PageFront = PageFrontSum - (Page - 1)
var PageBack = PageBackSum - (Pages - Page)
if (PageFront >0 &&PageBack <0) PageBackSum += PageFront//前少后多，前剩余空位给后
if (PageBack >0 &&PageFront <0) PageFrontSum += PageBack//后少前多，后剩余空位给前
var PageFrontBegin = Page - PageFrontSum
if (PageFrontBegin <1) PageFrontBegin = 1
var PageFrontEnd = Page + PageBackSum
if (PageFrontEnd >Pages) PageFrontEnd = Pages
if (PageFrontBegin != 1) Temp += '<a href="javascript:void(0)" onclick="GotoPage(' + (Page - 10) + ')" title="前10页">..</a>'
for (var i = PageFrontBegini <Pagei++) {
Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>"
}
Temp += " <strong class='f90'>" + Page + "</strong>"
for (var i = Page + 1i <= PageFrontEndi++) {
Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>"
}
if (PageFrontEnd != Pages) Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 10) + ")' title='后10页'>..</a>"
if (Page != Pages) {
Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 1) + ")'>Next</a><a href='javascript:void(0)' onclick='GotoPage(" + Pages + ")'>Last>></a>"
} else {
Temp += " Next Last>>"
}
$("pagelist").innerHTML = Temp
//输出数据
if (EndNO == 0) { //如果为空
$("content").innerHTML += "<h1>No Images</h1>"
return
}
var html = ""
for (var i = BeginNO - 1i <EndNOi++) {
html += "<div class='entry'>"
html += "<a href='" + sites[i].Url + "' rel='bookmark' title=" + sites[i].Name + ">"
html += "<img src='" + sites[i].Pic + "' width='200' height='170' />"
html += "<p class='url'><span>" + sites[i].Name + "</span></p></a>"
html += "</div>"
}
$("content").innerHTML = html
clickShow()//调用鼠标点击事件
//键盘左右键翻页
document.onkeydown = function(e) {
var theEvent = window.event || e
var code = theEvent.keyCode || theEvent.which
if (code == 37) {
if (Page >1 &&Page !== 1) {
GotoPage(Page - 1)
}
}
if (code == 39) {
if (Page != Pages) {
GotoPage(Page + 1)
}
}
}
//鼠标滚轮翻页
function handle(delta) {
if (delta >0) {
if (Page >1 &&Page !== 1) {
GotoPage(Page - 1)
}
} else {
if (Page != Pages) {
GotoPage(Page + 1)
}
}
}
function wheel(event) {
var delta = 0
if (!event)
/* For IE. */
event = window.event
if (event.wheelDelta) {
/* IE或者Opera. */
delta = event.wheelDelta / 120
/** 在Opera9中，事件处理不同于IE
*/
if (window.opera) delta = -delta
} else if (event.detail) {
/** 兼容Mozilla. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail / 3
}
/** 如果 增量不等于0则触发
* 主要功能为测试滚轮向上滚或者是向下
*/
if (delta) handle(delta)
}
/** 初始化 */
if (window.addEventListener)
/** Mozilla的基于DOM的滚轮事件 **/
window.addEventListener("DOMMouseScroll", wheel, false)
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel
}
//获取链接地址和网站名称
function showLink(source) {
var siteUrl = $("siteurl")
var siteName = $("sitename")
var description = $("description")
if (source.getAttribute("rel") == "bookmark") {
var url = source.getAttribute("href")
var title = source.getAttribute("title")
siteUrl.innerHTML = "<a href='" + url + "' target='_blank'>" + url + "</a>"
siteName.innerHTML = title
}
}
//鼠标点击事件
function clickShow() {
var links = $("content").getElementsByTagName("a")
for (var i = 0i <links.lengthi++) {
var url = links[i].getAttribute("href")
var title = links[i].getAttribute("title")
links[i].onclick = function() {
showLink(this)
return false
}
}
}
说明：
1、读取外部数据JSON并根据设置分页显示，添加删除酷站都可以在JSON文件里改；
2、点击酷站后，右侧的框里显示网站的地址和名称并带有链接，DESCRIPTION部分偷了个懒没写，需要的可以自己加；
3、支持键盘翻页和鼠标滚轮翻页；
// 第一步，获取JSON数据$http.get("xxx.json").success(function(data){
$scope.currentData = data//定义变量存储获取到的JSON数据
})
$scope.tableData = [] // 定义表格展示用到的数据
$scope.currentPage = 1//定义初始页码
$scope.pageSize = 5 // 定义每页的数据条数
// HTML写个表格，这个不难，自己写
ng-repeat = "tableData" // 表格数据ng-repeat 循环赋值
// 翻页功能
$scope.changePage = function(type,$scope.currentPage){
// 清空展示的数据
$scope.tableData = []
// 上一页
if(type === 'prev'){
Math.min(1,$scope.currentPage--)// 页码递减
$scope.currentData.each(function(index,item){
// 循环读取表格数据，用来赋值给表格展示的数组
// 如果当前的下标是当前页的范围，那么丢给表格展示数据用到的变量数组
if($scope.currentPage * $scope.pageSize > index && index >= ($scope.currentPage - 1)*$scope.pageSize){
$scope.tableData.push(item)
}
})
}
else{
// 自己写，同样的逻辑
}
}
// 进入界面，调用一遍翻页功能，不然没数据。
/**
* 有的地方自己适当改一下，没写的那么标准
*/
你直接用jquery就可以了，把数据全部取出来以后，直接在页面上分页。这个是js里的代码/*分页，每页4个*/$(document).ready(function(){
$('ul.paginated2').each(function(){ var currentPage=0//显示10项，隐藏显示内容的前面的项和后面的项
var numPerPage=3
var $ul=$(this)
var repaginate=function(){
$ul.find('li').show()
.slice(0,currentPage*numPerPage)
.hide()
.end()
.slice((currentPage+1)*numPerPage+1).hide().end()}
var numRows=$('ul.paginated2 li').length//添加分页行显示
//alert(numRows)
var numPages=Math.ceil(numRows/numPerPage)
var $pager=$('<div class="pager"></div>')
for(var page=0page<numPagespage++){
$('<div class="page-number">'+(page+1)+'</div>')
.bind('click',{'newPage':page},function(event){
currentPage=event.data['newPage']
repaginate()
$(this).addClass('active').siblings().removeClass('active')
})
.appendTo($pager).addClass('clickable')
}
$pager.find('div.page-number:first').addClass('active')
$pager.insertBefore($ul)
repaginate()
})})
