现在的项目中的分页越来越来越倾向有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+=' <a href="javascript:'+shouye+';">第一页 </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)+');">上一页 </a>';
}else{
}
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>';
} }
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还不通用不知道谁有好的办法
还有后台数据是一次性全部加载 数据多时可能会有效率问题...
分享到:
相关推荐
**JavaScript分页插件概述** 在网页开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高用户体验。本项目提供的“适配所有浏览器的js分页插件”是一个轻量级且易用的解决方案,尤其适用于那些...
2. Pagination.js:一个独立的JavaScript分页库,支持自定义分页样式,支持Ajax请求数据。 3. vue-paginate:针对Vue.js框架的分页组件,易用且高度可定制。 4. react-pagination:适用于React应用的分页组件,可与...
3. **纯JavaScript分页**:不依赖任何外部库,通过JavaScript实现分页逻辑。例如,可以使用数组或对象存储数据,根据当前页数动态渲染页面内容。 4. **AJAX分页**:使用AJAX异步加载数据,用户在切换页面时无需刷新...
综上所述,“漂亮的js分页效果”涉及多个JavaScript和前端开发的关键概念,包括JavaScript基础、DOM操作、事件监听、AJAX请求、CSS样式设计、响应式布局、模块化编程以及用户体验优化等。通过理解并熟练掌握这些知识...
js pagination插件是一个流行的JavaScript分页解决方案,它允许开发者轻松实现无刷新分页。这个插件通常包括CSS样式文件(如pagination.css)用于定义分页元素的外观,以及JavaScript文件(如jquery.pagination.js)...
4. **JavaScript分页逻辑**:`spagination.js` 是核心脚本,包含了分页功能的实现。主要包括计算总页数、生成页码按钮、监听按钮点击事件、更新当前页等功能。开发者需要了解如何根据数据量和每页显示的数量来计算总...
这个压缩包中包含了多个JavaScript分页代码示例,适合网页开发者参考和直接应用。 分页效果的实现通常包括以下几个核心部分: 1. 数据获取:首先,需要获取要分页展示的数据。这些数据可以来源于服务器端(如通过...
在这个案例中,JavaScript分页组件可能是用AJAX(Asynchronous JavaScript and XML)技术实现的。当用户点击分页按钮时,JavaScript会异步发送请求到Servlet,Servlet处理请求并返回新的数据,然后JavaScript更新DOM...
- 根据文件名,如"12_154640_a8zdJSpage0.06v20050426",我们可以推测这可能是一个名为"JSpage"的JavaScript分页库的不同版本。"0.06"可能是版本号,而"20050426"可能是发布日期。 - 同理,其他类似命名的文件可能...
这篇博客 "js分页插件(附上用法描述)" 提供了关于JavaScript分页插件的详细信息,虽然具体的代码没有直接给出,但通常会涵盖以下几个核心知识点: 1. **分页原理**:分页主要基于服务器端和客户端的交互。服务器...
总结来说,JavaScript分页是一个涉及数据处理、用户交互和页面更新的过程。通过封装分页函数,我们可以使代码更加模块化,易于理解和维护。在实际开发中,可以根据项目需求进行定制,比如结合前端框架(如React、Vue...
你可以通过阅读和分析这两个文件来学习如何实现一个完整的JavaScript分页解决方案。在实际应用中,还可以考虑添加更多的特性,如分页样式定制、分页效果动画、当前页码显示等,以满足不同项目的需求。
自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.
JavaScript分页是网页开发中一个常见且重要的功能,它用于处理大量数据的显示,通过将数据分割成小块,逐页加载,提高了用户体验并优化了页面性能。在本项目中,我们将探讨如何使用纯JavaScript实现分页功能,以及...
在这个主题中,我们将深入探讨JavaScript分页的实现原理、设计模式以及如何利用CSS来定制样式。 首先,JavaScript分页的基本原理是通过计算总页数,根据用户的当前页码展示相应的内容。通常,我们会在后端获取数据...
这里提到的"JS分页控件+CSS"是一个针对网页分页功能的解决方案,结合了JavaScript(JS)和层叠样式表(CSS)的技术。下面我们将深入探讨这两个关键组成部分以及它们如何协同工作。 **JS分页控件** JavaScript是一...
JavaScript分页插件是一种在网页上实现数据分页显示的工具,它可以帮助开发者轻松地将大量数据分成多个页面,提供用户友好的浏览体验。在这个场景中,你提到的"js分页插件"是一个只有2KB大小的轻量级插件,包含3个...
javascript 分页
在这个“js分页实例asp服务端”的示例中,我们将探讨如何结合JavaScript(js)前端技术和ASP服务端技术来实现动态数据分页。 首先,我们需要理解分页的基本原理。分页通常涉及到两个主要部分:前端的用户界面(UI)...
总的来说,"js分页效果"是一个综合性的前端开发任务,涵盖了JavaScript基础、DOM操作、事件处理、数据交互、动画效果等多个方面。通过这个示例,开发者不仅可以学习到分页的实现技巧,还能加深对前端开发整体流程的...