您的位置: 首页  >  文章  >  关于layui的分页查询_table实现

关于layui的分页查询_table实现

分类: 文章 • 2022-10-06 16:18:31

对    于    后   台   管    理    系    统   ,以    前    的    分    页    展    示    是    自    己    写    的


  先看一下这是我用layui做的一个简单的分页。↓展示截图。

关于layui的分页查询_table实现关于layui的分页查询_table实现


 先来总结一下自己的问题：首先自己是个刚到公司的小白，对于前端的只是和各种ui框架掌握的不是很熟，

（实际上是没看过），到公司之后为了方便快捷，所以开始接触ui组建框架一些散乱的东西，加上自己...嗯嗯..都懂，后面的不用言说。学习起来有点费劲，看了半天文档我盯着它，他盯着我，单不认识他，他不认识我，导致我弄了2天，第二天验收项目了，还没弄好，心里有1w个cnm在奔腾，在这之前我也在网上找了好多实例要么看不懂，要么就有点鸡血了。

 扯远了，简单说还是自己学习能力太差。。嗯嗯。废话不多说，下面粘上实例：

       html代码↓

<table class="layui-hide" id="test" lay-filter="demo"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

js代码《需要导入layui的js》

<script type="text/javascript">

//分页参数设置 这些全局变量关系到分页的功能
//var startAllAppoint = 0;//开始页数    这个可以省略
var pageSize = 8;//每页显示数据条数
var currentPageNo = 1;//当前页数
var dataLength=0;//数据总条数

//分页控件
layui.use(['laydate', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
    var laypage = layui.laypage //分页
        ,layer = layui.layer //弹层
        ,table = layui.table //表格
        ,element = layui.element; //元素操作


    //执行一个 table 实例
    table.render({
        elem: '#test'
        ,height: 532
        ,url: URL+'/adminSiteType/selTypePage.shtml'   这里的url是自己写的一个js   引入js到这个页面就行例：var URL="http://192.168.0.106:8080/website";

        ,method:'POST'   //laui 修改请求方式
        ,request: {     
            pageName: 'currentPageNo' //页码的参数名称，默认：page
            ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
        }
       , response: {
            statusName: 'result' //数据状态的字段名称，默认：code
            ,countName: 'totalCount' //数据总数的字段名称，默认：count
            ,dataName: 'datas' //默数据列表的字段名称，认：data        //我返回的datas集合 

        }
        ,page: true //开启分页
        ,cols: [[ //表头
            {field: 'uuid', title: 'ID'}
            ,{field: 'title', title: '标题' }
            ,{field: 'puuid', title: '父标题'}                    //这里的field 的值是json数据里要展示的字段
            ,{field: 'description', title: '描述'}
            ,{field: 'level', title: '深度'}
            ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
        ]]
    });
    //监听工具条
    table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值

        if(layEvent === 'detail'){
            layer.msg('查看操作');
        } else if(layEvent === 'del'){
            layer.confirm('真的删除行么', function(index){

                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);
                //向服务端发送删除指令

            });
        } else if(layEvent === 'edit'){
            layer.msg('编辑操作');
        }
    });
});
这里只做了分页查询，其他的自己可以写

相关推荐