ajax 限制显示条数,jquery通过ajax获取数据，控制显示的数据条数

无标题文档

body { margin:0;}

table { border:1px solid #ccc;}

td,th { height:26px; font-family:"微软雅黑"; font-size:12px; padding:5px; text-align:left; border-left:1px solid #ccc;}

td {border-top:1px solid #ddd; color:#333}

#topgn { position:relative;}

#ColumnsListBox { background:#fff; position:absolute; left:0; top:20px; padding-top:5px; border:1px solid #ccc; border-bottom:none; display:none;}

.ColumnsList { font-size:12px; line-height:26px;border-bottom:1px solid #ccc; padding:0 15px 010px; cursor:pointer;}

.ColumnsList span { width:20px; height:20px; background:red; display:inline-block; vertical-align:middle; background:url(img/checkbox.png) -60px -30px; margin-right:5px;}

.ColumnsList .checkbox { background-position:right 0;}

#tablethead { display:none; position:fixed; left:0; top:0; z-index:5; width:100%;}

th { background:#288068; color:#fff;}

$(function(){

function addShuJu(iNum){var addNum=parseInt(iNum);var Html="";

$.ajax({

type:"GET",

url:"http://10.10.140.77:5566/rs_Mianshi/goo.ashx",

data:{pagesize:iNum},

dataType:"json",

success: function(ret){

console.log(ret)var date=ret[‘rows‘];var html="";for(var i=0;i

{

html+="

"

+"

"+date[i][‘RN‘]+""

+"

"+date[i][‘u_kahao‘]+""

+"

"+date[i][‘u_xingming‘]+""

+"

"+date[i][‘u_shouji‘]+""

+"

"+date[i][‘u_xingbie‘]+""

+"

"}

$("#tbody1").html(html);

},

error:function(){

}

})

};

addShuJu(10);

$("#pagechange").change(function(){

$("#tbody1").html("

正在加载中....");var aTh=$("#thead1 .thetr th");var Columnshtml="";for(var i=0;i

{

Columnshtml+="

"+aTh[i].innerHTML+"

";

}

$("#ColumnsListBox").html(Columnshtml);

$("#tablethead th").show();

aTh.show();

addShuJu($(this).val());

});

})

自动

5

10

15

20

50

号码其他序号卡号姓名电话性别

正在加载中....

$(window).scroll(function(){if($(window).scrollTop()>$("#thead1 .thetr").position().top)

{

$("#tablethead").show();

$("#thead2").html($("#thead1").html())//console.log(11);

}else{

$("#tablethead").hide();

}

})

var aTh=$("#thead1 .thetr th");var Columnshtml="";for(var i=0;i

{

Columnshtml+="

"+aTh[i].innerHTML+"

"}

$("#ColumnsListBox").html(Columnshtml);

$("#Columnsbtn").click(function(){

$("#ColumnsListBox").show();return false;

});

$("#topgn").on("click",".ColumnsList",function(){var iNmu=parseInt($(this).index())+1;var number=parseInt($("#thead1 .toptr2 th").eq($(this).attr("data-col")).attr("colspan"));if($(this).attr("date-check")=="true"){

number-=1;if(number<=0)

{

$("#thead1 .toptr2 th").eq($(this).attr("data-col")).hide();

}

$("#thead1 .toptr2 th").eq($(this).attr("data-col")).attr("colspan",number);

$("#tab1 tr td:nth-child("+iNmu+")").hide();

$(".thetr th:nth-child("+iNmu+")").hide();

$(this).find("span").addClass("checkbox");

$(this).attr("date-check","false");

}else{

number+=1;

$("#thead1 .toptr2 th").eq($(this).attr("data-col")).show();

$("#thead1 .toptr2 th").eq($(this).attr("data-col")).attr("colspan",number);

$("#tab1 tr td:nth-child("+iNmu+")").show();

$(".thetr th:nth-child("+iNmu+")").show();

$(this).find("span").removeClass("checkbox");

$(this).attr("date-check","true");

//$("#ColumnsListBox").attr(‘data-cols‘, $("#thead1 .thetr th").filter(":visible").length);

//$(".cloneTd,.noData").attr(‘colspan‘, $("#thead1 .thetr th").filter(":visible").length);