• Layui数据表格的使用及其ajax异步请求

    目录

    一、数据表格table 通过id来获取，动态获取

    二、通过js动态获取数据表格数据，包括数据单元格的查看、编辑、删除

    三、通过ajax实现局部刷新刷新（ajax异步请求）重点解决无法获取输入框的问题

    四、Servlet+分页查询

    五、封装json数据，不然 layui框架那边无法获取数据

    六、底层数据逻辑以及实体类

    一、数据表格table 通过id来获取，动态获取

    <table  class="layui-hide" id="demo" lay-filter="test" >

    二、通过js动态获取数据表格数据，包括数据单元格的查看、编辑、删除

    1. <script type="text/html" id="barDemo">
    2.  
    3. <%--    <div class="layui-btn-container">--%>
    4. <%--        <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>--%>
    5. <%--        <button type="button" class="layui-btn layui-btn-radius">默认按钮</button>--%>
    6. <%--        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>--%>
    7. <%--        <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>--%>
    8. <%--        <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>--%>
    9. <%--        <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>--%>
    10. <%--    </div>--%>
    11. <%--layui-btn layui-btn-xs layui-btn-normal--%>
    12.     <a class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius" lay-event="detail">查看</a>
    13.  
    14.     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    15.  
    16.     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    17. </script>

    动态获取表格

    1. <script src="/layui/layui.js"></script>
    2. <script src="/layui/layui.all.js"></script>
    3. <script src="/assets/js/jquery.js" type="text/javascript"></script>
    4. <script src="/assets/js/jquery.form.js" type="text/javascript"></script>
    5. <script src="/layuiadmin/layui/layui.all.js"></script>
    6. <script src="/layuiadmin/layui/layui.js"></script>
    7. <script type="text/javascript"></script>
    8.  
    9.  
    10.  layui.use('table', function(){
    11.         var table = layui.table;
    12.         var dropdown = layui.dropdown;
    13.  
    14.         //第一个实例sousuo
    15.         table.render({
    16.             elem: '#demo'
    17.             // ,toolbar: '#toolbarDemo'
    18.             ,height: 'full-160'
    19.             // ,height: 'full-200' // 最大高度减去其他容器已占有的高度差
    20.             ,cellMinWidth: 100
    21.             ,url: '/ceshi?action=query' //数据接口//直接调用不需要跳转
    22.  
    23.             ,page: true //开启分页
    24.             // ,totalRow: true // 开启合计行得在前端传输数据：count//下面会多出空格//totalRowText: "合计"
    25.  
    26.             ,cols: [[ //表头
    27.  
    28.          {type: 'checkbox', fixed: 'left',width: 80,align: 'center',totalRowText: "合计"}
    29.                 ,{field: 'eId', title: '编号', width:80, sort: true, fixed: 'left'}
    30.                 ,{field: 'eAccount', title: '账户', width:80}
    31.                 ,{field: 'ePassword', title: '密码', width:80, sort: true}
    32.                 ,{field: 'eName', title: '姓名', width:80, sort: true}
    33.                 ,{field: 'eSex', title: '性别', width:80, sort: true}
    34.                 ,{field: 'eEducation', title: '学历', width:80, sort: true}
    35.                 ,{field: 'dName', title: '部门', width:120, sort: true}
    36.                 ,{field: 'ePosition', title: '职称', width:80, sort: true}
    37.                 ,{field: 'eIdcard', title: '身份证号码', width:180, sort: true}
    38.                 ,{field: 'ePhone', title: '手机号码', width:120, sort: true}
    39.                 ,{field: 'eAddress', title: '家庭地址', width:120, sort: true}
    40.                 ,{field: 'eEntrytime', title: '入职时间', width:120, sort: true}
    41.                 ,{fixed: 'right', title:'操作', width: 200, minWidth: 125, toolbar: '#barDemo'}
    42.             ]]
    43.             // , page:true
    44.             ,limit:10
    45.             ,limits:[5,10,20,30,40,50]
    46.             , parseData: function (res) { //res 即为原始返回的数据
    47.                 console.log("成功"+res.status+";=="+res.message+";"+res.total);
    48.                 return {
    49.                     "code": res.status, //解析接口状态
    50.                     "msg": res.message, //解析提示文本
    51.                     "count": res.total, //解析数据长度
    52.                     "data": res.data //解析数据列表
    53.                 };
    54.             }
    55.  
    56.  
    57.  
    58.             ,done: function(){
    59.                 var id = this.id;
    60.  
    61.               
    62.             }
    63.             ,error: function(res, msg){
    64.                 console.log(res, msg)
    65.             }
    66.         });
    67.  
    68.         // 工具栏事件
    69.         table.on('toolbar(test)', function(obj){
    70.             var id = obj.config.id;
    71.             var checkStatus = table.checkStatus(id);
    72.             var othis = lay(this);
    73.             switch(obj.event){
    74.                 case 'getCheckData':
    75.                     var data = checkStatus.data;
    76.                     layer.alert(layui.util.escape(JSON.stringify(data)));
    77.                     break;
    78.                 case 'getData':
    79.                     var getData = table.getData(id);
    80.                     console.log(getData);
    81.                     layer.alert(layui.util.escape(JSON.stringify(getData)));
    82.                     break;
    83.                 case 'isAll':
    84.                     layer.msg(checkStatus.isAll ? '全选': '未全选')
    85.                     break;
    86.                 case 'multi-row':
    87.                     table.reload('test', {
    88.                         // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
    89.                         lineStyle: 'height: 95px;'
    90.                     });
    91.                     layer.msg('即通过设置 lineStyle 参数可开启多行');
    92.                     break;
    93.                 case 'default-row':
    94.                     table.reload('test', {
    95.                         lineStyle: null // 恢复单行
    96.                     });
    97.                     layer.msg('已设为单行');
    98.                     break;
    99.                 case 'LAYTABLE_TIPS':
    100.                     layer.alert('Table for layui-v'+ layui.v);
    101.                     break;
    102.             };
    103.         });
    104.  
    105.         //触发单元格工具事件
    106.         table.on('tool(test)', function(obj){ // 双击 toolDouble
    107.             var data = obj.data;//获取当前的行的数据
    108.             //obj.data ：获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
    109.             console.log(obj.data)
    110.             //console.log(obj)
    111.             if(obj.event === 'detail'){ //查看
    112.  
    113.                 layer.alert('编号:'+ data.eId +"<br/>"+'账户:'+data.eAccount+"<br/>"+'密码：'+data.ePassword+"<br/>"+
    114.                     '姓名:' +data.eName+"<br/>"+'性别:' +data.eSex +"<br/>"+'学历：'+data.eEducation +"<br/>"+'部门：'
    115.                     +data.dName +"<br/>"+'职称：'+data.ePosition +"<br/>"+'身份证号码：'+data.eIdcard +"<br/>"+'手机号码：'
    116.                     +data.ePhone +"<br/>"+'家庭地址：'+data.eAddress +"<br/>"+'入职时间：'+data.eEntrytime);
    117.  
    118.             }else if(obj.event === 'del'){
    119.                 layer.confirm('真的删除员工吗？', function(index){
    120.                     console.log(index)
    121.                     console.log(data.eId)
    122.                     obj.del();
    123.                     // 	location.href="updatebyid?flag=all&eId="+eid;
    124.                     // 	location.href="updatebyid?flag=all&eId="+eid+"&xxx"+xxx;
    125.                     // location.href="updatetongyi?eId="+userId;
    126.                     location.href = "/newsWork?action=delwork&eId="+data.eId;
    127.                     layer.close(index);
    128.                 });
    129.             } else if(obj.event === 'edit'){
    130.                 layer.open({
    131.                     title: '编辑',
    132.                     type: 1,
    133.                     area: ['80%','80%'],
    134.                     content: '<div class="site-text" style="margin: 5px; display: none" id="window"  target="test123">' +
    135.                         '<form  action="/newsWork?action=add" method="post" class="layui-form" id="book"  lay-filter="example" style="margin: 25px;width: 500px"> ' +
    136.                         '<div class="layui-form-item"> ' +
    137.                         '<div class="layui-col-md6">' +
    138.                         '<label class="layui-form-label" >账号</label> ' +
    139.                         '<div class="layui-input-block"> ' +
    140.                         '<input type="text" id="bid" name="eAccount" lay-verify="title" autocomplete="off" placeholder="请输入账号"  class="layui-input"> ' +
    141.                         '</div> </div>' +
    142.                         '<div class="layui-col-md6">' +
    143.                         '<div class="layui-form-item"> ' +
    144.                         '<label class="layui-form-label">姓名</label> ' +
    145.                         '<div class="layui-input-block"> ' +
    146.                         '<input type="text" id="name" name="eName" lay-verify="title" autocomplete="off" placeholder="请输入姓名" class="layui-input"> ' +
    147.                         '</div> </div> </div> </div> ' +
    148.                         '<div class="layui-form-item"> ' +
    149.                         '<div class="layui-col-md6"> ' +
    150.                         '<label class="layui-form-label" >性别</label> ' +
    151.                         '<div class="layui-input-block"> ' +
    152.                         '<select id="select" class="form-control"  name="eSex" style="width:212px;height:38px;" > ' +
    153.                         '<option value="">请选择</option> ' +
    154.                         '<option value="男">男</option> ' +
    155.                         '<option value="女">女</option> ' +
    156.                         '</select> </div> </div> ' +
    157.                         '<div class="layui-col-md6"> ' +
    158.                         '<div class="layui-form-item"> ' +
    159.                         '<label class="layui-form-label">学历</label> ' +
    160.                         '<div class="layui-input-block"> ' +
    161.                         '<select id="select2" name="eEducation" class="form-control" style="width:212px;height:38px;" > ' +
    162.                         '<option value="">请选择</option>  ' +
    163.                         '<option value="硕士">硕士</option> ' +
    164.                         '<option value="本科">本科</option> ' +
    165.                         '<option value="大专">大专</option> ' +
    166.                         '<option value="高中">高中</option> ' +
    167.                         '<option value="小学">小学</option> </select> </div> </div> </div> </div> ' +
    168.                         '<div class="layui-form-item"> <div class="layui-col-md6"> ' +
    169.                         '<label class="layui-form-label" >部门</label> ' +
    170.                         '<div class="layui-input-block"> ' +
    171.                         '<select id="select" class="form-control"  name="dDid" style="width:212px;height:38px;" > ' +
    172.                         '<option value="">请选择</option> ' +
    173.                         '<option value="1">新闻审核部</option> ' +
    174.                         '<option value="2">人力资源部</option> ' +
    175.                         '<option value="后勤管理部">后勤管理部</option> ' +
    176.                         '<option value="技术研发部">技术研发部</option> ' +
    177.                         '<option value="市场营销部">市场营销部</option> ' +
    178.                         '</select> </div></div>' +
    179.                         ' <div class="layui-col-md6"> <div class="layui-form-item"> ' +
    180.                         '<label class="layui-form-label">职位</label> ' +
    181.                         '<div class="layui-input-block"> ' +
    182.                         '<select id="select2" name="ePosition" class="form-control" style="width:212px;height:38px;"  > ' +
    183.                         '<option value="">请选择</option> ' +
    184.                         '<option value="经理">经理</option> ' +
    185.                         '<option value="副经理">副经理</option> ' +
    186.                         '<option value="总监">总监</option> ' +
    187.                         '<option value="副总监">副总监</option> ' +
    188.                         '<option value="普通员工">普通员工</option> </select> </div></div></div> </div> ' +
    189.                         '<div class="layui-form-item"> ' +
    190.                         '<div class="layui-col-md6"> ' +
    191.                         '<label style="float:left;display:block;padding-top: 9px;padding-bottom:9px; padding-right:-25px;width:100px;font-weight:400;line-height:20px;text-align:right">身份证号码</label> ' +
    192.                         '<div class="layui-input-block"> ' +
    193.                         '<input type="text" id="id" name="eIdcard" lay-verify="title" autocomplete="off" placeholder="请输入身份证号码" class="layui-input"> ' +
    194.                         '</div> ' +
    195.                         '</div> ' +
    196.                         '<div class="layui-col-md6">' +
    197.                         ' <div class="layui-form-item"> ' +
    198.                         '<label class="layui-form-label">入职时间</label> ' +
    199.                         '<div class="layui-input-block"> ' +
    200.                         '<input id="test2" type="text"  name="eEntrytime" lay-verify="title" autocomplete="off" placeholder="请选择入职时间" class="layui-input"> ' +
    201.                         '</div> ' +
    202.                         '</div></div> </div> ' +
    203.                         '<div class="layui-form-item"> <div class="layui-col-md6"> ' +
    204.                         '<label class="layui-form-label" >手机号码</label> ' +
    205.                         '<div class="layui-input-block"> ' +
    206.                         '<input type="text" id="ePhone" name="ePhone" lay-verify="title" autocomplete="off" placeholder="请输入手机号码"  class="layui-input"> ' +
    207.                         '</div> </div> ' +
    208.                         '<div class="layui-col-md6"> ' +
    209.                         '<div class="layui-form-item"> ' +
    210.                         '<label class="layui-form-label">家庭地址</label> ' +
    211.                         '<div class="layui-input-block"> ' +
    212.                         '<input type="text" id="eAddress" name="eAddress" lay-verify="title" autocomplete="off" placeholder="请输入家庭地址" class="layui-input"> ' +
    213.                         '</div> </div> </div> </div> ' +
    214.                         '<div class="layui-form-item" style="float: left;margin-left: 250px"> ' +
    215.                         '<div class="layui-input-block"> ' +
    216.                         '<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">确认</button> ' +
    217.                         '</div> ' +
    218.                         '</div> ' +
    219.                         '<button href="/queryStaff" type="button" class="layui-btn layui-btn-primary" style="float: left;margin-left: 10px">返回</button> ' +
    220.                         '</form> </div>'
    221.                 });
    222.             }
    223.         });
    224.  
    225.         //触发表格复选框选择
    226.         table.on('checkbox(test)', function(obj){
    227.             console.log(obj)
    228.         });
    229.  
    230.         //触发表格单选框选择
    231.         table.on('radio(test)', function(obj){
    232.             console.log(obj)
    233.         });
    234.  
    235.         // 行单击事件
    236.         table.on('row(test)', function(obj){
    237.             //console.log(obj);
    238.             //layer.closeAll('tips');
    239.         });
    240.         // 行双击事件
    241.         table.on('rowDouble(test)', function(obj){
    242.             console.log(obj);
    243.         });
    244.  
    245.         // 单元格编辑事件
    246.         table.on('edit(test)', function(obj){
    247.             var field = obj.field //得到字段
    248.                 ,value = obj.value //得到修改后的值
    249.                 ,data = obj.data; //得到所在行所有键值
    250.  
    251.             var update = {};
    252.             update[field] = value;
    253.             obj.update(update);
    254.         });
    255.     });
    256.

    三、通过ajax实现局部刷新刷新（ajax异步请求）重点解决无法获取输入框的问题

    1.  <div style="float:left;margin-left:600px;margin-bottom: 20px;margin-top: 20px">
    2. <%--<textarea name="comment" id="message" placeholder="请注意评论礼仪！"></textarea>--%>
    3.      <input   id="serch" type="text" name="eName"  required lay-verify="required" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
    4.   </div>
    5.       <button type="submit" id="123" class="layui-btn layui-btn-normal layui-btn-radius" style="float:left;margin-left:15px;margin-top: 20px">搜索</button>
    1. layui.use(['form', 'jquery', 'layer'], function () {
    2.  
    3.  
    4.             var form = layui.form;
    5.             var $ = layui.$;
    6.             var layer = layui.layer;
    7.             let serch = $("#serch").val();
    8.             //通过点击事件获取。不然获取不了input里面的值
    9.             $(function () {
    10.                 $("#123").click(function () {
    11.                     // alert($("textarea[name='comment']").val());
    12.                     // console.log($("textarea[name='comment']").val())
    13.                     alert($("input[name='eName']").val());
    14.                     console.log($("input[name='eName']").val())
    15.                     let action = $("input[name='eName']").val()
    16.                     console.log(action)
    17.                     $.ajax( {
    18.  
    19.                         url    :  "/ceshi?action=mohu&eName="+action,  // 要提交的URL路径
    20.                         type    :  "post",    // 发送请求的方式
    21.                         // 要发送到服务器的数据
    22.                         dataType:  "JSON",     // 指定传输的数据格式
    23.                         beforeSend: function() {     //请求之前的方法
    24.                         },
    25.                         success  :  function(result) {
    26.                             let d = result;
    27.                             console.log(result)
    28.                             console.log(d)
    29.                             console.log(d.data.eId)
    30.                             console.log(result.data.eId)
    31.                             layui.use(['form','jquery','table','layer'],function(){
    32.                                 var form = layui.form;
    33.                                 var $ = layui.jquery;
    34.                                 var table = layui.table;
    35.                                 var layer = layui.layer;
    36.  
    37.                                 table.render({
    38.                                     elem:"#demo",
    39.                                     data:d
    40.                                     ,height: 'full-160'
    41.                                // ,height: 'full-200' // 最大高度减去其他容器已占有的高度差
    42.                                     ,cellMinWidth: 100
    43.                                     ,page: true, //开启分页c
    44.                                     url    :  "/ceshi?action=mohu&eName="+action,//调用接
    45.                                     cols: [[ //表头
    46.                          {
    47.    type: 'checkbox', fixed: 'left',width: 80,align: 'center',totalRowText: "合计"}
    48.    ,{field: "eId", title: '编号', width:80, sort: true, fixed: 'left'}
    49.    ,{field: 'eAccount', title: '账户', width:80}
    50.    ,{field: 'ePassword', title: '密码', width:80, sort: true}
    51.    ,{field: 'eName', title: '姓名', width:80, sort: true}
    52.    ,{field: 'eSex', title: '性别', width:80, sort: true}
    53.     ,{field: 'eEducation', title: '学历', width:80, sort: true}
    54.     ,{field: 'dName', title: '部门', width:120, sort: true}
    55.    ,{field: 'ePosition', title: '职称', width:80, sort: true}
    56.      ,{field: 'eIdcard', title: '身份证号码', width:180, sort: true}
    57.     ,{field: 'ePhone', title: '手机号码', width:120, sort: true}
    58.      ,{field: 'eAddress', title: '家庭地址', width:120, sort: true}
    59.      ,{field: 'eEntrytime', title: '入职时间', width:120, sort: true}
    60.        ,{fixed: 'right', title:'操作', width: 200, minWidth: 125, toolbar: '#barDemo'}
    61.                                 ]],
    62.                                     parseData: function(d) { //res 即为原始返回的数据
    63.                                         return {
    64.                                             "code": 0, //解析接口状态
    65.                                             "msg": "ok", //解析提示文本
    66.                                             "count": 100, //解析数据长度
    67.                                             "data": d //解析数据列表
    68.                                         }
    69.                                     }
    70.                                 });
    71.                             });
    72.                             // 请求成功后要执行的代码
    73.                             console.log("成功")
    74.                         },
    75.                         error       :  function() {           // 请求失败后要执行的代码
    76.                             console.log("失败")
    77.                         }
    78.                     } );
    79.                 })
    80.             })
    81.  
    82.             // let aaa =$("textarea[name='comment']").val()
    83.             // console.log($("textarea[name='comment']").val())
    84.             // console.log("=="+aaa)
    85.             // console.log(serch)
    86.             // console.log(form)
    87.             // console.log(form)
    88.             // console.log(form)
    89.             // console.log($("[name='eName']").val())
    90.             // var a=  document.getElementById("chaxun").innerText
    91.             // var a=  document.getElementById("chaxun").innerHTML
    92.             // alert(a);
    93.             // console.log("xx")
    94.             // console.log(a)
    95.             // console.log("xx")
    96.             // console.log("xx")
    97.  
    98.  
    99.     });

    四、Servlet+分页查询

    1. package com.lingnan.servlet;
    2.  
    3. import com.alibaba.fastjson.JSON;
    4. import com.lingnan.dao.impl.NewsWorkersDaoImpl;
    5. import com.lingnan.pojo.DataJson;
    6. import com.lingnan.pojo.NewsWorker;
    7. import com.lingnan.pojo.TableJson;
    8.  
    9. import javax.servlet.ServletException;
    10. import javax.servlet.annotation.WebServlet;
    11. import javax.servlet.http.HttpServlet;
    12. import javax.servlet.http.HttpServletRequest;
    13. import javax.servlet.http.HttpServletResponse;
    14. import java.io.IOException;
    15. import java.io.PrintWriter;
    16. import java.util.ArrayList;
    17. import java.util.HashMap;
    18. import java.util.List;
    19.  
    20. /**
    21.  * @author ：小邓
    22.  * @date ：Created in 2022/7/4 14:58
    23.  * @description：单单
    24.  * @modified By：
    25.  * @version: 1.0
    26.  */
    27. @WebServlet("/ceshi")
    28. public class ceshiServlet extends HttpServlet {
    29.  
    30.     @Override
    31.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    32.         String action = req.getParameter("action");
    33.         System.out.println(action);
    34.         String page = req.getParameter("page");
    35.         String limit = req.getParameter("limit");
    36.         System.out.println("第几页"+page+"几条"+limit);
    37.         if ( action.equals("mohu") ){
    38.             req.setCharacterEncoding("UTF8");
    39.             req.setCharacterEncoding("utf-8");//设置请求的编码格式为gb2312
    40.             resp.setContentType("text/html;charset=utf-8");//解决插入乱码问题顺序要放好
    41.             String eName = req.getParameter("eName");
    42.             System.out.println(eName);
    43.             List<NewsWorker> newsWorkers = new NewsWorkersDaoImpl().queryWorkByName(eName);
    44.             List<NewsWorker> workers = new ArrayList<>();
    45.             for ( int j = 0;j<newsWorkers.size();j++ ){
    46.                 if ( newsWorkers.get(j).getFlag()==0 ){
    47.                     System.out.println(newsWorkers.get(j).getFlag()==0);
    48.                     workers.add(newsWorkers.get(j));
    49.                 }
    50.             }
    51.             TableJson<NewsWorker> objectTableJson = new TableJson<>();
    52.  
    53.             //封装json
    54.             objectTableJson.setCode(0);
    55.             objectTableJson.setMsg("OK");
    56. //            objectTableJson.setData(newsWorkers);
    57.             objectTableJson.setData(workers);
    58.             objectTableJson.setCount(workers.size());
    59.             System.out.println(objectTableJson);
    60.  
    61.             String s = JSON.toJSONString(objectTableJson);//转换为json数据
    62.             PrintWriter writer = resp.getWriter();
    63.             writer.println(s);
    64. //            TableJson<NewsWorker> objectTableJson = new TableJson<>();
    65. //            //封装json
    66. //            objectTableJson.setCode(0);
    67. //            objectTableJson.setMsg("OK");
    68. //            objectTableJson.setData(newsWorkers);
    69. //            objectTableJson.setCount(newsWorkers.size());
    70. //            System.out.println(objectTableJson);
    71. //            String s = JSON.toJSONString(objectTableJson);//转换为json数据
    72. //            PrintWriter writer = resp.getWriter();
    73. //            writer.println(s);
    74.  
    75.  
    76.  
    77.         }else {
    78.             req.setCharacterEncoding("UTF8");
    79.             req.setCharacterEncoding("utf-8");//设置请求的编码格式为gb2312
    80.             resp.setContentType("text/html;charset=utf-8");//解决插入乱码问题顺序要放好
    81.             //解决网页乱码的问题
    82.             List<NewsWorker> newsWorkers = new NewsWorkersDaoImpl().queryWork();
    83.             int size = newsWorkers.size();
    84.             System.out.println("数据:"+size);
    85.  
    86.             List<NewsWorker> workers = new ArrayList<>();//新建一个数组来存放分页查询的数据
    87.             
    88.             int x = Integer.parseInt(page) * Integer.parseInt(limit)-Integer.parseInt(limit);
    89.             System.out.println(x);
    90.             for(int i = x;(i<size) && ((i-x)<Integer.parseInt(limit));i++){
    91.                 //按在也是获取数据把它加入新建的数组里面
    92. //                System.out.println(i);
    93. //                System.out.println(newsWorkers.get(i));
    94.                 if ( newsWorkers.get(i).getFlag()==0 ){
    95.                     System.out.println(newsWorkers.get(i).getFlag()==0);
    96.                 workers.add(newsWorkers.get(i));
    97.                 }
    98.             }
    99.  
    100.             TableJson<NewsWorker> objectTableJson = new TableJson<>();
    101.  
    102.             //封装json
    103.             objectTableJson.setCode(0);
    104.             objectTableJson.setMsg("OK");
    105. //            objectTableJson.setData(newsWorkers);
    106.             objectTableJson.setData(workers);
    107.             objectTableJson.setCount(workers.size());
    108.             System.out.println(objectTableJson);
    109.  
    110.             String s = JSON.toJSONString(objectTableJson);//转换为json数据
    111.             PrintWriter writer = resp.getWriter();
    112.             writer.println(s);//把json数据传输到网页中
    113.  
    114.         }
    115.  
    116.  
    117.     }
    118.  
    119.     @Override
    120.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    121.         this.doGet(req,resp);
    122.     }
    123. }

    五、封装json数据，不然 layui框架那边无法获取数据

    1. package com.lingnan.pojo;
    2.  
    3. import lombok.Data;
    4.  
    5. import java.util.List;
    6. import java.util.Map;
    7.  
    8. /**
    9.  * @author ：小邓
    10.  * @date ：Created in 2022/7/2 12:38
    11.  * @description：11
    12.  * @modified By：
    13.  * @version: 1.0
    14.  */
    15. @Data
    16. public class TableJson<T> {
    17.     private Integer code ;
    18.     private String msg ;
    19.     private List<T> data;
    20.     private int count;
    21.  
    22. }

    六、底层数据逻辑以及实体类

    1. package com.lingnan.dao.impl;
    2.  
    3. import com.lingnan.dao.NewsWorkersDao;
    4. import com.lingnan.pojo.NewsWorker;
    5. import com.lingnan.util.DataBase;
    6.  
    7. import javax.servlet.http.HttpServlet;
    8. import java.sql.ResultSet;
    9. import java.sql.SQLException;
    10. import java.util.ArrayList;
    11. import java.util.List;
    12.  
    13. /**
    14.  * @author ：小邓
    15.  * @date ：Created in 2022/7/3 14:07
    16.  * @description：shitilei
    17.  * @modified By：
    18.  * @version: 1.0
    19.  */
    20. public class NewsWorkersDaoImpl implements NewsWorkersDao {
    21.     @Override
    22.     public List<NewsWorker> queryWork() {
    23.        List<NewsWorker> list = new ArrayList<NewsWorker>();
    24.         String sql = "select e_id, e_account, e_password, e_name, e_sex, e_education,d_name, e_position, e_idcard, " +
    25.                 " e_phone, e_address, e_entrytion, e_role,flag" +
    26.                 " from news_worker inner join news_department on news_worker.d_id = news_department.d_id";
    27. //        String sql="select  * from news_worker";
    28.         ResultSet rs= DataBase.myQuery(sql, null);
    29.  
    30.         try {
    31.             while (rs.next()){
    32.                 //必须得放在里面，不然只是存储最后一条
    33.                 NewsWorker allwork = new NewsWorker();
    34.  
    35.                 allwork.setEId(rs.getInt("e_id"));
    36. //                System.out.println(rs.getInt("e_id"));
    37.                 allwork.setEAccount(rs.getString("e_account"));
    38.                 allwork.setEPassword(rs.getString("e_password"));
    39.                 allwork.setEName(rs.getString("e_name"));
    40.                 allwork.setESex(rs.getString("e_sex"));
    41.                 allwork.setEEducation(rs.getString("e_education"));
    42.                 allwork.setDName(rs.getString("d_name"));
    43.                 allwork.setEPosition(rs.getString("e_position"));
    44.                 allwork.setEIdcard(rs.getString("e_idcard"));
    45.                 allwork.setEPhone(rs.getString("e_phone"));
    46.                 allwork.setEAddress(rs.getString("e_address"));
    47.                 allwork.setEEntrytime(rs.getString("e_entrytion"));
    48.                 allwork.setERole(rs.getInt("e_role"));
    49.                 allwork.setFlag(rs.getInt("flag"));
    50.                 list.add(allwork);
    51. //                System.out.println(allwork);
    52.  
    53.             }
    54.         }
    55.         catch (SQLException e) {
    56.             e.printStackTrace();
    57.         }
    58.  
    59.         return list;
    60.     }
    61.  
    62.     @Override
    63.     public int insertWork(NewsWorker newsWorker) {
    64.         String sql = "insert into news_worker\n" +
    65.                 "    (e_id,e_account, e_password, e_name, e_sex,\n" +
    66.                 "     e_education, d_id, e_position, e_idcard,\n" +
    67.                 "     e_phone, e_address, e_entrytion) values (?,?,?,?,?,?,?,?,?,?,?,?)";
    68.         Object [] parms ={ newsWorker.getEId(),newsWorker.getEAccount(),newsWorker.getEPassword(),newsWorker.getEName(),
    69.                             newsWorker.getESex(),newsWorker.getEEducation(),newsWorker.getDDid(),
    70.                             newsWorker.getEPosition(),newsWorker.getEIdcard(),newsWorker.getEPhone(),
    71.                             newsWorker.getEAddress(),newsWorker.getEEntrytime()};
    72.         return DataBase.executeUpdateAll(sql,parms);
    73.  
    74.  
    75.     }
    76.  
    77.     @Override
    78.     public int deleteWork(String eId) {
    79.         String sql = "delete  from news_worker where e_id=?";
    80.         Object [] parms = {eId};
    81.         return DataBase.executeUpdateAll(sql,parms);
    82.     }
    83.  
    84.     @Override
    85.     public int deleteHuishouWork(int flag,String eId) {
    86.         String sql = "update news_worker set flag = ? where e_id = ?";
    87.         Object [] parms = {flag,eId};
    88.         return DataBase.executeUpdateAll(sql,parms);
    89.     }
    90.  
    91.     @Override
    92.     public List<NewsWorker> queryWorkByName(String eName) {
    93.         List<NewsWorker> list = new ArrayList<NewsWorker>();
    94.         String sql = "select e_id, e_account, e_password, e_name, e_sex, e_education,d_name, e_position, e_idcard,e_phone, e_address, e_entrytion, e_role,flag from news_worker inner join news_department on news_worker.d_id = news_department.d_id where e_name like '%" + eName+ "%'";
    95. //        String sql = "select e_id, e_account, e_password, e_name, e_sex, e_education,d_name, e_position, e_idcard,e_phone, e_address, e_entrytion, e_role,flag from news_worker inner join news_department on news_worker.d_id = news_department.d_id where e_name like %?%";
    96.         System.out.println(sql);
    97.         //        String sql = "select * from staff where sname like '%" + sname+ "%'";
    98. //        Object[] parms = {eName};
    99.         ResultSet rs= DataBase.myQuery(sql, null);
    100. //        ResultSet rs= DataBase.myQuery(sql, eName);
    101.  
    102.         try {
    103.             while (rs.next()){
    104.                 //必须得放在里面，不然只是存储最后一条
    105.                 NewsWorker allwork = new NewsWorker();
    106.                 allwork.setEId(rs.getInt("e_id"));
    107. //                System.out.println(rs.getInt("e_id"));
    108.                 allwork.setEAccount(rs.getString("e_account"));
    109.                 allwork.setEPassword(rs.getString("e_password"));
    110.                 allwork.setEName(rs.getString("e_name"));
    111.                 allwork.setESex(rs.getString("e_sex"));
    112.                 allwork.setEEducation(rs.getString("e_education"));
    113.                 allwork.setDName(rs.getString("d_name"));
    114.                 allwork.setEPosition(rs.getString("e_position"));
    115.                 allwork.setEIdcard(rs.getString("e_idcard"));
    116.                 allwork.setEPhone(rs.getString("e_phone"));
    117.                 allwork.setEAddress(rs.getString("e_address"));
    118.                 allwork.setEEntrytime(rs.getString("e_entrytion"));
    119.                 allwork.setERole(rs.getInt("e_role"));
    120.                 allwork.setFlag(rs.getInt("flag"));
    121.                 list.add(allwork);
    122. //                System.out.println(allwork);
    123.  
    124.             }
    125.         }
    126.         catch (SQLException e) {
    127.             e.printStackTrace();
    128.         }
    129.  
    130.         return list;
    131.     }
    132. }
    1. package com.lingnan.pojo;
    2.  
    3. import lombok.Data;
    4.  
    5. /**
    6.  * @author ：小邓
    7.  * @date ：Created in 2022/7/3 12:47
    8.  * @description：员工表实体类
    9.  * @modified By：
    10.  * @version: 1.0
    11.  */
    12. @Data
    13. public class NewsWorker {
    14.     private int eId;//员工编号
    15.     //使用小辣椒会把首字母变成大写
    16.     private String eAccount;//员工账号
    17.     private String ePassword;//员工密码
    18.     private String eName;//员工姓名
    19.     private String eSex;//性别
    20.     private String eEducation;//学历
    21.     private int dDid;//部门id
    22.     private String dName;//部门名称
    23.     private String ePosition;//职称
    24.     private String eIdcard;//身份证号码
    25.     private String ePhone;//手机号码
    26.     private String eAddress;//家庭地址
    27.     private String eEntrytime;//入职时间
    28.     private int eRole;//权限
    29.     private int flag;//删除字段判断
    30.  
    31. }

  • 相关阅读:
    数字时代，商业智能BI的落地意味着什么
    SoftwareTest6 - 用 Selenium 怎么点点点
    专利申请原则 专利申请后有什么好处 怎么保护专利的权益?
    内存管理【C++】
    92-Java的缓冲流概述、体系、字节缓冲流使用
    前端启动项目将http协议改为https协议
    [附源码]JAVA毕业设计货币博物馆展品管理系统（系统+LW）
    请求转发和动态包含/生成响应信息/响应头/重定向/输出流
    第十天：基于Ubuntu和gec6818开发板的QT图书管理系统完整项目设计
    一文带你彻底弄懂ZGC
  • 原文地址：https://blog.csdn.net/weixin_53669566/article/details/125631873