前端： 纯js代码实现对Ajax获取的内容进行表格分页显示

在调用有关的API时，有可能会因为无法实现分页查询，而导致页面太长，需要滚动鼠标很久，所以使用js实现分页功能就很方便了。

相关的函数：

/**
 * 分页显示
 * @param pno 页码，从第一页开始
 * @param psize 页显示的数据数量
 * @returns
 * 
 */
function goPage(pno, psize) {
    var itable = document.getElementById("list");//通过ID找到表格
    var num = itable.rows.length;//表格所有行数(所有记录数)
    var totalPage = 0;//总页数
    var pageSize = psize;//每页显示行数
    //总共分几页(总页数/每页要显示的行数)
    if (num%pageSize!=0) {
      totalPage = parseInt(num / pageSize) + 1;
    } else {
      totalPage = parseInt(num / pageSize);
    }

    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行 1
    var endRow = currentPage * pageSize;//结束显示的行   3
    endRow = (endRow > num) ? num : endRow;

    for (var i = 1; i < num+1; i++) {  //遍历所有数据,rows[i]是从0开始，但是后面与startRow做比较，所以i从1开始；
        var irow = itable.rows[i-1];  //i-1，数据重0开始显示
        if (i >= startRow && i <= endRow) {
            irow.style.display = "table-row";
        } else {
            irow.style.display = "none";
        }
    }
    // 给DOM添加页码
    var tempStr = '共<span>'+num+'</span>条记录&nbsp;&nbsp;当前页<span>'+currentPage+' / '+totalPage+'</span>页';
    tempStr = tempStr+'<ul class="am-pagination">'
    // 上一页
    if (currentPage > 1) {   //若当前页不是第一页，则可以添加点击事件跳转到前一页
      tempStr += "<li><a href=\"#\" onClick=\"goPage(" + 1 + "," + psize +")\">首页</a></li>";
        tempStr += "<li><a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页</a></li>";        
    } else {     //若当前页是第一页，则不添加点击事件
      tempStr += "<li><a href=\"#\">首页</a></li>";
        tempStr += "<li><a href=\"#\"><上一页</a></li>";      
    }           
    // 下一页
    if (currentPage < totalPage) {
        tempStr += "<li><a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页></a></li>";
        tempStr += "<li><a href=\"#\" onClick=\"goPage(" + totalPage + "," + psize +")\">尾页</a></li>";
    } else {
       tempStr +="<li><a href=\"#\">下一页></a></li>";
       tempStr +="<li><a href=\"#\">尾页</a></li>";
    }
    tempStr =tempStr +'</ul>';
    document.getElementById("page_div").innerHTML = tempStr;
}

调用函数：

//获取部门打卡
function getDeptdaka(dept){
	$.ajax({
        type: "post",
        url: root()+"/getAttendanceListBydept.action?dept="+dept,
        data: $('#fom').serialize(),
        beforeSend: function () {
		    showMask();   //创建加载中遮罩层
		},
        success: function (result) {
        	page = result.data;
        	var destlist = eval(page); 
        	var htm = '';
        	for (var i = 0; i < destlist.length; i++) {  	
            	var obj = destlist[i];
        		obj = obj.split('@');
        		htm = htm +
        			 '<tr>' +
           	         '<td>' + (obj[3]=="null"?"":obj[3]) + '</td>' +
           	         '<td>' + (obj[4]=="null"?"":obj[4]) + '</td>' +
           	         '<td>' + (obj[5]=="null"?"":obj[5]) + '</a></td>' +
           	         '<td>' + (obj[6]=="null"?"":obj[6]) + '</td>' +
           	         '</tr>';
            }
        	$("#list").html('');
            $("#list").html(htm);
            goPage(1,12);     //调用分页函数，实现分页
        },
		complete:function () {
		    closeMask();  //关闭加载中遮罩层
		}
    })
}