`
jickcai
  • 浏览: 243050 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery读取json数据 并翻页显示

jsonjQueryHTMLCC++ 
阅读更多
jQuery读取json数据 并翻页显示
详细见附件:
index.html
<!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=UTF-8" />
<title>json</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
ul{list-style-type:disc;}
</style>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td><!-ul_list_id 显示列表数据--->
    <ul  id='ul_list_id'>
     <ul>
</td>
</tr>
<tr>
<td>
<!-page_id 显示翻页列表--->
    <div id="page_id">
  </div>
  </td>
  </tr>
</table>
<script type="text/javascript" src="movie.js"></script>
<script type="text/javascript">

jQuery(document).ready(function(){
Start({url:'list.json'});//开始加载数据 list.json是数据
});
</script>

</body>
</html>

movie.js

var search_content_array=[];
var content_array=[];
/**合成中间html**/
function make_content_list(obj){
var html='  <li>\
                    <span class="title"><a href="'+obj.href+'" title="'+obj.title+'" target="_blank">'+obj.title+'</a></span>\
                    <span class="sort">类别：'+obj.lb+'</span>\
                    <span class="country">国籍：'+obj.na+'</span>\
                    <span class="date">时间：'+obj.syrq+'</span>\
                </li>';
return html;
}

/**合成底部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+='&nbsp;&nbsp;<a href="javascript:'+shouye+';">首页&nbsp;&nbsp;</a>';
var page_sum=5;
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)+');">上一页&nbsp;&nbsp;</a>';
}else{
//html+='<a>上一页&nbsp;&nbsp;</a>';
}

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

if(obj.page<obj.total_page){
html+='<a href="javascript:load_html_start('+(obj.page+1)+')">下一页&nbsp;&nbsp;</a>';
}else{
//html+='<a>下一页&nbsp;&nbsp;</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(obj){
function Lfill0(num){
return (num>9?num:"0"+num);
}
var url =obj.url+"?random="+Math.random();
jQuery.ajax({
  type:"GET",
  url:url,
  dataType:"json",
  global:false,
   success: function(json){
search_content_array=json;
   load_html_start(1);
   }
});

}

list.json

[{title:'突变异种',href:'t20090403_6199397.html',img:'W020090403492896120079.jpg',na:'欧美',lx:'电影',lb:'动作,恐怖',syrq:'09-05-06'},{title:'母亲',href:'t20090403_6199424.html',img:'W020090403528908669193.jpg',na:'日韩',lx:'电影',lb:'其它',syrq:'09-06-03'},{title:'金钱帝国',href:'t20090403_6199407.html',img:'http://122.11.50.133:8080/preview/vodoneW020090403505372266131.jpg',na:'港台',lx:'电影',lb:'其它',syrq:'09-04-30'},{title:'该隐和亚伯',href:'t20090403_6199391.html',img:'W020090403431108411473.jpg',na:'',lx:'',lb:'',syrq:'09-02-18'},{title:'杀虎口',href:'t20090402_6199130.html',img:'W020090402659124135794.jpg',na:'大陆',lx:'电视剧',lb:'动作,军事',syrq:''},{title:'海盗电台',href:'t20090402_6199119.html',img:'W020090402622425510222.jpg',na:'欧美',lx:'电影',lb:'喜剧',syrq:'09-04-01'},{title:'幕后大老爷',href:'t20090403_6199386.html',img:'W020090403410513007951.jpg',na:'港台',lx:'电视剧',lb:'其它',syrq:'09-04-06'},{title:'该隐和亚伯',href:'t20090403_6199391.html',img:'W020090403431108411473.jpg',na:'日韩',lx:'电视剧',lb:'爱情,其它',syrq:'09-02-18'},{title:'杀虎口',href:'t20090402_6199130.html',img:'W020090402659124135794.jpg',na:'大陆',lx:'电视剧',lb:'其它,军事',syrq:''},{title:'郑和下西洋',href:'t20090401_6198793.html',img:'W020090401559602560696.jpg',na:'大陆',lx:'电视剧',lb:'其它',syrq:'09-03-25'},{title:'妻子的诱惑',href:'t20090401_6198785.html',img:'W020090401537115526684.jpg',na:'日韩',lx:'电视剧',lb:'伦理,其它',syrq:'08-11-03'},{title:'机械侠',href:'t20090402_6199041.html',img:'W020090402363860109495.jpg',na:'港台',lx:'电影',lb:'动作,动画,其它',syrq:'09-04-02'},{title:'男人的故事',href:'t20090402_6199019.html',img:'W020090402326457563512.jpg',na:'日韩',lx:'电视剧',lb:'动作,其它',syrq:'09-04-06'},{title:'金大班的最后一夜',href:'t20090401_6198810.html',img:'W020090401644606832392.jpg',na:'大陆',lx:'电视剧',lb:'爱情,其它',syrq:''},{title:'痞子英雄',href:'t20090401_6198808.html',img:'W020090401625289954425.jpg',na:'港台',lx:'电视剧',lb:'爱情',syrq:'09-04-11'},{title:'潜伏',href:'t20090401_6198805.html',img:'W020090401599021032759.jpg',na:'大陆',lx:'电视剧',lb:'悬疑,军事',syrq:'09-04-01'},{title:'崭新的二十岁',href:'t20090401_6198803.html',img:'W020090401596375291862.jpg',na:'欧美',lx:'电影',lb:'其它',syrq:'09-03-20'},{title:'小姨多鹤',href:'t20090401_6198801.html',img:'W020090401586597643923.jpg',na:'大陆',lx:'电视剧',lb:'其它',syrq:''},{title:'倾城之恋',href:'t20090401_6198796.html',img:'W020090401577356048185.jpg',na:'大陆',lx:'电视剧',lb:'爱情,其它',syrq:'09-03-14'},{title:'西洋古董洋果子店',href:'t20090401_6198765.html',img:'W020090401510994815034.jpg',na:'日韩',lx:'电影',lb:'喜剧',syrq:'09-04-18'},{title:'午夜出租车',href:'t20090401_6198751.html',img:'W020090401427715537867.jpg',na:'大陆',lx:'电影',lb:'爱情,恐怖',syrq:''}]
分享到：
| 得到java时间戳 用于数据库中按时间戳查询 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery获取json数据的并分页案例

    本案例将深入探讨如何使用jQuery来获取JSON数据并实现分页功能，这对于网页应用的数据展示至关重要。 首先，理解JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于...

    Ajax+Jquery+Json 翻页

    在无刷新翻页中，jQuery用于包装Ajax调用，提供友好的API，如`$.ajax()`或`$.getJSON()`，并帮助我们处理响应数据，更新DOM结构。 **JSON（JavaScript Object Notation）**： JSON是一种轻量级的数据交换格式，易于...

    jquery+json 无刷新分页

    在这个服务中，你需要编写SQL查询以获取指定页码的数据，并将其转换为JSON格式。 - SQL2000中，可以使用`TOP`和`OFFSET`（或`ROW_NUMBER()`函数）结合来实现分页查询。 #### (2) 前端交互 - 在HTML页面中，使用...

    jQuery json动态数据表格分页代码

    5. **动态数据读取**：动态读取意味着只有当用户翻页时，才会加载相应页的数据。这大大减少了初始页面加载时的数据量，提高了页面加载速度，尤其在数据量很大的情况下，节省了服务器资源和用户的等待时间。 6. **...

    jquery与json的结合

    jQuery支持JSON格式的数据处理，使得前端可以直接绑定数据并显示，大大提高了开发效率。 3. **数据绑定**：通过jQuery选择器可以快速定位DOM元素，并将其与JSON数据绑定起来，实现动态数据展示。 #### 三、实战...

    基于json数据的jquery卡片轮播图插件

    通过AJAX，插件可以异步地从服务器获取JSON数据，无需刷新页面就能更新轮播图的内容。 插件的核心功能包括： 1. **动态加载卡片**：当页面加载完成后，插件会自动调用AJAX请求，从`test.json`或其他指定URL获取...

    Ajax无刷新分页(jQuery+Json)

    在`success`回调中，解析JSON数据并填充到表格中。 ```javascript function renderTable(data) { var tableBody = $('#data-table tbody'); tableBody.empty(); $.each(data.rows, function(index, row) { var ...

    jQuery实现json表格数据自动分页插件功能.zip

    本资源“jQuery实现json表格数据自动分页插件功能.zip”是针对那些希望在网页中展示大量数据，并需要进行高效管理的开发者们设计的。通过这个插件，你可以轻松地将JSON格式的数据动态加载到表格中，并实现自动分页...

    jquery带标题的自动翻页

    4. **数据加载**：自动翻页通常涉及分页数据的异步加载，可以使用jQuery的`$.ajax()`或`$.getJSON()`方法从服务器获取数据。这需要与后端接口进行协调，确保每次加载新页面时，获取到正确范围的数据。 5. **计时器*...

    jquery动态分页数据获取代码

    在这个场景中，`"jquery动态分页数据获取代码"` 指的是利用 jQuery 实现网页上的动态分页功能，并通过 AJAX 获取服务器端的数据。 首先，我们需要了解动态分页的基本原理。动态分页是将整个数据集分割成若干个部分...

    jQuery动态表格数据分页插件

    2. **Ajax请求**：使用jQuery的$.ajax或$.getJSON方法与服务器进行异步通信，请求特定页的数据。 3. **数据绑定**：接收到服务器响应后，将数据动态插入到表格中，更新表格内容。 4. **分页逻辑**：根据用户操作（如...

    jquery实现数据分页显示

    总的来说，jQuery实现数据分页显示涉及到前端与后端的交互，包括数据的获取、处理、展示以及用户的交互反馈。无论选择手动实现还是借助插件，理解分页的核心原理对于优化用户体验至关重要。在实际应用中，还需要考虑...

    jquery+json实现的搜索加分页效果

    本例中通过AJAX请求从服务器获取JSON格式的数据，并利用这些数据实现搜索和分页。 6. 源码的附带：通常在教学或者分享知识时，提供源码可以增加文章的可信度和实用性，让读者可以运行和验证所学习到的知识。 核心...

    jquery插件--表格分页

    2. 初始化表格：使用jQuery选择器找到需要分页的表格，并进行初始化，设置分页参数，如每页显示的行数、分页位置等。 3. 数据源处理：根据所选插件的不同，可能需要配置数据源。如果是Ajax获取数据，需设置URL和...

    jquery+json实现数据列表分页示例代码

    在上述代码示例中，我们看到了如何利用AJAX从服务器异步获取JSON格式的新闻数据，并结合jQuery插件来实现分页。具体步骤如下： - 引入jQuery和相关插件的CSS和JS文件，为页面提供分页功能。 - 使用JSP页面来加载...

    asp+jquery翻页

    在无刷新翻页中，jQuery 主要负责客户端的交互处理，如监听翻页事件，发送Ajax请求获取新数据。 实现ASP+jQuery无刷新翻页的过程通常包含以下几个步骤： 1. **服务器端准备**：在ASP页面中，你需要建立一个接收...

    Jquery实现手机端上拉滚动加载更多数据

    这个文件中的函数或对象应该提供获取更多数据的接口，Jquery脚本会通过这个接口来获取新数据并更新DOM。 5. **HTML结构**：`index.html`是整个应用的入口，其中应该包含一个容器元素（如`&lt;div&gt;`），这个元素将会...

    基于jquery的前端翻页框架

    3. **Ajax交互**：通过`.ajax()`或`.getJSON()`方法，可以异步从服务器获取数据，实现动态加载分页内容。 4. **DOM操作**：使用jQuery提供的`.html()`, `.append()`, `.prepend()`等方法更新DOM，显示新加载的数据...

    jquery+json实现分页效果

    当获取到JSON格式的分页数据后，使用jQuery的DOM操作方法将其显示在页面的对应位置。这里使用AJAX技术实现了无刷新分页，即在用户交互时，无需重新加载整个页面即可更新数据。 ```javascript $.getJSON("result.jsp...

    asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    在ASP.NET中，我们可以创建一个ASP.NET Web Form页面（如`AjaxJson.aspx`），并在后台代码（如`AjaxJson.aspx.cs`）中处理数据获取和计算分页信息。同时，我们需要在页面中包含必要的JavaScript库，如jQuery和用于...

Magicbox
Global site tag (gtag.js) - Google Analytics