`
zeng7960983
  • 浏览: 44478 次
  • 性别: Icon_minigender_1
  • 来自: 邵阳
社区版块
存档分类
最新评论

js 分页

阅读更多
现在的项目中的分页越来越来越倾向有google分页.今天研究了一下参考了一些资料。写了一个js.
var search_content_array=[];
var content_array=[];
/**中间内容**/
//target="_blank"
function make_content_list(obj){ 
//如果需要替换中间显示的内容可以自己重新改写下面的代码  
  var html="";  
html+="<tr class=\"neirong\">"+
   " <td height=\"26\" align=\"center\" class=\"td-line\">"+obj.fileName +"</td>"+
   " <td align=\"center\" class=\"td-line\">"+obj.fileLength +"kb</td>"+
   " <td align=\"center\" class=\"td-line\">"+obj.uploadUser +"</td>"+
   " <td align=\"center\" class=\"td-line\">"+obj.uploadTime +"</td>"+
   " <td align=\"center\" class=\"td-line\">"+obj.opetionType +"</td>"+
  "</tr>";
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{
}

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>';
} }

html+='<a href="javascript:'+moye+';">最后一页</a>';

return html;

}
/**加载内容**/
function load_html_start(page){
var total_item=20;
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("#table_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:"POST",
  url:url,
  dataType:"text",
  global:false,  
   success: function(json){
data=eval("("+json+")");
search_content_array=data;
   load_html_start(1);
   }
});

}
---------------------------
$(function(){
  Start('url');
});

js还不通用不知道谁有好的办法
还有后台数据是一次性全部加载 数据多时可能会有效率问题...
分享到:
评论

相关推荐

    适配所有浏览器的js分页插件

    **JavaScript分页插件概述** 在网页开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高用户体验。本项目提供的“适配所有浏览器的js分页插件”是一个轻量级且易用的解决方案,尤其适用于那些...

    js分页javascript分页

    2. Pagination.js:一个独立的JavaScript分页库,支持自定义分页样式,支持Ajax请求数据。 3. vue-paginate:针对Vue.js框架的分页组件,易用且高度可定制。 4. react-pagination:适用于React应用的分页组件,可与...

    经典的10种JS分页代码

    3. **纯JavaScript分页**:不依赖任何外部库,通过JavaScript实现分页逻辑。例如,可以使用数组或对象存储数据,根据当前页数动态渲染页面内容。 4. **AJAX分页**:使用AJAX异步加载数据,用户在切换页面时无需刷新...

    漂亮的js分页效果

    综上所述,“漂亮的js分页效果”涉及多个JavaScript和前端开发的关键概念,包括JavaScript基础、DOM操作、事件监听、AJAX请求、CSS样式设计、响应式布局、模块化编程以及用户体验优化等。通过理解并熟练掌握这些知识...

    js分页组件及部分关键代码

    js pagination插件是一个流行的JavaScript分页解决方案,它允许开发者轻松实现无刷新分页。这个插件通常包括CSS样式文件(如pagination.css)用于定义分页元素的外观,以及JavaScript文件(如jquery.pagination.js)...

    自制纯js分页框架

    4. **JavaScript分页逻辑**:`spagination.js` 是核心脚本,包含了分页功能的实现。主要包括计算总页数、生成页码按钮、监听按钮点击事件、更新当前页等功能。开发者需要了解如何根据数据量和每页显示的数量来计算总...

    Javascript分页效果(收集了很多强大的JS分页代码)

    这个压缩包中包含了多个JavaScript分页代码示例,适合网页开发者参考和直接应用。 分页效果的实现通常包括以下几个核心部分: 1. 数据获取:首先,需要获取要分页展示的数据。这些数据可以来源于服务器端(如通过...

    servlet+jsp+js分页组件

    在这个案例中,JavaScript分页组件可能是用AJAX(Asynchronous JavaScript and XML)技术实现的。当用户点击分页按钮时,JavaScript会异步发送请求到Servlet,Servlet处理请求并返回新的数据,然后JavaScript更新DOM...

    推荐10个js分页样式

    - 根据文件名,如"12_154640_a8zdJSpage0.06v20050426",我们可以推测这可能是一个名为"JSpage"的JavaScript分页库的不同版本。"0.06"可能是版本号,而"20050426"可能是发布日期。 - 同理,其他类似命名的文件可能...

    js分页插件(附上用法描述)

    这篇博客 "js分页插件(附上用法描述)" 提供了关于JavaScript分页插件的详细信息,虽然具体的代码没有直接给出,但通常会涵盖以下几个核心知识点: 1. **分页原理**:分页主要基于服务器端和客户端的交互。服务器...

    简单易懂js分页(已封装)

    总结来说,JavaScript分页是一个涉及数据处理、用户交互和页面更新的过程。通过封装分页函数,我们可以使代码更加模块化,易于理解和维护。在实际开发中,可以根据项目需求进行定制,比如结合前端框架(如React、Vue...

    JS分页源代码,非常详细

    你可以通过阅读和分析这两个文件来学习如何实现一个完整的JavaScript分页解决方案。在实际应用中,还可以考虑添加更多的特性,如分页样式定制、分页效果动画、当前页码显示等,以满足不同项目的需求。

    js分页控件--js封装的分页控件

    自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.

    javaScript分页

    JavaScript分页是网页开发中一个常见且重要的功能,它用于处理大量数据的显示,通过将数据分割成小块,逐页加载,提高了用户体验并优化了页面性能。在本项目中,我们将探讨如何使用纯JavaScript实现分页功能,以及...

    e路JS分页样式类,e路JS分页样式类

    在这个主题中,我们将深入探讨JavaScript分页的实现原理、设计模式以及如何利用CSS来定制样式。 首先,JavaScript分页的基本原理是通过计算总页数,根据用户的当前页码展示相应的内容。通常,我们会在后端获取数据...

    JS分页控件+CSS

    这里提到的"JS分页控件+CSS"是一个针对网页分页功能的解决方案,结合了JavaScript(JS)和层叠样式表(CSS)的技术。下面我们将深入探讨这两个关键组成部分以及它们如何协同工作。 **JS分页控件** JavaScript是一...

    js 分页插件

    JavaScript分页插件是一种在网页上实现数据分页显示的工具,它可以帮助开发者轻松地将大量数据分成多个页面,提供用户友好的浏览体验。在这个场景中,你提到的"js分页插件"是一个只有2KB大小的轻量级插件,包含3个...

    javascript 分页

    javascript 分页

    js分页实例asp服务端

    在这个“js分页实例asp服务端”的示例中,我们将探讨如何结合JavaScript(js)前端技术和ASP服务端技术来实现动态数据分页。 首先,我们需要理解分页的基本原理。分页通常涉及到两个主要部分:前端的用户界面(UI)...

    js分页效果

    总的来说,"js分页效果"是一个综合性的前端开发任务,涵盖了JavaScript基础、DOM操作、事件处理、数据交互、动画效果等多个方面。通过这个示例,开发者不仅可以学习到分页的实现技巧,还能加深对前端开发整体流程的...

Global site tag (gtag.js) - Google Analytics