动态实现前后台分页、翻页按钮、上一页、下一页、首页、末页

HTML：

<!-- 检索查询 -->
<ul class="retrieval">
　　<li>
　　　　<label>检查时间</label>
　　　　<ul class="inspect_time">
　　　　　　<li class="retrieval_color">今天</li>
　　　　　　<li>昨天</li>
　　　　　　<li>最近3天</li>
　　　　　　<li>最近7天</li>
　　　　　　<li style="200px"><span class="date_title" id="date1" style="display:block;border-radius: 3px;"></span></li>
　　　　</ul>
　　</li>
　　<li class="myli">
　　　　<label>检查类型</label>
　　　　<ul>
　　　　　　<li class="retrieval_color" id="0">全部</li>
　　　　　　<li id="1">CT</li>
　　　　</ul>
　　</li>
　　<li>
　　　　<label>阴阳性</label>
　　　　<ul>
　　　　　　<li class="retrieval_color" id="0">全部</li>
　　　　　　<li id="1">阴性</li>
　　　　　　<li id="2">阳性</li>
　　　　　　<li id="3">重大阳性</li>
　　　　</ul>
　　</li>
　　<li>
　　　　<label>医疗状态</label>
　　　　<ul>
　　　　　　<li class="retrieval_color" id="0">全部</li>
　　　　　　<li id="1">待诊断</li>
　　　　　　<li id="2">诊断中</li>
　　　　　　<li id="3">已诊断</li>
　　　　</ul>
　　</li>
</ul>

<table class="tablesorter">

　　<thead>
　　　　<tr>
　　　　　　<th class="tr_width">序号</th>
　　　　　　<th>检查时间</th>
　　　　　　<th>姓名</th>
　　　　　　<th class="tr_width">性别</th>
　　　　　　<th class="tr_width">年龄</th>
　　　　　　<th>医疗状态</th>
　　　　　　<th>体检号</th>
　　　　　　<th>影像号</th>
　　　　　　<th>检查号</th>
　　　　　　<th>检查类型</th>
　　　　　　<th>检查部位</th>
　　　　　　<th>检查项目</th>
　　　　　　<th>登记时间</th>
　　　　　　<th>诊断医生</th>
　　　　　　<th>诊断时间</th>
　　　　　　<th class="tr_width">阴阳性</th>
　　　　　　<th class="tr_width">操作</th>
　　　　</tr>
　　</thead>
　　<tbody id="bbsTab">
　　　　<tr>
　　　　　　<td colspan="17">没有可显示的数据！</td>
　　　　</tr>
　　</tbody>
</table>

JS:

var timer1 = Today,timer2 = Today,type1 = 0,type2 = 0,state = 0;//全局变量
var currentPage = 1;//当前第几页
var pageNum=5;//每页显示多少条数据
var totalPage ='';//总页数
var _ajaxUrl = "http://106.14.139.5:7006/chis/ROOT_CHIS/rcall.jsp?sytid=CHIS&mwid=GZ_imageUploadOne&funcid=queryYX&page="+currentPage;
var arry = {};
//调用
getData(currentPage);
//请求后台获取数据

function getData(currentPage){//currentPage传页数给后台

　　var _ajaxUrl = "http://106.14.139.5:7006/chis/ROOT_CHIS/rcall.jsp?sytid=CHIS&mwid=GZ_imageUploadOne&funcid=queryYX&page="+currentPage;　

　　$.ajax({
　　　　type:"GET",
　　　　url:_ajaxUrl,
　　　　dataType:"json",
　　　　data:{
　　　　　　name: $("input[name='name']").val(),
　　　　　　IMGCARD: $("input[name='imgcard']").val(),
　　　　　　CHECKCARD: $("input[name='CHECKCARD']").val(),
　　　　　　PHECARD: $("input[name='PHECARD']").val(),
　　　　　　RADIOLOGDIAGNOSIS: $("input[name='RADIOLOGDIAGNOSIS']").val(),
　　　　　　AUDITDOC: $("input[name='AUDITDOC']").val(),
　　　　　　checkitem: $("input[name='checkitem']").val(),
　　　　　　strDate:timer1,
　　　　　　endDate:timer2,
　　　　　　stutype:type1,
　　　　　　DISYY:type2,
　　　　　　DIASTA:state
　　　　},
　　　　success:function(data){
　　　　　　totalPage = Math.ceil(data.rows/5)//总页数
　　　　　　//console.log(totalPage)
　　　　　　initPageLinks();
　　　　　　var sHtml = '';
　　　　　　if(data.code == 0){
　　　　　　　　arry = data.person;
　　　　　　　　for(var i = 0;i<arry.length;i++){
　　　　　　　　　　//隔行变色
　　　　　　　　　　var trColor;
　　　　　　　　　　if (i % 2 == 0) {trColor = "even";}else {trColor = "odd";} 

　　　　　　　　　　//性别
　　　　　　　　　　var msex = '';
　　　　　　　　　　if (arry[i].sex == 2) { msex = '女';}else{msex = '男';}
　　　　　　　　　　//医疗状态
　　　　　　　　　　var mdiasta = '';

　　　　　　　　　　if (arry[i].diasta == 1) {mdiasta = '待诊断';}else if(arry[i].diasta == 2){mdiasta = '诊断中';}else{mdiasta = '已诊断';}
　　　　　　　　　　//序号
　　　　　　　　　　var xuhao = pageNum*(currentPage-1)+i+1;
　　　　　　　　　　sHtml += "<tr class='" + trColor + "'>";
　　　　　　　　　　sHtml += "<td>"+xuhao+"</td>";
　　　　　　　　　　sHtml += "<td class="td_juid" style="display:none">"+arry[i].guid+"</td>";
　　　　　　　　　　sHtml += "<td>"+arry[i].filmdate+"</td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].name+"</td>"
　　　　　　　　　　sHtml += "<td class="sextype">"+msex+"</td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].age+"</td>"
　　　　　　　　　　sHtml += "<td>"+mdiasta+"</td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].phecard+"</td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].imgcard+"</td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].checkcard+"</td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].stutype+"</td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].ckparts+"</td>"
　　　　　　　　　　sHtml += "<td><i>"+arry[i].checkitem+"</i></td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].reportdate+"</td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].auditdoc+"</td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].ckdate+"</td>"
　　　　　　　　　　sHtml += "<td>"+arry[i].disyy+"</td>"
　　　　　　　　　　sHtml += "<td class="_operation"><b title="影像报告" class="img_presentation"><img src="img/img.png"></b><b></b><b></b><b></b></td>"
　　　　　　　　　　sHtml += "</tr>";
　　　　　　　　　　$("#bbsTab").html(sHtml);
　　　　　　　　}

　　　　　　}else if(data.code == 1){
　　　　　　　　sHtml += "<tr>"
　　　　　　　　sHtml += "<td colspan="17">没有可显示的数据！</td>"
　　　　　　　　sHtml += "</tr>"
　　　　　　　　$("#bbsTab").html(sHtml);
　　　　　　}else{
　　　　　　　　alert('查询出错！');
　　　　　　}
　　　　},
　　　　error:function(jqXHR){
　　　　　　console.log('发生错误：'+jqXHR.status)
　　　　}
　　})

}

// 条件查询2
　　$('.retrieval ul li').click(function(event){
　　　　//li切换
　　　　$(this).addClass('retrieval_color').siblings().removeClass('retrieval_color');
　　　　$(this).siblings('li').find('span').css({
　　　　　　'color':'#333',
　　　　　　'background':'#F6F8FA'
　　　　})
　　　　var index = $(this).parent().parent().index();
　　　　if(index==0){
　　　　　　dataType = $(this).attr("name");
　　　　　　dataType = dataType.split(",");
　　　　　　if(dataType[1]== undefined){
　　　　　　　　dataType[1]=dataType[0]
　　　　　　}
　　　　　　timer1 = dataType[0];
　　　　　　timer2 = dataType[1];
　　　　}
　　　　if(index==1){

　　　　　　type1 = $(this).attr('id');
　　　　}
　　　　if(index==2){
　　　　　　type2 = $(this).attr('id');
　　　　}
　　　　if(index==3){
　　　　　　state = $(this).attr('id');
　　　　}
　　　　console.log('timer1:'+timer1+' '+'timer2:'+timer2+' '+'type1:'+type1+' '+'type2:'+type2+' '+'state:'+state);
　　　　//table切换
　　　　$.ajax({
　　　　　　type:"POST",
　　　　　　url:_ajaxUrl,
　　　　　　datatype:"json",
　　　　　　data:{
　　　　　　　　name: $("input[name='name']").val(),
　　　　　　　　IMGCARD: $("input[name='imgcard']").val(),
　　　　　　　　CHECKCARD: $("input[name='CHECKCARD']").val(),
　　　　　　　　PHECARD: $("input[name='PHECARD']").val(),
　　　　　　　　RADIOLOGDIAGNOSIS: $("input[name='RADIOLOGDIAGNOSIS']").val(),
　　　　　　　　AUDITDOC: $("input[name='AUDITDOC']").val(),
　　　　　　　　checkitem: $("input[name='checkitem']").val(),
　　　　　　　　strDate:timer1,
　　　　　　　　endDate:timer2,
　　　　　　　　stutype:type1,
　　　　　　　　DISYY:type2,
　　　　　　　　DIASTA:state
　　　　　　},
　　　　　　success:function(data){
　　　　　　　　data = JSON.parse(data);
　　　　　　　　if (data.code == 0) {
　　　　　　　　　　totalPage = Math.ceil(data.rows/5)//总页数
　　　　　　　　　　//console.log(totalPage)
　　　　　　　　　　initPageLinks();
　　　　　　　　　　arry = data.person;
　　　　　　　　　　var sHtml = '';
　　　　　　　　　　for(var i = 0;i<arry.length;i++){
　　　　　　　　　　　　//性别
　　　　　　　　　　　　var msex = '';
　　　　　　　　　　　　if (arry[i].sex == 2) { msex = '女';}else{msex = '男';}
　　　　　　　　　　　　//医疗状态
　　　　　　　　　　　　var mdiasta = '';if (arry[i].diasta == 1) {mdiasta = '待诊断';}else if(arry[i].diasta == 2){mdiasta = '诊断中';}else{mdiasta = '已诊断';}
　　　　　　　　　　　　//序号
　　　　　　　　　　　　var xuhao = pageNum*(currentPage-1)+i+1;
　　　　　　　　　　　　sHtml += "<tr>";
　　　　　　　　　　　　sHtml += "<td>"+xuhao+"</td>";
　　　　　　　　　　　　sHtml += "<td class="td_juid" style="display:none">"+arry[i].guid+"</td>";
　　　　　　　　　　　　sHtml += "<td>"+arry[i].filmdate+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].name+"</td>"
　　　　　　　　　　　　sHtml += "<td class="sextype">"+msex+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].age+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+mdiasta+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].phecard+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].imgcard+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].checkcard+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].stutype+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].ckparts+"</td>"
　　　　　　　　　　　　sHtml += "<td><i>"+arry[i].checkitem+"</i></td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].reportdate+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].auditdoc+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].ckdate+"</td>"
　　　　　　　　　　　　sHtml += "<td>"+arry[i].disyy+"</td>"
　　　　　　　　　　　　sHtml += "<td class="_operation"><b title="影像报告" class="img_presentation"><img src="img/img.png"></b><b></b><b></b><b></b></td>"
　　　　　　　　　　　　sHtml += "</tr>";
　　　　　　　　　　　　$("#bbsTab").html(sHtml);
　　　　　　　　　　}
　　　　　　　　}else if(data.code == 1){
　　　　　　　　　　sHtml += "<tr>"
　　　　　　　　　　sHtml += "<td colspan="17">没有可显示的数据！</td>"
　　　　　　　　　　sHtml += "</tr>"
　　　　　　　　　　$("#bbsTab").html(sHtml);
　　　　　　　　}else{
　　　　　　　　　　alert('查询出错！');
　　　　　　　　}
　　　　　　},
　　　　　　error:function(jqXHR){
　　　　　　　　alert('发生错误：'+jqXHR.status)
　　　　　　}
　　　　})
　　});

//分页方法
function initPageLinks(){
　　var pagesLinks = "";
　　pagesLinks += "<a onclick="javascript:currentPage = 1;getData(currentPage);" style="cursor: pointer;">首页</a>";
　　if (currentPage != 1) {
　　　　pagesLinks += "<a onclick="javascript:currentPage = currentPage - 1;getData(currentPage);" class="prev" style="cursor: pointer;">上一页</a>";
　　}else {
　　　　pagesLinks += "<a class="page-prev unclick">上一页</a>";
　　}
　　var startPage = 1;
　　var endPage = totalPage;
　　if (endPage > 5) {
　　　　if (currentPage > 3) {
　　　　　　startPage = currentPage - 2;
　　　　　　endPage = currentPage + 2;
　　　　}else {
　　　　　　endPage = 5;
　　　　}

　　　　if (endPage > totalPage) {
　　　　　　startPage = totalPage - 4;
　　　　　　endPage = totalPage;
　　　　}
　　}

　　if (startPage > 1) {
　　　　pagesLinks += "<a onclick="javascript:currentPage = 1;getData();" style="cursor: pointer;">1</a>";
　　　　pagesLinks += "...";
　　}
　　for (var i = startPage; i <= endPage; i++) {
　　　　if (currentPage == i) {
　　　　　　pagesLinks += "<a class="on">" + i + "</a>";
　　　　}else {
　　　　　　pagesLinks += "<a onclick="javascript:currentPage = " + i + ";getData(currentPage);" style="cursor: pointer;">" + i + "</a>";
　　　　}
　　}
　　if (endPage < totalPage) {
　　　　pagesLinks += "...";
　　　　pagesLinks += "<a onclick="javascript:currentPage = " + totalPage + ";getData();" style="cursor: pointer;">" + totalPage + "</a>";
　　}
　　if (currentPage < totalPage) {
　　　　pagesLinks += "<a onclick="javascript:currentPage = currentPage + 1;getData(currentPage);" class="next" style="cursor: pointer;">下一页</a>";
　　}else {
　　　　pagesLinks += "<a class="next unclick">下一页</a>";
　　}

　　pagesLinks += "<a onclick="javascript:currentPage = " + totalPage + ";getData(currentPage);" style="cursor: pointer;">尾页</a>";
　　$("#page").html(pagesLinks);
}