json数据源,如下:
function _LessonJsonData(){
var str = [
{
"id":"1",//id
"name":"sl",
"imgName":"/images/xx.jpg",
"link":"/xx/xx.aspx?id=1",
"type":"sl",
"lessonCountText":"xxx",//课时
"desc":"xxx",//介绍
"content"://内容
[
{
"title":"第一讲 slxxx",
"value":"<ul><li>一.xxx</li><li>二.xxx</li></ul>"
},
{
"title":"第二讲 xxx",
"value":"<ul><li>一.xxx</li><li>xxxx</li></ul>"
},
{
"title":"第三讲 xxx",
"value":"<ul><li>一.xx</li><li>二.xx</li><li>三.xx</li><li>四.xx</li><li>五.xx</li><li>六.xx</li></ul>"
},
{
"title":"第四讲:xxx",
"value":"<ul><li>一、xx/50/xx</li><li>二、xx</li><li>三、xx</li><li>四、xx</li></ul>"
},
{
"title":"第五讲:slxx",
"value":"<ul><li>一、slxx</li><li>二、slxx</li><li>三、slxx</li></ul>"
}
]
},
{
"id":"2",//id
"name":"xmz",
"imgName":"/images/xx.jpg",
"link":"/xx/xx.aspx?id=2",
"type":"xmz",
"lessonCountText":"xx",//课时
"desc":"xxxxxxxxxxxxxxxxx",//介绍
"content"://内容
[
{
"title":"第一讲 xxxxx",
"value":"<ul><li>xxxxx</li></ul>"
},
{
"title":"第二讲:xxxxxxx",
"value":"<ul><li></li></ul>"
},
{
"title":"第三讲:xxxxx",
"value":"<ul><li>xxxxxx</li></ul>"
},
{
"title":"第四讲:xxxxxxxxxx",
"value":"<ul><li>xxxxxxx</li></ul>"
},
{
"title":"第五讲:xxxxxxx",
"value":"<ul><li></li></ul>"
},
{
"title":"第六讲:xxxxxxxxxxxxx",
"value":"<ul><li></li></ul>"
},
{
"title":"第七讲:xxxxxxxxxxx",
"value":"<ul><li></li></ul>"
},
{
"title":"第八讲:xxxxxxxxxx",
"value":"<ul><li></li></ul>"
},
{
"title":"第九讲:xxxxxxxxxx",
"value":"<ul><li></li></ul>"
},
{
"title":"第十讲:xxxxxxxxxxxx",
"value":"<ul><li></li></ul>"
},
{
"title":"第十一讲:xxxxxxxxxx",
"value":"<ul><li></li></ul>"
},
{
"title":"第十二讲:xxxxxxxx",
"value":"<ul><li></li></ul>"
},
{
"title":"第十三讲:xxxxxxxxxxxx",
"value":"<ul><li></li></ul>"
}
]
}
]
}
javascript代码实现,如下
<script type="text/javascript">
//根据课程类型 查询 该类型下的所有课程,返回一个二维数组
function getInforByType(lessonType) {
var _LessonJsonData2 = new Array();
var dz = 0;
if (lessonType == "全部") {
for (var ii1 = 0; ii1 < _LessonJsonData().length; ii1++) {
_LessonJsonData2[ii1] = _LessonJsonData()[ii1];
}
} else {
for (var ii2 = 0; ii2 < _LessonJsonData().length; ii2++) {
if (lessonType == _LessonJsonData()[ii2].type) {
_LessonJsonData2[dz] = _LessonJsonData()[ii2];
dz++;
}
}
}
return _LessonJsonData2;
}
//返回一个二维数组
function ProcessArray(lessonData, pageSize) {
//计算出总页数
var _j;
if ((lessonData.length % pageSize != 0 && lessonData.length >= 16) || lessonData.length == 16) {
_j = lessonData.length / pageSize;
} else {
_j = lessonData.length / pageSize + 1;
}
//整理成[
// [["name":"nyb"],["name":"lj"],["name":"yy"],...],
// [["name":"zx"],["name":"wg"],["name":"jl"],...],
// ...
// ]
//便于分页
var parray = new Array();
var lsdata = new Array();
lsdata = lessonData;
for (var cp = 0; cp < parseInt(_j); cp++) {
var stime = new Array();
stime = lsdata.slice(0, pageSize);
parray[cp] = stime;
lsdata = lsdata.slice(pageSize, lsdata.length);
}
//
return parray;
}
//rtnjson:所有数据,pageSize:一页显示多少个,currentPage:当前页码
function ChangePager(rtnjson, pageSize, currentPage) {
//
var allData = ProcessArray(rtnjson, pageSize);
//
return allData[currentPage - 1];
}
//生成课程页面代码
function Cdata(lessonjson, psize, pcount) {
//
var _rtnjson = new Array();
_rtnjson = ChangePager(lessonjson, psize, pcount);
//
var strTotal = "";
var strTop = "<div class='kcss4'>";
var strMiddle;
var strClear = "<div class='clear'></div>";
var strBottom = "</div>";
//
for (var i2 = 0; i2 < _rtnjson.length; i2++) {
//
var _txtmsg = _rtnjson[i2];
//
var lessonName = _txtmsg.name;
var lessonImg = _txtmsg.imgName;
var lessonLink = _txtmsg.link;
strMiddle = "<div class='kcss4-1'>"
+ "<div class='kcss41-1'><img src='" + lessonImg + "' width='158' height='111' /></div>"
+ "<div class='kcss41-2'><a href='" + lessonLink + "'>" + lessonName + "</a></div>"
+ "</div>";
strTotal += strMiddle;
if ((i2 + 1) % 4 == 0 && (i2 + 1) >= 4) {
strTotal += strClear;
strTotal += strBottom;
strTotal += strTop;
}
}
return strTotal;
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var a1 = new Array();
a1 = getInforByType("全部");
//
$(".kcss341-context").html("").html(Cdata(a1, 16, 1));
_createCode(a1, 16); //生成翻页html并指定事件
//
//点击 类型按钮 时,...
$("label").click(function () {
var lba1 = new Array();
lba1 = getInforByType($(this).text());
$(".kcss341-context").html("").html(Cdata(lba1, 16, 1));
$(this).attr("class", "seleted").siblings("label").removeAttr("class");
_createCode(lba1, 16); //生成翻页html并指定事件
});
});
</script>
<script type="text/javascript">
//得到当前数据有多少页
function GetPagecount(rtnjson, pageSize) {
return ProcessArray(rtnjson, pageSize).length;
}
//生成翻页的HTML代码
function _createCode(mtotal, psize) {
$(".kcss351-context-bottom a").die("click");
//
$(".kcss351-context-bottom").html(""); //.append("<a href='#' class='prePage'>上一页</a> ");
var str = "";
for (var i = 0; i < GetPagecount(mtotal, psize); i++) {
if (i + 1 == 1) {
str += "<a href='#' class='currentPage'>" + (i + 1) + "</a> ";
} else if (i + 1 == GetPagecount(mtotal, psize)) {
str += "<a href='#'>" + (i + 1) + "</a> ";
} else {
str += "<a href='#'>" + (i + 1) + "</a> ";
}
}
$(".kcss351-context-bottom").append(str); // + "<a href='#' class='nextPage'>下一页</a> ");
//
$(".kcss351-context-bottom a").live("click", function () {
currentPage = $(this).text();
$(".kcss341-context").html("").html(Cdata(mtotal, 16, currentPage));
$(this).attr("class", "currentPage");
$(this).siblings("a").removeAttr("class");
});
}
</script>