开发技术学习

今天在做jqeury数据分页，同时也适合json数据分页 先读出数据，然后添加到页面中，统计行数。上代码：前期还没有优化，等下周再来优化  [sourcecode language="plain"] <script type="text/javascript"> var pagesize = 10; var clen = 0; var page = 0; var nowpage = 1; function interLesson(packid){ $('#packTable').hide('slow'); $('#lessonBody').html('<tr><td colspan="5" align="center"><img src="/Public/images/loading.gif" /><br />正在努力加载中...</td></tr>'); $("#lessonList").show('slow'); setTimeout(function(){ $.get(URL+'/getLesson',{pid: packid}, function(data){ if (data.status){ var content = data.data; clen = content.length; var html = ''; for (var i = 0; i < clen; i++){ html += '<tr bgcolor="#f1f1f1" class="tr"><td>第'+content[i]['CHAPTER']+'章'+content[i]['SECTION']+'节</td><td>'+content[i]['TITLE']+'</td><td>'+content[i]['teacher']['TRUENAME']+'</td><td>'+content[i]['DURING']+'分</td><td><a href="'+URL+'/ksxx?lessonid='+content[i]['ID']+'" title="'+content[i]['TITLE']+'"> <img src="/App/Tpl/Home/default/Public/images/sts2.png" /></a></td></tr>'; } $('#lessonBody').html(html); //分页 $("#nowpage").val('1'); $("#totalCount").val(clen); $("#page").html(''); $("#page").append('共有 '+clen+'条记录,每页'+pagesize+'条,'); page = Math.ceil(clen / pagesize); if (page < 1){ page = 1; $("#page").append('共 1 页.'); }else{ $("#page").append('当前第'+nowpage+'页,共'+page+'页,<a href="javascript:void(0);" onclick="nextpage()">下一页</a> &nbsp; <a href="javascript:void(0);" onclick="lastpage()">尾页</a>'); } trShowHide(pagesize,nowpage); }else{ $("#lessonList").hide(); $('#packTable').show(); alert(data.info); return false; } },'json'); },500); } //首页 function fristpage(){ nowpage = 1; $("#nowpage").val(nowpage); $("#page").html(''); $("#page").append('共有 '+clen+'条记录,每页'+pagesize+'条,'); $("#page").append('当前第'+nowpage+'页,共'+page+'页'); $("#page").append(',<a href="javascript:void(0);" onclick="nextpage()">下一页</a> &nbsp; <a href="javascript:void(0);" onclick="lastpage()">尾页</a>'); trShowHide(pagesize,nowpage); } //上一页 function prepage(){ nowpage --; if (nowpage < 1){ nowpage = 1; } $("#nowpage").val(nowpage); $("#page").html(''); $("#page").append('共有 '+clen+'条记录,每页'+pagesize+'条,'); $("#page").append('当前第'+nowpage+'页,共'+page+'页'); if (nowpage == 1){ $("#page").append(',<a href="javascript:void(0);" onclick="nextpage()">下一页</a> &nbsp; <a href="javascript:void(0);" onclick="lastpage()">尾页</a>'); }else{ $("#page").append(', <a href="javascript:void(0);" onclick="fristpage()">首页</a> &nbsp; <a href="javascript:void(0);" onclick="prepage()">上一页</a> &nbsp; <a href="javascript:void(0);" onclick="nextpage()">下一页</a> &nbsp; <a href="javascript:void(0);" onclick="lastpage()">尾页</a>'); } trShowHide(pagesize,nowpage); } //下一页 function nextpage(){ nowpage ++; if (nowpage > page){ nowpage = page; } $("#nowpage").val(nowpage); $("#page").html(''); $("#page").append('共有 '+clen+'条记录,每页'+pagesize+'条,'); $("#page").append('当前第'+nowpage+'页,共'+page+'页'); if (nowpage == page){ $("#page").append(',<a href="javascript:void(0);" onclick="prepage()">上一页</a> &nbsp; <a href="javascript:void(0);" onclick="fristpage()">首页</a>'); }else{ $("#page").append(', <a href="javascript:void(0);" onclick="fristpage()">首页</a> &nbsp; <a href="javascript:void(0);" onclick="prepage()">上一页</a> &nbsp; <a href="javascript:void(0);" onclick="nextpage()">下一页</a> &nbsp; <a href="javascript:void(0);" onclick="lastpage()">尾页</a>'); } trShowHide(pagesize,nowpage); } //尾页 function lastpage(){ nowpage = page; $("#nowpage").val(nowpage); $("#page").html(''); $("#page").append('共有 '+clen+'条记录,每页'+pagesize+'条,'); $("#page").append('当前第'+nowpage+'页,共'+page+'页'); $("#page").append(', <a href="javascript:void(0);" onclick="fristpage()">首页</a> &nbsp; <a href="javascript:void(0);" onclick="prepage()">上一页</a>'); trShowHide(pagesize,nowpage); } function trShowHide(pagesize,nowpage){ $('.tr').hide(); var tr = $('.tr'); var startTr = (nowpage - 1) * pagesize; var endTr = pagesize * nowpage; for (var i = startTr;i < endTr;i++){ $(tr[i]).show(); } } </script> [/sourcecode]