html代码
<div class="bar">
<%--导航分页--%>
<div id="myPager" class="pager"></div>
</div>
<div id="tabs">
<ul id="tabContainer">
</ul>
</div>
js代码
<script>
var myPager = $('#myPager');
var blogCount = 30;//获取总共的页数
var currentPage = 1;//当前页码
var perPageNum = 10;
var showRange = 4;//显示页码宽度(*2)
var m = 0;
var n = 10;
var currentPageArray;
var sql = "";
var sql_search = "";
$(function () {
//添加分类选项卡
var tabContainer = $("#tabContainer");
var topic_index = 0;
currentPageArray = new Array(topics.length);
$.each(topics, function GenerateItem(key, value) {
if (key>=20) {
return false;//等同于break
}
var list = $("<li>");
var lnk = $("<a href='#tabs-" + key + "'>" + value.name + "</a>");
lnk.click(function switchTopic() {
//如果存储了之前页码,找回
if (currentPageArray[key] != null) {
currentPage = currentPageArray[key];
}
else {
currentPage = 1;
}
if (value.name != "综合") {
sql_search = "select * FROM [blog] WHERE [topic] like '%" + value.name + "%' OR [blogTitle] like '%" + value.name + "%'";
}
else {
sql_search = "select * FROM [blog]";
}
blogCount = getPageCount(sql_search);
freshPager(key, value.name);//填充页码
loadBlog('tabs-' + key, sql);
$("#tabs-" + key).sortable();
$("#tabs-" + key).disableSelection();
});
list.append(lnk);
tabContainer.append(list);
var tabDiv = $("<div id='tabs-" + key + "'>");
$("#tabs").append(tabDiv);
})
$("#tabs").tabs();//jquery UI 选项卡
//初始化加载综合列表
sql = "SELECT top 10 * FROM[blog] ORDER BY[BlogTime] DESC, [ID]";
blogCount = getPageCount("select * FROM [blog]");
loadBlog("tabs-0", sql);
freshPager(0, "综合");//获取总数填充页码
//综合页面的jquery-Ui
$("#tabs-0").sortable();
$("#tabs-0").disableSelection();
});
function getPageCount(sqlPara) {
var count = blogCount;
$.ajax({
url: "blog/Blogs.asmx/GetCount", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
ContentType: "application/json;charset=utf-8", //WebService 会返回Json类型
dataType: "json",
type: "Post", //访问WebService使用Post方式请求
data: "{searchCmd:\"" + sqlPara + "\"}", //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到
beforeSend: function (x) {
x.setRequestHeader("Content-Type", "application/json; charset=utf-8");
},
success: function (result) {//回调函数,result,返回值
count = result.d;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("<div title='getPageCount出错'>").text(XMLHttpRequest.responseText + '获取页码总量失败').dialog();
},
async: false,
});
return count;
}
//共用一套页码key=tab编号,value=关键词
function freshPager(key, value) {
var pageNum = Math.ceil(blogCount / perPageNum);//分页页码数
var startNum = currentPage - showRange;//开始页码
var endNum = currentPage + showRange;//结束页码
//开始页面小于1
if (startNum - showRange < 1) {
startNum = 1;
endNum = 1 + showRange * 2;
//结束页 不能大于总数
if (endNum > pageNum) {
endNum = pageNum
}
}
//最后一页页面大于总页数
if (endNum > pageNum) {
endNum = pageNum;
startNum = endNum - showRange * 2;
//开始页面 不能小于1
if (startNum < 0) { startNum = 1; }
}
m = (currentPage - 1) * perPageNum;//起始位置
n = m + perPageNum;//终止位置
//根据关键词组合sql
if (value == "综合" || value == null) {
//alert(blogCount+"frehpager");
sql = "select top 10 * from (select top " + (blogCount - m) + " * from [blog] ORDER BY [BlogTime], [ID]) order by [BlogTime] DESC";
}
else {
sql = "select top 10 * from (select top " + (blogCount - m) + " * from [blog] WHERE [topic] like '%" + value + "%' OR [blogTitle] like '%" + value + "%' ORDER BY [BlogTime], [ID]) order by [BlogTime] DESC";
}
$('.pagerLnk').remove();//移除旧页码
var firstpage = $("<a class='pagerLnk' href=#" + 0 + ">").text('←');
firstpage.click(function loadfirst() {
currentPage = 1;
freshPager(0, "综合");
//loadBlog(0, "SELECT top 10 * FROM [blog] ORDER BY [BlogTime] DESC, [ID]");
});
myPager.append(firstpage);//添加新页码
for (var i = startNum; i <= endNum; i++) {
var page = $("<a class='pagerLnk' href=#" + i + ">").text(i);
page.click(function getBlogItem() {
currentPage = parseInt(this.textContent)
m = (currentPage - 1) * perPageNum;//起始位置
n = m + perPageNum;//终止位置
if (value == "综合" || value == null) {
sql = "select top 10 * from (select top " + (blogCount - m) + " * from [blog] ORDER BY [BlogTime], [ID]) order by [BlogTime] DESC";
}
else {
sql = "select top 10 * from (select top " + (blogCount - m) + " * from [blog] WHERE [topic] like '%" + value + "%' OR [blogTitle] like '%" + value + "%' ORDER BY [BlogTime], [ID]) order by [BlogTime] DESC";
}
freshPager(key, value);
loadBlog("tabs-" + key, sql);
});
myPager.append(page);//添加新页码
}
var lastpage = $("<a class='pagerLnk' href=#" + pageNum + ">").text('→');
lastpage.click(function loadLast() {
currentPage = pageNum;
freshPager(key, value);
});
myPager.append(lastpage);//添加新页码
} //id=tab编号,sql=选择10个
function loadBlog(id, sql) {
var field = $('#' + id);
//清除现有item//
field.empty(); //field.remove('.blogCard');
$.ajax({
url: "blog/Blogs.asmx/GetBlogs", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
ContentType: "application/json;charset=utf-8", //WebService 会返回Json类型
dataType: "json",
type: "Post", //访问WebService使用Post方式请求
data: "{searchCmd:\"" + sql + "\"}", //这里是要传递的参数
beforeSend: function (x) {
x.setRequestHeader("Content-Type", "application/json; charset=utf-8");
},
success: function (result) {//回调函数,result,返回值
var blogs = result.d;
$.each(blogs, function GenerateItem(key, value) {
//先建立h2
var h2 = $("<h2>");
//先建立a
var link = $("<a href=" + value.BlogUrl + ">" + value.BlogTitle + "</a>");
h2.append(link);
var imgListContainer = $("<div>");
imgListContainer.css("margin-top", "10px");
imgListContainer.css("width", "100%");
imgListContainer.css("overflow", "hidden");
var imgUrlList = value.BlogImage.split(',');
for (var i = 0; i < imgUrlList.length; i++) {
if (i >= 3) {
break;
}
var imgurl = imgUrlList[i];
//如果图片使用了相对地址转换为绝对地址
if (imgUrlList[i].indexOf("editor/attached/") > 0) {
if (imgUrlList[i].indexOf("songshizhao.com") < 0) {
imgurl = "http://www.songshizhao.com" + imgUrlList[i];
}
}
var img = $("<img class='title-img' src=" + imgurl + " />");
//建立一个图片容器,将图片填入(同时使用JQ UI的 sizalbe)
var imgContainer = $("<div class='ui-widget-content imgContainer'>").resizable().append(img);
//如果图片加载出错
img.error(function hide() {
imgContainer.remove();//如果加载图片出错,则取消显示图片容器和图片
});
imgListContainer.append(imgContainer);
}
//a和imglist加入h2中
//h2.append(imgListContainer);
//h2加入li中
var list = $("<li class='blogCard'></li>");
list.append(h2);
list.append(imgListContainer);
//
var authorInfo = $("<div class='author'></div>");
//将data(number)时间格式改为yy-mm-dd
var date = new Date(parseInt(value.BlogTime.replace("/Date(", "").replace(")/", ""), 10));
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var ymd = year + '-' + month + '-' + day;
authorInfo.append("作者:" + value.BlogAuthor + " 时间:" + ymd + " <i class='demo-icon icon-eye'></i>" + value.BlogStatis + "");
list.append(authorInfo);
field.append(list);
})
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("<div title='loadBlog出错'>").text(sql + XMLHttpRequest.responseText).dialog();
}
});
}
</script>