精华内容
下载资源
问答
  • 通过layout布局上下两部分。上下显示两个datagrid表格。...但是下面的datagrid就不显示分页了,也是和上面的datagrid分页是一样的。 后来我把上面datagrid分页注释掉,下面的datagrid分页还是不显示
  • Layui 使用数据表格 Table 分页显示数据Layui 使用数据表格 Table 分页显示数据1.准备好一个合适的数据接口2.随便写一个测试 Demo3.解决问题4.优化显示以及功能补充5.效果演示5.源码地址 Layui 使用数据表格 Table ...

    Layui 使用数据表格 Table 分页显示数据

    1.准备好一个合适的数据接口

    1.数据量还行
    2.接口返回的数据最好满足 table 组件默认规定的数据格式
    在这里插入图片描述
    我这里用 Java SSM 搭了一个后台,取一个 url 来用,这个数据接口有 1000 条数据返回,这样,我们看分页效果也比较明显
    在这里插入图片描述

    2.随便写一个测试 Demo

    2.1.我们先随便写一个测试 Demo 网页

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Table Demo</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" type="text/css" href="plugin/layui/css/layui.css">
    	<script src="plugin/layui/extend/city-picker/city-picker.data.js"></script>
    	<link rel="stylesheet" type="text/css" href="plugin/layui/extend/city-picker/city-picker.css">
    </head>
    <body>
    	<div class="layui-cow layui-col-md6 layui-col-md-offset1" style="margin-top: 20px">
    		<fieldset class="layui-elem-field layui-field-title site-title">
    			<legend><a name="attr">Table 使用</a></legend>
    		</fieldset>
    		<table class="layui-hide" id="stuTable" lay-filter="stuTable"></table>
    		
    	</div>
    	
    	<script type="text/javascript" src="plugin/layui/layui.all.js"></script>
    	<script type="text/javascript">
    		layui.use(['table'],function(){
    			var table = layui.table;	//表格
    
    			table.render({
    				elem:'#stuTable'	//表单ID
    				,url:'http://localhost:8080/api/student'	//数据接口
    				,page:{				//分页设置
    					limit:10,		//默认每一页显示数量
    					limits:[5,10,20,30,40,50]		//可选择每页显示的数量
    				}
    				,cols:[[			//表格列
    					{field:'studentId',title:'ID',align:'center',sort:false }
    					,{field:'studentName',title:'姓名',align:'center',sort:false }
    					,{field:'gender',title:'性别',align:'center',sort:false }
    					,{field:'birthday',title:'出生年月',align:'center',sort:false }
    					,{field:'admissionTime',title:'入学时间',align:'center',sort:false }
    					,{field:'address',title:'籍贯',align:'center',sort:false }
    				
    				]]
    			});
    		})
    	</script>
    </body>
    </html>
    

    2.2.我们在浏览器打开该网页看看效果,发现报错显示数据接口异常,而我们从控制台的报错可以判断出这是属于:跨域问题(CORS / Access-Control-Allow-Origin)
    在这里插入图片描述

    3.解决问题

    3.1.我在网上找到不少解决问题的办法,随便试了一个就成功了,那就是添加跨域的注解 @CrossOrigin(origins = “*”)

    对这个问题感兴趣的小伙伴可以去看看 xcbeyond 大佬写的 跨域问题(CORS / Access-Control-Allow-Origin)

    在这里插入图片描述
    3.2.这次我们重新打开看下,发现数据可以正常显示了
    在这里插入图片描述

    4.优化显示以及功能补充

    • 1.首先我们把性别编号显示为对应的汉字
    • 2.再调整各列的宽度
    • 3.添加头部工具栏
    • 4.添加操作列
    		<!-- 头工具 -->
    	    <script type="text/html" id="toolbarStudent">
    	        <div class="layui-inline">
    	            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    	        </div>
    	    </script>
    		<!-- 性别 -->
    		<script type="text/html" id="gender">
    		    {{# if (d.gender==1) {}}
    		    <span></span>
    		    {{# }else if(d.gender==2){}}
    		    <span></span>
    		    {{# } else{ }}
    		    <span>未知</span>
    		    {{# }}}
    		</script>
    		<!-- 行工具 -->
    	    <script type="text/html" id="barOperate">
    	        <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
    	        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
    	        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
    	    </script>
    

    在这里插入图片描述

    5.效果演示

    在这里插入图片描述

    当然如果还有什么关于 layui 方面的问题,可以去看看 Layui 的官方文档 Layui 开发使用文档

    5.源码地址

    GitHub地址:https://github.com/1123GY/Layui

    展开全文
  • 表格的渲染在这里就省略了,主要说下最简单的分页方法要点 第一点: 开启分页page:true //js表格渲染代码,开启分页page:true table.render({ elem: '#demo' ,url: 'xxx.php' //数据接口 ,page: true //开启...

    表格的渲染在这里就省略了,主要说下最简单的分页方法要点

    第一点: 开启分页page:true

     //js表格渲染代码,开启分页page:true
      table.render({
        elem: '#demo'   
        ,url: 'xxx.php' //数据接口
        ,page: true //开启分页
          //其他分页用到的参数按自已需求填写,例如下面这样
        ,limits: [5,10, 20,50]
        ,limit: 10 //每页默认显示的数量 
        ,cols: [[     //表头
          //.....省略一万行代码
    

    进行表格页面时,系统默认请求两个参数:page(当前所在的页)、limit(每页显示的数据记录的数量)。

    点击“上一页”或“下一页”或某一页时,也同样会请求默认的这两个参数,方式为:get。

    在这里插入图片描述

    这两个参数也已经足够完成分页的功能了,因为layui内置的实现的逻辑,我们只需要想办法怎么去返回数据就行了。

    第二点:按格式要求返回请求数据

    附上返回的格式,后台处理的时候拼接就行了,最后echo 下面这个就能正常接收显示了

    {
      "code": 0,
      "msg": "",
      "count": 1000,
      "data": [{}, {}]
    }
    

    这里先捋一下:

    假设我们限制每页显示10条数据,也就是limit在第一页面的时候发送请求是:xxx/yyy/?page=1&limit=10

    点击第二页,自动发送请求:xxx/yyy/?page=2&limit=10

    点击第三页,自动发送请求:xxx/yyy/?page=3&limit=10

    以此类推…

    我们会发现,在请求某一页的数据时,默认传递的参数会自己变化,方便我们返回该页的数据。

    后台处理思路:

    1、查询数据库:SELECT *……,得到总记录数,赋值给count

    2、取出某一页的全部记录:赋值给data

    page=2&limit=20:sql的查询语句是:SELECT * FROM xxtable LIMIT 10,20";

    page=3&limit=30:sql的查询语句是:SELECT * FROM xxtable LIMIT 20,30";

    总结出某一页的查询语句为:SELECT * FROM xxtable LIMIT limit *(page-1) , limit;

    这样第二页的数据就查出来了,然后赋值给data就ok

    这样,

    //xxx.php页面,处理请求,这里只列出部分代码
    //后台接收到page与limit参数
    $page=isset($_GET[ 'page' ])?$_GET['page']:1;
    $limit=isset($_GET[ 'limit' ])?$_GET['limit']:10;
    $cur = (page-1)*limit;
    
    //两个查询语句
    $sqlAll = "SELECT * FROM table";
    $sqlCur = "SELECT * FROM table LIMIT $cur,$limit";
    
    //获取总记录数(这里使用PDO与数据库交互的方法,用原生的也是一样的)
    $result = $PDO->query($sqlAll);//执行 SQL 语句,返回PDOStatement对象,可以理解为结果集
    $rows = $result->fetchAll(PDO::FETCH_ASSOC);//返回一个包含结果集中所有行的数组
    $count = count($rows);//使用count()方法取得总数
    
    //最后搞到data就大功告成了
    $resultCur = $PDO->query($sqlCur);
    $rowsCur = $result->fetchAll(PDO::FETCH_ASSOC);//数据部分就是这个啦,只不过要转换成json
    //就是下面这样子处理
     $json_rowsCur = json_encode($rowsCur);
    
    //最最最后,拼接返回数据data
    
    $data = "{
              "code": 0,
              "msg": "",
              "count": $count,
              "data": $json_rowsCur
    		}";
    
    //还有呢
    echo $data;
    

    特别提醒,代码仅供自己备忘的记录,需要的小伙伴不要照抄哦,代码只是参考,不用完全跟这写法一样!

    在这里插入图片描述

    展开全文
  • 使用JS动态生成表格数据和分页显示

    千次阅读 2018-06-09 15:37:06
    同时如果数据过多,支持分页显示,这些数据到保存时可以一起提交到后台。 效果如下: js代码(要引入JQuery): &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;style&gt;...

    根据录入的内容动态显示到页面,不需要通过数据库保存,这样子减轻服务器压力。同时如果数据过多,支持分页显示,这些数据到保存时可以一起提交到后台。
    效果如下:
    这里写图片描述

    js代码(要引入JQuery):

    <!DOCTYPE html>
    <html lang="en">
    <style>
    
    </style>
    <head>
        <meta charset="UTF-8">
        <script src="myjs/jquery-1.9.1.min.js"></script>
        <title>动态表格数据插入和分页显示</title>
    </head>
    <body>
        <table>
              <tr>
                <td>序号:</td>
                <td >
                    <input type="text" class="form-control" id="number" name="number">
                </td>
            </tr>
            <tr>
                <td>附件名称:</td>
                <td >
                    <input type="text" class="form-control" id="annexName" name="annexName">
                </td>
            </tr>
            <tr>
                <td>附件说明:</td>
                <td >
                    <textarea type="text" class="form-control" cols="15"   id="annexInstruction" name="annexInstruction"></textarea>
                </td>
    
            </tr>
            <tr>
                <td>
                    <button type="button" id="addAnnex">添加</button>
                </td>
            </tr>
        </table>
    
        <table class="table table-bordered" id="mytable-add" style="margin-left: 30%;width: 40%">
            <tr>
                <th>
                    <input type="checkbox" id="checkall">
                </th>
                <th>
                    序号
                </th>
                <th>
                    附件名称
                </th>
                <th>
                    说明
                </th>
            </tr>
            <tbody id="annexTbody" >
                <!--动态生成-->
            </tbody>
            <tr >
                <td></td>
                <td>
                    当前第<span id="currentPage">1</span></td>
                <td>
                     <button type="button" id="prePage">上一页</button>
                </td>
                <td>
                     <button type="button" id="nextPage">下一页</button>
                </td>
            </tr>
            </table>
    
            <script type="text/javascript">
                var count=0;
                var page=0;
                var size=3;
                var annexList = new Array();
                  //添加数据
            $("#addAnnex").click( function () {
                //获取值
                var number = $("#number").val();
                var annexName = $("#annexName").val();
                var annexInstruction = $("#annexInstruction").val();
               //拼接tr数据
                var annexHtml =
                    "<tr >" +
                        "<td>" +
                            "<input type = 'checkbox' value='annex" + count + "'>" +
                        "</td>" +
                        "<td>"+ number + "</td>" +
                        "<td>" + annexName + "</td>" +
                        "<td>" + annexInstruction +"</td>" +
                    "</tr>";
                if (count < size) {
                    //第一页显示的数量
                    $("#annexTbody").append(annexHtml);
                    $("#nextPage").attr("disabled","disabled");
                } else {
                    $("#nextPage").removeAttr("disabled");
                }
                count++;
                //保存到数组中
                var annex = new Object();
                annex.number = number;
                annex.annexName = annexName;
                annex.annexInstruction = annexInstruction;
                annexList.push(annex);
            });
    
            //上一页
            $("#prePage").click( function () {
                 page--;
                 paging();
            });
    
            //下一页
            $("#nextPage").click( function () {
                 page++;
                 paging();
    
            });
    
            //分页
            function paging() {
                var annexHtml ="";
                var curentNumber = page*size;
                var length = curentNumber+size;
                //当前页数
                var currentPage = page+1;
                for(var i = curentNumber; i < length; i++ ) {
                    // console.log(annexList[i]);
                    if(typeof(annexList[i]) == "undefined") {
                     break;
                    }
                    annexHtml +=
                     "<tr >" +
                        "<td>" +
                            "<input type = 'checkbox' >" +
                        "</td>" +
                        "<td>"+ annexList[i].number + "</td>" +
                        "<td>" + annexList[i].annexName + "</td>" +
                        "<td>" + annexList[i].annexInstruction +"</td>" +
                    "</tr>";
    
                }
    
                if(typeof(annexList[length]) == "undefined") {
                    //到了最后一页不可以点击
                    $("#nextPage" ).attr("disabled","disabled");
                } else {
                    //恢复点击
                    $("#nextPage" ).removeAttr("disabled");
                }
    
                if(page == 0) {
                    //到了第一页不可以点击
                    $("#prePage" ).attr("disabled","disabled");
                } else {
                    $("#prePage" ).removeAttr("disabled");
                }
                //填充到表格
                $("#annexTbody").html(annexHtml);
                //显示当前页数
                $("#currentPage").text(currentPage);
            }
    
            </script>
    </body>
    </html> 
    展开全文
  • layui数据表格分页显示

    千次阅读 2019-02-12 16:42:48
    原本数据显示页面使用框架自带的分页显示,不是异步加载,页面需要重新加载,影响用户体验。因为原本使用的前端框架是layui,故使用layui的数据表格进行数据显示。 layui版本:2.4.5 引入layui的css和js文件,...

    原本数据显示页面使用框架自带的分页显示,不是异步加载,页面需要重新加载,影响用户体验。因为原本使用的前端框架是layui,故使用layui的数据表格进行数据显示。

    layui版本:2.4.5

    引入layui的css和js文件,layui官网,进入官网首页可以看到下载的链接

    在html中添加需要显示表格的table标签

    html代码:

    <table class="layui-table" id="table1" lay-filter="order1">
        <script type="text/html" id="barDemo">
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        </script>
    </table>

    js代码:

    var pageSize = 10; //每页显示的数据条数
    var currentPageNo = 1; //当前页数
    //未支付订单数据
    table.render({
        elem: '#table1' //需要显示数据表格的table标签
            ,
        url: '请求后台数据的地址' //请求地址
            ,
        method: 'post' //请求方式
            ,
        request: {//请求携带的参数
            pageName: 'currentPageNo' //页码的参数名称,默认:page
                ,
            limitName: 'pageSize' //每页数据量的参数名,默认:limit
    
        },
        response: {//后台返回的数据
            countName: 'totalCount' //数据总数的字段名称,默认:count
                ,
            dataName: 'data' //数据列表字段名称,默认:data
        },
        page: true,//开启分页
        limits: ['10', '20', '30'],//分页每页显示数据条数(页面选择)
        cols: [//表头及各列显示的样式等等
            [{
                    field: 'id',
                    title: '序号',
                    align: 'center',
                    width: '8%'
                }, {
                    field: 'order_id',
                    title: '订单号',
                    align: 'center',
                    width: '15%',
                    style: 'color:blue;'
                }, {
                    field: 'purchase_type',
                    title: 'VIP类型',
                    align: 'center',
                    width: '11%'
                }, {
                    field: 'purchase_time',
                    title: 'VIP时长',
                    align: 'center',
                    width: '11%'
                }, {
                    field: 'price',
                    title: '金额(元)',
                    align: 'center',
                    width: '13%'
                }, {
                    field: 'order_time',
                    title: '订单生成时间',
                    align: 'center',
                }, {
                    field: 'pay_type',
                    title: '支付类型',
                    hide: true
                }, {
                    field: 'operation',
                    title: '操作',
                    align: 'center',
                    toolbar: '#barDemo'
                }
    
            ]
        ]
    });
    
    //监听工具条
    table.on('tool(order1)', function (obj) {
        var data = obj.data //获取当前行数据
            ,
            layEvent = obj.event; //获得lay-event对应的值
        if (layEvent === 'edit') {
            //此处为编辑操作的代码
    
        } else if (layEvent == 'del') {
          //此处为删除操作的代码
        }
    });

    页面效果:

    服务器端返回的数据示例:服务器返回的数据格式是json格式

     

    服务器端需要自己处理数据的分页,layui的数据表格请求时,会携带页码和每页显示的数据条数,需要自己进行出去并返回数据

    layui数据表格相关参数及教程,还有其他参数,设置,可以根据个人情况进行添加,修改等。

    展开全文
  • Word:表格无法分页显示

    千次阅读 2019-01-30 13:13:00
    今天遇到一个Word中表格无法分页显示的问题,特记录下来以备后查 我们知道,在Word中将表格不设置为“允许跨页断行”,假设表格中第二行某个单元格的文字内容较多,超出了当前页面的可用空间,则在当前页上只显示...
  • 最近项目中用到了一个功能,就是表格分页显示。以前没整过,今天学会了,把它整理一下,下次可以直接用。  实例代码:https://github.com/dreamITGirl/projectStudy 参考博客:...
  • 现象:一个表格,数据有37条,每页显示10条,第1页显示正常; 当我点击第二页时,也正常;点击第三页,数据变多,不止一页10条,第四页也是更多,返回第一页,第一页也有几十条。。。 排查: 第一步:查看网络请求...
  • 底部表格:接收后端返回JSON数据,对表格渲染显示 2、前端传参 前端采用Layui框架渲染,对页码和条数传参给后台做条件查询; 得到后端返回数据,对前端表格进行重载刷新 顶部搜索栏HTML <div class="layui-col-...
  • 【原创】PHP 表格 分页 显示

    千次阅读 2017-04-20 13:39:34
    php limit 分页显示
  • SSM+Layui表格分页显示

    千次阅读 2021-06-11 08:15:38
    天气:阴天 心情:平常心 目前问题: 面 这是接着上一篇SSM+layui无分页数据显示的有分页数据的更新 主要功能展示图一: 临毕业, 找工作中
  • layui数据表格分页栏居中显示

    千次阅读 2020-04-10 11:18:53
    layui数据表格分页栏居中显示 .layui-table-page { text-align: center; }
  • 每页显示的序号都是一样的: <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange"> <el-table-column type="index" width="50"> </el-table-column> &...
  • 1.数据用表格显示 2.显示的数据要分页 3.分页里要有个‘显示所有’的功能 因为之前用的是elementUI,后端是flask+sqlalchemy,于是开始用elementUI写表格 第一步表格显示数据 ok,得到了表格数据,显示如下...
  • layui数据表格分页无法正常显示 应该先利用layui table中的parseData方法手动将数据切片分页,代码如下,要点是parseData: function(res){}中的方法,对从url中get到的数据进行手动分页处理。 layui.use('table', ...
  • antd:【2021-1-26】解决表格分页控件英文显示的问题--使用之表格与分页控件的使用: 官网描述: Table组件pagination属性描述:object为Pagination组件api的属性与值,按官网指示查看Pagination配置表格的...
  • datagrid表格显示分页及查询

    千次阅读 2020-06-28 20:23:38
    datagrid表格显示分页及查询具体代码总结: 具体代码 前言:根据我上一篇博客继续写的 实体类: package com.zhoujun.entity; import java.sql.Timestamp; public class Book { private long id; private String...
  • <div class="page"></div> <script src="static/script/jquery.js"></script> <script src="static/script/jquery.table.js"></script> ... $table.find('tbody tr').hide().slice...表格必须有tbody
  • 加入分页器后,表格数据无法显示。 排查后发现是,分页器中所引的js文件与框架自带的js文件有冲突,导致内容无法显示。 删除框架中没有调用到的js后页面正常显示。 具体哪个地方有冲突,并没有找出。
  • word中表格一页显示不完在下一页显示的表格自动添加表头 操作步骤: 只需一下3个步骤 选中表头 右键属性 选择行标签,勾选 “在各页顶端已标题行出现” 本文转自博客园zhyiwww的博客,原文链接:...
  • ,不是用的ListView,现在表格里面能显示100行数据出来,现在想在手机上面每个页面显示 10行数据,下面要有页码显示最好,求大神给我指点,本人实在太菜,下面是表格的布局文件,只定义了一行,在代码里面动态添加的,...
  • 先看一下图: 看到图中并没有展示分页的工具,layui给的实例 page:true就可以,但是写上了也不行 解决办法:找到你layui.css 里面有个 .layui-hide 属性 把这个注释掉就可以了 ...
  • Jquery EasyUI操作表格分页显示

    千次阅读 2013-11-08 16:53:52
    pagination:true, //分页控件 rownumbers:true, //行号 toolbar:[{ id:'btnadd', text:'添加', iconCls:'icon-add', handler:function(){ $('#btnsave').linkbutton('enable'); alert('这里是添加的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,574
精华内容 19,829
关键字:

表格不能分页显示