工具（框架、插件）
1、layui-v1.0.9
2、jquery-1.8.3
代码
1、jsp代码(可忽略jsp部分，转成html)
<%@ page language="java" contentType="text/html; charset=utf-8"%> <%@ include file="/common/include/taglib.jsp"%> <% <html> <head> <title>test page</title> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=8" /> <link href="https://www.jb51.net/ad/layui/css/layui.css" > <style> .left_buttons{float:left;margin-top:3px;} .search{float:right;margin-top:3px;} .dataTable{clear:both;} th{min-width:90px;text-align:center;} tfoot{text-align:center;} #modify{width:18px;padding:0 5 0 5;} #dlt{width:18px;padding:0 5 0 5;} </style> </head> <body> <div> <div> <div> <span><i></i>button1</span> <span><i></i>button2</span> </div> <div> <form action=""> <div> <label><i></i></label> <div> <input type="text" required lay-verify="required" placeholder="请输入主题" autocomplete="off" /> </div> </div> </form> </div> </div> <div> <div> <table lay-skin="line"> <colgroup> <col> <col> <col> </colgroup> <thead> <tr> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <th>col6</th> <th>col7</th> <th>col8</th> <th>col9</th> <th>col10</th> <th>col11</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <td colspan="11"> <span></span> <span><span>当前0/0页</span> <input type="button" value="首页"/> <input type="button" value="上页"/> <input type="button" value="下页"/> <input type="button" value="尾页"/> <span>跳转到<input type="text" size="3" value="0"/>页</span> <input type="button" value="跳转"/> </span> </td> </tr> </tfoot> </table> </div> </div> </div><!-- 此处是最外围DIV --> <script src="https://www.jb51.net/bhps/ad/layui/layui.js"></script> <script src="https://www.jb51.net/js/jquery/jquery-1.8.3.min.js"></script> <script src="https://www.jb51.net/bhps/ad/js/component.js"></script> <script> var userId="<%=request.getAttribute("userid")%>"; var page=0; var pages = 0; var rows = 8; </script> </body> </html>
2、js代码
$(document).ready(function(){ $("#fpbtn").attr("disabled", true); $("#rpbtn").attr("disabled", true); rewriteTable(page,rows,1); }); function rewriteTable(page,rows,isReplace){ $.post("ADTasks.ered?reqCode=queryAssignTask", {loginuserid:userId, start: page*rows, limit: rows }, function(result){ if(result.resultCode == 200){ if(isReplace){ $(".dataBody").html(""); } pages = changeShowedPage(page+1,result.total); buttonControl(page,pages); //alert(result.data.length); for(var i=0; i< result.data.length; i++){ $(".dataBody").append("<tr>"+ "<th>"+isNotNUll(result.data[i].1)+"</th>"+ "<th>"+isNotNUll(result.data[i].2)+"</th>"+ "<th>"+isNotNUll(result.data[i].3)+"</th>"+ "<th>"+isNotNUll(result.data[i].4)+"</th>"+ "<th>"+isNotNUll(result.data[i].5)+"</th>"+ "<th>"+isNotNUll(result.data[i].6)+"</th>"+ "<th>"+isNotNUll(result.data[i].7)+"</th>"+ "<th>"+isNotNUll(result.data[i].8)+"</th>"+ "<th>"+isNotNUll(result.data[i].9)+"</th>"+ "<th>"+isNotNUll(result.data[i].10)+"</th>"+ "<th>"+ "<span id=\"modify\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\"></i></span>"+ "<span id=\"dlt\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\" onClick=\"deleteTask("+result.data[i].id+",\'"+result.data[i].theme+"\'"+");\"></i></span>"+ "</th>"+ "</tr>"); //alert("hello"); //console.log(result["data"][i]); //var o = result["data"][i]; // $(".dataBody").append("<tr>"); // $(".dataBody").append("<th>"+isNotNUll(result.data[i].1)+"</th>"); // $(".dataBody").append("<th>"+isNotNUll(result.data[i].2)+"</th>"); // $(".dataBody").append("<th>"+isNotNUll(result.data[i].3)+"</th>"); // $(".dataBody").append("<th>"+isNotNUll(result.data[i].4)+"</th>"); // $(".dataBody").append("<th>"+isNotNUll(result.data[i].5)+"</th>"); // $(".dataBody").append("<th>"+isNotNUll(result.data[i].6)+"</th>"); // $(".dataBody").append("<th>"+isNotNUll(result.data[i].7)+"</th>"); // $(".dataBody").append("<th>"+isNotNUll(result.data[i].8)+"</th>"); // $(".dataBody").append("<th>"+isNotNUll(result.data[i].9)+"</th>"); // $(".dataBody").append("<th>"+isNotNUll(result.data[i].10)+"</th>"); // $(".dataBody").append("<th>"+ // "<span id=\"modify\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\"></i></span>"+ // "<span id=\"dlt\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\" onClick=\"deleteTask("+result.data[i].id+","+result.data[i].1+");\"></i></span>"+ // "</th>"); // $(".dataBody").append("</tr>"); } }else{ alert("获取数据失败.."+result.message); } },"json" ); } function isNotNUll(param){ if(param){ return param; }else{ return ""; } } //////////////////////////////////////分页function///////////////////////////////// //fpbtn 首页//rpbtn 上页//npbtn 下页//lpbtn 尾页//gpbtn 跳转 $("#npbtn").click(function(){ page = page + 1; rewriteTable(page,rows,1); } ); $("#rpbtn").click(function(){ page = page - 1; rewriteTable(page,rows,1); $("#npbtn").removeAttr("disabled"); } ); $("#fpbtn").click(function(){ page = 0; rewriteTable(page,rows,1); } ); $("#gpbtn").click(function(){ var jumpPage = $("#gpinput").val(); if(jumpPage<1||jumpPage>pages){ alert("请输入符合范围的页码"); return; } if(jumpPage - 1 == page){ alert("当前已经是第"+jumpPage+"页"); return; } page = jumpPage - 1; rewriteTable(page,rows,1); } ); $("#lpbtn").click(function(){ page = pages - 1; rewriteTable(pages-1,rows,1); } );