1、通过append方法输出数据到页面
/***************************根据企业ID获取企业信息*********************/ OBJindexPage.GetNewQiYeInfo = function () { $.getJSON("/Qiye/handler/QiyeBookInfo.ashx?callback=?", { QiYeID: ConfigQiYeInfoId.Get() ,action:"GetNewQiYeInfo"}, function (data) { if (data == "0") { window.location.herf = "/Qiye/index.htm"; return; } else { var QiyeInfo = ""; QiyeInfo += " <img src="" + data[0].Logo + "" class="top_left_logo"/>"; QiyeInfo += " <div id="top_left_div">"; QiyeInfo += " <div class="top_left_title">" + data[0].Name + "</div>"; QiyeInfo += " <div class="top_left_opentime">借阅开放时间:" + data[0].Etime + "</div>"; QiyeInfo += " <div class="top_left_tel">联系电话:" + data[0].Tel + "</div>"; QiyeInfo += " <div class="top_leftImg"><a href="" + data[0].HomePage + ""> <img src="Images/guanwang.png" /></a> </div>"; QiyeInfo += " </div>"; $("#top_left").append(QiyeInfo); } }); };
2、通过jquery.tmpl.js插件接收数据
htm 写法
<div id="bookdiv" class="bookdiv">
</div>
<script id="bookTmpl" type="text/html" class="bookTmpl"> //书写类型为 "text/html"的script 来做数据模板
<dl>
<dt><a target="_blank" href="/Book/Book_Info.aspx?id=${BookId}&bookCount=2"><img src="${BookImg}"/></a></dt> //数据属性名用${}
<dd><a target="_blank" href="/Book/Book_Info.aspx?id=${BookId}&bookCount=2">${BookName.length > 8 ? BookName.substring(0,8) + "…" : BookName}</a></dd> //限制字符串长度
</dl>
</script>
js写法
$.getJSON('/Qiye/handler/QiyeBookInfo.ashx?callback=?', parameter, function(data) {
if (data=="0") {
$("#bookdiv").empty();
var noBookTips = " <span id="NoBookTips">此馆暂无图书</span>";
$("#bookdiv").append(noBookTips);
} else {
$("#bookdiv").empty();
$("#bookTmpl").render(data).appendTo("#bookdiv"); //把数据添加到模板,然后再插入到父节点
}
});
3、分页事件的运用
运用PagesWidget.js插件
/***************************企业图书分页数据************************/
OBJindexPage.GetQiYeList = function() {
$("#ListInfoPages").empty(); //清空页码的div
var pageSize = 12; //显示数据的数量
var parameter = OBJindexPage.GetSql(); //查找的条件
parameter.QiYeID = ConfigQiYeInfoId.Get(); //参数~
var iCount = 0;
function GetCount() {
parameter.action = "GetQiYeBookCount";
$.ajaxSetup({ cache: true });
$.ajaxSetup({ async: false });
$.getJSON('/Qiye/handler/QiyeBookInfo.ashx?&callback=?', parameter, function(data) {
iCount = data;
});
return iCount; //返回数据全部的数量,根据这个数量和每页显示的数量来分页
}
function GetBookToQiYeList(pageIndex) {
parameter.PageIndex = pageIndex; //页码
parameter.PageSize = pageSize;
parameter.action = "GetQiYeBookList";
$.getJSON('/Qiye/handler/QiyeBookInfo.ashx?callback=?', parameter, function(data) {
if (data=="0") {
$("#bookdiv").empty();
var noBookTips = " <span id="NoBookTips">此馆暂无图书</span>";
$("#bookdiv").append(noBookTips);
} else {
$("#bookdiv").empty();
$("#bookTmpl").render(data).appendTo("#bookdiv");
}
});
}
var iBookToCoffeeCount = GetCount();
var buttonTextArray = new Array("first", "last", "<", ">");
var pagesParam = { //PagesWidget.js插件所需要的参数,就不一一细写
ButtonText: buttonTextArray,
PanelId: 'ListInfoPages',
Count: iBookToCoffeeCount,
PageSize: pageSize,
SearchText: false,
FirstLastPages: false,
Mousemove: true,
AjaxFn: GetBookToQiYeList
};
var oPages = CreatePagesWidget(pagesParam);
GetBookToQiYeList(1);
};