jquery json getjson 翻页

最新推荐文章于 2024-04-30 17:04:54 发布

D6元素

最新推荐文章于 2024-04-30 17:04:54 发布

阅读量411

点赞数

文章标签： jquery json getjson javascript html function

本文链接：https://blog.csdn.net/jiangquan1982/article/details/4294615

版权

由于本人比较懒，这段是从网上找的一个代码，直接改的，对于要实现网页全部静态化的朋友还是大有启发的。这也是我经过两天才摸索明白的，希望大家多多提意见，还有祝和我一样喜欢jquery脚本框架的朋友都有一份好工作。

index.html:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>首页</title>
<script language="JavaScript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style type="text/css">
.scroll{ font-size:12px; text-align:center;}
.li{ font-size:12px;}
.li_span{ float:right; padding-right:10px; font-size:12px;}
</style>
</head>

<body>

<table width="100%" height="100%">
<tr>
<td><!-ul_list_id 显示列表数据--->
    <div id='ul_list_id'>
     <div>
</td>
</tr>
<tr>
<td>
<!-page_id 显示翻页列表--->
    <div id="page_id" class="scroll">
</div>
</td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
         var search_content_array=[];
         var content_array=[];

   function make_content_list(obj){
    var html='<ul><li class="li">标题：'+obj.newsTitle+'</li><li class="li_span">时间：'+obj.UpdateTime+'</span></li></ul>';
    return html;
        }

function make_content_footer(obj){
var shouye='load_html_start(1)';
var moye='load_html_start('+obj.total_page+')';

var html='共'+obj.total_page+'页';
if(obj.total_page>1){
html+='  <a href="javascript:'+shouye+';">首页  </a>';
var page_sum=3;
var page=Math.floor(page_sum/2);

var begin=obj.page-page;
var end=obj.page+page;
begin=begin<1?1:begin;

var temp=end-begin;
if(temp<(page_sum-1)){
temp=page_sum-temp-1;
end=end+temp;
}

if(end>obj.total_page){
temp=end-obj.total_page;
begin=begin-temp;
end=obj.total_page;
begin=begin<1?1:begin;
}

//var c=obj.page;
if(obj.page>1){
html+='<a href="javascript:load_html_start('+(obj.page-1)+');">上一页  </a>';
}else{
//html+='<a>上一页  </a>';
}

for(var c=begin;c<=end;c++){
if(c==obj.page){
html+='<a class="cur">'+c+'  </a>';
}else{
html+='<a href="javascript:load_html_start('+c+');">'+c+'  </a>';
}
}

if(obj.page<obj.total_page){
html+='<a href="javascript:load_html_start('+(obj.page+1)+')">下一页  </a>';
}else{
//html+='<a>下一页  </a>';
}
}

html+='<a href="javascript:'+moye+';">尾页</a>';

return html;

}
/**翻页**/
function load_html_start(page){

var total_item=2; //每页显示的条数

var length=search_content_array.length;
var total_page=Math.ceil(length/total_item);
var begin=(page-1)*total_item;
var end=page*total_item;

var message_obj=new Object();
message_obj.page=page;
message_obj.total_page=total_page;

var message_obj2=new Object();
message_obj2.length=length;
var buf=[];
for(var i=0;i<search_content_array.length;i++){
if((i>=begin)&&(i<end)){
buf.push(make_content_list(search_content_array[i]));
}
}

jQuery("#ul_list_id").html(buf.join(""));

jQuery("#page_id").html(make_content_footer(message_obj));
}

function Start(){$.getJSON("data2.js", function(json){

search_content_array=json;
load_html_start(1); });
}

$(document).ready(function(){Start();});

</script>

</body>
</html>

2 .数据部分（这部分大家可以自由发挥，从数据库里调出数据以后，将字符串拼成json的格式，不知道json的朋友，自己google一下吧，很简单的东西，看看就明白啦。）

data2.js

[{"id":6,"newsTitle":"321","newsBtype":1,"newsStype":2,"UpdateTime":"2009-4-28 下午 04:31:48","newsAuthor":"/u7BA1/u7406/u54583","SchoolLink":null},{"id":5,"newsTitle":"/u89C6/u9891/u65B0/u95FB","newsBtype":1,"newsStype":3,"UpdateTime":"2009-4-28 下午 04:23:37","newsAuthor":"/u7BA1/u7406/u5458","SchoolLink":null},{"id":4,"newsTitle":"/u672C/u533A/u65B0/u95FB","newsBtype":1,"newsStype":2,"UpdateTime":"2009-4-28 下午 04:23:20","newsAuthor":"/u7BA1/u7406/u5458","SchoolLink":null},{"id":2,"newsTitle":"/u672C/u533A/u65B0/u95FB/u672C/u533A/u65B0/u95FB/u672C/u533A/u65B0/u95FB/u672C/u533A/u65B0/u95FB/u672C/u533A/u65B0/u95FB/u672C/u533A/u65B0/u95FB","newsBtype":1,"newsStype":2,"UpdateTime":"2009-4-16 下午 03:17:50","newsAuthor":"","SchoolLink":null},{"id":1,"newsTitle":"/u89C6/u9891/u65B0/u95FB/u89C6/u9891/u65B0/u95FB/u89C6/u9891/u65B0/u95FB/u89C6/u9891/u65B0/u95FB/u89C6/u9891/u65B0/u95FB/u89C6/u9891/u65B0/u95FB","newsBtype":1,"newsStype":3,"UpdateTime":"2009-4-16 下午 03:14:34","newsAuthor":"","SchoolLink":null},{"id":3,"newsTitle":"/u65B9/u5F0F/u6253/u6CD5","newsBtype":1,"newsStype":0,"UpdateTime":"2009-4-16 下午 01:29:11","newsAuthor":null,"SchoolLink":null}]

D6元素

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery json getjson 翻页

由于本人比较懒，这段是从网上找的一个代码，直接改的，对于要实现网页全部静态化的朋友还是大有启发的。这也是我经过两天才摸索明白的，希望大家多多提意见，还有祝和我一样喜欢jquery脚本框架的朋友都有一份好工作。index.html:%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> http://www.w3.org/TR/xhtml1/DTD/xhtml1-
复制链接

扫一扫