现在的项目中的分页越来越来越倾向有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还不通用不知道谁有好的办法
还有后台数据是一次性全部加载 数据多时可能会有效率问题...
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还不通用不知道谁有好的办法
还有后台数据是一次性全部加载 数据多时可能会有效率问题...