数据列表页：inoutList.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目投资--汇智学堂后台管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../../layui2/css/layui.css" media="all" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
<link rel="stylesheet" href="../../css2/news.css" media="all" />
</head>
<body class="childrenBody" onload="queryinoutallpage()">
<blockquote class="layui-elem-quote news_search">
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" value="" id="projectname" placeholder="请输入关键字" class="layui-input search_input">
</div>
<a class="layui-btn search_btn" onclick="queryinout()">查询</a>
</div>
<div class="layui-inline">
<a class="layui-btn layui-btn-normal newsAdd_btn" href="inoutAdd.html">添加日常收支</a>
</div>
<div class="layui-inline">
<a class="layui-btn layui-btn-danger batchDel">批量删除</a>
</div>
<div class="layui-inline">
<a class="layui-btn layui-btn-normal newsAdd_btn" href="inForIEchart.html">个人借款统计图</a>
</div>
<!--<div class="layui-inline">
<div class="layui-form-mid layui-word-aux">本页面刷新后除新添加的文章外所有操作无效，关闭页面所有数据重置</div>
</div>-->
</blockquote>
<div >
<p><span>总页数为：</span><span id="totalpage"></span></p>
</div>
<div class="layui-form news_list">
<table class="layui-table">
<colgroup>
<col width="4%">
<col width="26%">
<col width="12%">
<col width="6%">
<col width="11%">
<col width="6%">
<col width="11%">
<!--<col width="5%">-->
<col width="11%">
</colgroup>
<thead>
<tr>
<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose" id="allChoose"></th>
<th style="text-align:center;">内容描述</th>
<th>收支标题</th>
<th>收支人</th>
<th>时间</th>
<th>金额</th>
<th>分类</th>
<!--<th >编号</th>-->
<th>操作</th>
</tr>
</thead>
<tbody class="news_content" id="tbody">
</tbody>
</table>
</div>
<!--<div id="page"></div>-->
<div class="page">
<div>
<!--<a class="prev" href=""><<</a>-->
<a class="layui-btn search_btn" onclick="queryinoutfirstpage()">首页</a>
<a class="layui-btn search_btn" onclick="queryinoutprepage()">上一页</a>
<a class="layui-btn search_btn" onclick="queryinoutnextpage()">下一页</a>
<a class="layui-btn search_btn" onclick="queryinoutlastpage()">尾页</a>
<!--<a class="num" href="servletinout?do=firstPage&a=0">首页</a>
<a class="num" href="servletinout?do=prePage¤tPage=${currentPage}">上一页</a>
<a href="servletinout?do=nextPage¤tPage=${currentPage}">下一页</a>
<a href="servletinout?do=lastPage">尾页</a>
<!--<a class="next" href="">>></a>-->
</div>
</div>
<script type="text/javascript" src="../../layui2/layui.js"></script>
<script type="text/javascript" src="inoutList2.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>js中的queryinout函数
var XmlHttp= createXMLHttpRequest();
var para;
var url;
var tbody=document.getElementById("tbody");
var currentPage=1;
function queryinout() {
var projectname=document.getElementById("projectname").value;
tbody.innerHTML=null;
para="projectname="+projectname;
url="/servletinout?do=query";
XmlHttp.onreadystatechange=handleStateChange;
XmlHttp.open("POST",url,true);
XmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;");
XmlHttp.send(para);
}
function handleStateChange() {
if(XmlHttp.readyState==4){
if(XmlHttp.status==200){
// var tbody=document.getElementById("tbody");
tbody.innerHTML+=XmlHttp.responseText;
}
}
}
function createXMLHttpRequest() {
//IE
try{
xmlHttp=new ActiveXObject("Msxml.XMLHTTP");
}
catch (e) {
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc){
xmlHttp=null;
}
}
//非IE浏览器下创建XMLHTTPRequest对象
if(!xmlHttp&&typeof XMLHttpRequest!="undefined"){
xmlHttp=new XMLHttpRequest();
}
return xmlHttp;
}
