<p><strong>工具(框架、插件)</strong></p>
<p>1、layui-v1.0.9<br>
2、jquery-1.8.3</p>
<p>代码</p>
<p><strong>1、jsp代码(可忽略jsp部分,转成html)</strong></p>
<div class="blockcode">
<pre class="brush:xhtml;">
<%@ 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 name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=8" />
<link rel="stylesheet" href="ad/layui/css/layui.css" rel="external nofollow" >
<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 class="top">
<div class="left_buttons">
<span id="add" class="layui-btn layui-btn-primary" style="border:none;font-size:16"><i class="layui-icon"></i>button1</span>
<span class="layui-btn layui-btn-primary" style="border:none;font-size:16"><i class="layui-icon"></i>button2</span>
</div>
<div class="search">
<form class="layui-form search-input" action="">
<div class="layui-form-item layui-form-pane">
<label class="layui-form-label"><i class="layui-icon"></i></label>
<div class="layui-input-block" style="width:300px">
<input type="text" name="title" required lay-verify="required" placeholder="请输入主题" autocomplete="off" class="layui-input" />
</div>
</div>
</form>
</div>
</div>
<div class="dataTable">
<div class="表格内容">
<table class="layui-table" lay-skin="line">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr class="table_title">
<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 class="dataBody">
</tbody>
<tfoot>
<tr>
<td colspan="11">
<span class="water-table-listbtn"></span>
<span class="water-table-page"><span id="pagemsg" class="water-table-pagemsg">当前0/0页</span>
<input type="button" id="fpbtn" value="首页"/>
<input type="button" id="rpbtn" value="上页"/>
<input type="button" id="npbtn" value="下页"/>
<input type="button" id="lpbtn" value="尾页"/>
<span id="pagemsg" class="water-table-pagemsg">跳转到<input type="text" id="gpinput" size="3" value="0"/>页</span>
<input type="button" id="gpbtn" value="跳转"/>
</span>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div><!-- 此处是最外围DIV -->
<script src="/bhps/ad/layui/layui.js"></script>
<script src="/js/jquery/jquery-1.8.3.min.js"></script>
<script src="/bhps/ad/js/component.js"></script>
<script>
var userId="<%=request.getAttribute("userid")%>";
var page=0;
var pages = 0;
var rows = 8;
</script>
</body>
</html>
</pre>
</div>
<p><strong>2、js代码</strong></p>
<div class="blockcode">
<pre class="brush: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={LL |
|