layui表格通过servlet连接数据库拿到数据

layui表格通过servlet连接数据库拿到数据,第1张

1.layui布局表格

<div class="demoTable">

搜索ID:

    <div class="layui-inline">

<input name="id" class="layui-input" id="demoReload" autocomplete="off">

</div>

<button class="layui-btn layui-bg-green" data-type="reload">搜索</button>

</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

<script>

layui.use('table',function(){

var table =layui.table

//方法级渲染

        table.render({

elem:'#LAY_table_user'

            ,url:'http://localhost:8080/onlineTest_war_exploded/question'

            ,cols: [[

,{field:'questionId',title:'题号',width:200}

,{field:'questionTitle',title:'题目',width:300}

,{field:'city',title:'通过率',width:200}

,{field:'classify',title:'难度',width:200}

]]

,id:'testReload'

            ,page:true

            ,height:310

        })

var $ =layui.$,active = {

reload:function(){

var demoReload =$('#demoReload')

//执行重载

                table.reload('testReload', {

page: {

curr:1 //重新从第 1 页开始

                    }

,where: {

key: {

id:demoReload.val()

}

}

},'data')

}

}

$('.demoTable .layui-btn').on('click',function(){

var type =$(this).data('type')

active[type] ?active[type].call(this) :''

})

})

</script>

url是servlet在web.xml下手动配置的路径

第一个javabean对象是存放表格原始数据 第二个javabean是存放code msg count和表格原始数据的 把第二个javabean转换为json格式发给后台

如图 第一次检查的时候发现传回去的json里面带\ 原因:之前用ajax已经把存放列表原始数据的数据转换为json了 再用第二个javabean对象又转换了一次相当于没转换 所以识别不出来

结果:

《Layui数据表格的绑定》

开发工具与关键技术:Visual Studio /.NET /layui插件

作者:肖春庆

撰写时间:2019年06月17日

在我们使用软件的过程当中有着许多数据在数据库里是需要我们进行数据的绑定,一般应用的是数据表格的绑定。并且显示给用户进行应用等等。我们知道数据在数据库里没有进行应用,那么数据库里的数据就是没有勇武之地,所以要进行数据表格的绑定。在这里我们应用layui致力于通过了分页逻辑,既可以轻松的进行绑定分页,也可以作为页面刷新分页的处理。

指定向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。把layui的插件进行引用。要引用css样式布局的插件,它自定义了一些视图布局,我们可以根据自己的需求进行调用即可,同时它还进行了JS一些功能的封装,同样我们只需要根据自己的需求进行调用。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/sjk/10017667.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-04
下一篇2023-05-04

发表评论

登录后才能评论

评论列表(0条)

    保存