jdbc+分页（html）+模糊+分页小标
1.html页面
<!DOCTYPE html>
<html class="x-admin-sm">
<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,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/index.js"></script>
<script src="js/jquery-3.6.0.js"></script>
<script>
function sendOne(id) {
//alert("进入sendone=="+id);
$.ajax({
url:"../bus_movieServlet?type=6",
dataType:"json",
type:"post",
data:{"id":id},
success:function (data) {
//alert(id);
} ,
error:function (data) {
alert("error");
}
});
}
function gos() {
// var gos=$("#gos").val();
alert(gos);
if(gos!=null){
sreach(gos);
}else{
alert("gos出错啦");
}
}
function sreach(page,seachMovieName) {
var seachMovieName=$("#seachMovieName").val();
// alert("sreach=="+seachMovieName);
// alert("sreach=="+seachMovieName);
$.ajax({
url:"../bus_movieServlet?type=9",
dataType:"json",
type:"post",
data:{"page":page,"seachMovieName":seachMovieName},
success:function (data) {
//alert(data);
var h="";
for(var i=0;i<data.list.length;i++){
h+=" <tr>\n" +
" <td>\n" +
" <input type=\"checkbox\" lay-filter=\"checkall\" name=\"\" lay-skin=\"primary\">\n" +
" </td>\n" +
" <td>"+data.list[i].id+"</td>\n" +
" <td>"+data.list[i].movieName+"</td>\n" +
" <td>"+data.list[i].describe+"</td>\n" +
" <td>"+data.list[i].director+"</td>\n" +
" <td>"+data.list[i].movieStars+"</td>\n" +
" <td>"+data.list[i].ticketPrice+"</td>\n" +
" <td>"+data.list[i].length+"</td>\n" +
" <td class=\"td-status\"><span class=\"layui-btn layui-btn-normal \" > 已启用 </span></td>\n" +
" <td><a style=\"text-decoration:none\" οnclick=\"resetPwd(this,"+data.list[i].id+")\" href=\"javascript:;\" title=\"重置密码\">\n" +
" <i class=\"layui-icon\"></i>\n" +
" </a>\n" +
" <a title=\"编辑\" href=\"javascript:;\" οnclick=\"xadmin.open('编辑','/demo/articleadd.html',sendOne("+data.list[i].id+"),'800','510')\"\n" +
" class=\"ml-5\" style=\"text-decoration:none\">\n" +
" <i class=\"layui-icon\"></i>\n" +
" </a>\n" +
" \n" +
" <a title=\"删除\" href=\"javascript:;\" οnclick=\"member_del(this,"+data.list[i].id+")\"\n" +
" style=\"text-decoration:none\">\n" +
" <i class=\"layui-icon\"></i>\n" +
" </a></td>\n" +
" </tr>";
}
$("#selectall").html(h);
//动态非配分页
var s=data.page-1>0?data.page-1:1;
var x=data.page+1>data.sumpage?data.sumpage:data.page+1;
var f= '<a href="javascript:void(0)" οnclick="sreach(1)">首页</a>'+
'<a href="javascript:void(0)" οnclick="sreach('+s+')">上一页</a>'+
'<a href="javascript:void(0)" οnclick="sreach('+x+')">下一页</a>'+
'<a href="javascript:void(0)" οnclick="sreach('+data.sumpage+')">末页</a>'+
'<span>当前页/总页：'+data.page+'/'+data.sumpage+'</span>'+
'<input id="gos" style="width:30px">'+
'<input type="button" οnclick="gos()" value="GO">';
$("#fy").html(f);
} ,
error:function (data) {
alert("error 模糊查询");
}
});
}
</script>
<body onload="sreach(1)">
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">演示</a>
<a>
<cite>导航元素</cite></a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body ">
<form class="layui-form layui-col-space5">
<!-- <div class="layui-inline layui-show-xs-block">
<input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
</div>
<div class="layui-inline layui-show-xs-block">
<input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
</div>-->
<div class="layui-inline layui-show-xs-block">
<input type="text" id="seachMovieName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
<!--模糊查询的 小按钮-->
<div class="layui-inline layui-show-xs-block">
<input class="layui-btn" onclick="sreach(1)" type="button" value="搜索" lay-filter="sreach"><i class="layui-icon"></i></input>
</div>
</form>
</div>
<!--<div class="layui-card-header">
<button class="layui-btn layui-btn-danger" οnclick="delAll()"><i class="layui-icon"></i>批量删除</button>
<button class="layui-btn" οnclick="xadmin.open('添加用户','./articleadd.html',800,600)"><i class="layui-icon"></i>添加</button>
</div>-->
<div class="layui-card-body layui-table-body layui-table-main">
<table class="layui-table layui-form">
<thead>
<tr>
<th>
<input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
</th>
<th>ID</th>
<th>电影名称</th>
<th>电影描述</th>
<th>操作者</th>
<th>电影主演</th>
<th>电影价格</th>
<th>电影时长（分钟）</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="selectall">
<!--<tr>
<!–空白的小点–>
<td>
<input type="checkbox" name="id" value="1" lay-skin="primary">
</td>
</tr>-->
</tbody>
</table>
</div>
<div class="layui-card-body ">
<div class="page" >
<div id="fy">
<!--<a class="prev" href=""><<</a>
<a class="num" href="">1</a>
<a class="next" href="">>></a></div>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</head>
<script>
layui.use(['laydate','form'], function(){
var laydate = layui.laydate;
var form = layui.form;
// 监听全选
form.on('checkbox(checkall)', function(data){
if(data.elem.checked){
$('tbody input').prop('checked',true);
}else{
$('tbody input').prop('checked',false);
}
form.render('checkbox');
});
//执行一个laydate实例
laydate.render({
elem: '#start' //指定元素
});
//执行一个laydate实例
laydate.render({
elem: '#end' //指定元素
});
});
/*用户-停用*/
function member_stop(obj,id){
layer.confirm('确认要停用吗？',function(index){
if($(obj).attr('title')=='启用'){
//发异步把用户状态进行更改
$(obj).attr('title','停用')
$(obj).find('i').html('');
$(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
layer.msg('已停用!',{icon: 5,time:1000});
}else{
$(obj).attr('title','启用')
$(obj).find('i').html('');
$(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
layer.msg('已启用!',{icon: 5,time:1000});
}
});
}
/*用户-删除*/
function member_del(obj,id){
layer.confirm('确认要删除吗？',function(index){
//发异步删除数据
$(obj).parents("tr").remove();
location.href="../bus_movieServlet?type=4&&id="+id;
layer.msg('已删除!',{icon:1,time:1000});
});
}
/*用户-重置密码*/
function resetPwd(obj,id){
layer.confirm('确认要重置密码吗？',function(index){
//发异步删除数据
$(obj).parents("tr").remove();
location.href="../bus_movieServlet?type=8&&id="+id;
layer.msg('已重置!',{icon:1,time:1000});
});
}
function delAll (argument) {
var ids = [];
// 获取选中的id
$('tbody input').each(function(index, el) {
if($(this).prop('checked')){
ids.push($(this).val())
}
});
layer.confirm('确认要删除吗？'+ids.toString(),function(index){
//捉到所有被选中的，发异步进行删除
layer.msg('删除成功', {icon: 1});
$(".layui-form-checked").not('.header').parents('tr').remove();
});
}
</script>
</html>
2.servlet后台
protected void fy_mhSeach(HttpServletRequest req, HttpServletResponse resp) throws IOException {
System.out.println("进入fy_mhSeach");
String page=req.getParameter("page");
String movieName=req.getParameter("seachMovieName");
int pageInt = Integer.parseInt(page);
System.out.println(pageInt+movieName+"页面传过来的值");
List<bus_movie> fy_mSeach = bs.fy_mSeach(Integer.parseInt(page),movieName);
//查询总条数
int count = bs.count();
System.out.println(count+"=====总条数");
//总页数
int sumpage=count%5>0?(count/5+1):(count/5);
System.out.println("总页数"+sumpage);
System.out.println("分页查询加模糊显示"+fy_mSeach.size());
PrintWriter out=resp.getWriter();
//要用的数据 存到dgb里面
datagridebean dgb=new datagridebean();
dgb.setList(fy_mSeach);
dgb.setPage(Integer.parseInt(page));
dgb.setSumpage(sumpage);
//转json
String json=JSON.toJSONStringWithDateFormat(dgb, "yyyy-MM-dd");
out.println(json);
out.flush();
out.close();
}
3.sql语句
public List<bus_movie> fy_mSeach(int page, String movieName) {
//SELECT * FROM bus_movie WHERE movieName LIKE "%反贪风暴5%" LIMIT 0,5
int f=(page-1)*5;
String sql="select * from bus_movie where movieName like '%"+movieName+"%' limit "+f+",5 ";
List<bus_movie> fy = bd.fy_mSeach(sql);
return fy;
}
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
