精华内容
下载资源
问答
  • 如何解决表格分页
    2022-05-09 16:13:19

    layUI 查询数据时:

            返回数据全部显示在第一页,分页不生效

            使用parseData可以解决~~!

            //渲染表格
            table.render({
                elem: '#formDialog'
                , title: '表单选择框'
                , url: url
                , toolbar: '#xx'
                , page: true //开启分页
                , limits: [5, 10, 15, 20, 50]
                , limit: '10'
                , parseData:function(res){
                    //解析分页数据
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    } else {
                        result = res.data.slice(0, this.limit);
                    }
    
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    }
                }
    
                , cols: [cols]
                , done:function(res){
                }
            });
    更多相关内容
  • 参考Layui数据表格文档可以看到三种layui表格渲染方式,项目选用第一种,采用Layui的异步数据接口方式,渲染表格分页。 按照官方写法,会报跨域错误,尝试几次,发现需要设置contentType。 //js layui.use(['...
  • 主要为大家详细介绍了基于Vue.js的表格分页组件使用方法,了解了Vue.js的特点,感兴趣的朋友可以参考一下
  • 在网页开发中, 常常需要一个表格与列表相结合的控件, 即能像表格(table)一样显示丰富的信息, 又能像列表选择控件(select)一样方便地选择数据. 在桌面应用程序开发中, 许多GUI库都提供了类似的控件, 如.Net的ListView...
  • 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox...
  • 【简单表格分页功能】前端用springboot写一个简单的表格分页功能并交互显示在网页上【详细注释,简易版本】 现在这个版本是在分页的基础上添加了模糊查询并分页的功能,也是前端表格的最常用基本功能了。 //这个功能...

    前文

    这个是延伸版本,重复的话就不写了。前端小伙伴不懂的可以去看我写的另一个帖子已经写了简单的分页功能并讲解了逻辑。然后再来看这个效果更好。
    【简单表格分页功能】前端用springboot写一个简单的表格分页功能并交互显示在网页上【详细注释,简易版本】

    现在这个版本是在分页的基础上添加了模糊查询并分页的功能,也是前端表格的最常用基本功能了。

    //这个功能的几个坑:
    //1,比如数据出来后,当我们翻页到第二页的时候,我们再调整页数从10条到20条就会出现查不到数据的情况,
    原因是你的页数传过来是2,从第二页开始查询20条,但是你的数据可能只有几条,根本第一页都没有塞满,
    所以自然也没有第二页
    //2,查询的时候:也是,正常数据出来了,我们翻到第二页后再输入值查询,这时候也会出现没有数据,原因也是
    你的页数传了2过去了,但是你查询的数据只有一页,所以显示的没有数据。
    
    //解决办法:很简单前端配合一下
    //坑1:直接前端在调用该页数的方法时先把当前页改为1就可以了,这样只要改变页数发请求就会发当前页为1,
    从第一页开始查找。
    //坑2:也一样,让前端点击查询按钮的时候把当前页设为1就行了,点其他的时候不变还是老样子。
    

    效果图

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    直接上代码

    HistoryRecord(数据库对应字段的实体类)

    package com.example.demo.entity;
    //历史记录表
    
    import lombok.Data;
    
    @Data
    
    public class HistoryRecord {
        private int id;
        private String suject;
        private String time;
        private String name;
        private int content;
        private int video;
        private int knowledge;
        private int simulation;
        private int exam;
    
        public HistoryRecord() {
        }
    
        public HistoryRecord(Integer id, String suject, String time, String name, Integer content, Integer video, Integer knowledge, Integer simulation, Integer exam) {
            this.id = id;
            this.suject = suject;
            this.time = time;
            this.name = name;
            this.content = content;
            this.video = video;
            this.knowledge = knowledge;
            this.simulation = simulation;
            this.exam = exam;
        }
    
        public Integer getId() {
            return id;
        }
    
        public void setId(Integer id) {
            this.id = id;
        }
    
        public String getSuject() {
            return suject;
        }
    
        public void setSuject(String suject) {
            this.suject = suject;
        }
    
        public String getTime() {
            return time;
        }
    
        public void setTime(String time) {
            this.time = time;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public Integer getContent() {
            return content;
        }
    
        public void setContent(Integer content) {
            this.content = content;
        }
    
        public Integer getVideo() {
            return video;
        }
    
        public void setVideo(Integer video) {
            this.video = video;
        }
    
        public Integer getKnowledge() {
            return knowledge;
        }
    
        public void setKnowledge(Integer knowledge) {
            this.knowledge = knowledge;
        }
    
        public Integer getSimulation() {
            return simulation;
        }
    
        public void setSimulation(Integer simulation) {
            this.simulation = simulation;
        }
    
        public Integer getExam() {
            return exam;
        }
    
        public void setExam(Integer exam) {
            this.exam = exam;
        }
    }
    
    

    HistoryRecordList(传给前端的实体类,用来把各个数据凑到一个对象内发送给前端)

    package com.example.demo.entity;
    
    import lombok.Data;
    
    import java.util.List;
    @Data
    //传给前端的分页实体类
    public class HistoryRecordList {
        //总条数
        private int total;
        //表格数据
        private List list;
        //当前页
        private int currentPage;
        //每页数
        private int pageSize;
    
        public HistoryRecordList() {
        }
    
        public HistoryRecordList(int total, List list, int currentPage, int pageSize) {
            this.total = total;
            this.list = list;
            this.currentPage = currentPage;
            this.pageSize = pageSize;
        }
    
        public int getTotal() {
            return total;
        }
    
        public void setTotal(int total) {
            this.total = total;
        }
    
        public List getList() {
            return list;
        }
    
        public void setList(List list) {
            this.list = list;
        }
    
        public int getCurrentPage() {
            return currentPage;
        }
    
        public void setCurrentPage(int currentPage) {
            this.currentPage = currentPage;
        }
    
        public int getPageSize() {
            return pageSize;
        }
    
        public void setPageSize(int pageSize) {
            this.pageSize = pageSize;
        }
    }
    
    

    HistoryRecordMapper(后端对接数据库操作的接口文件)

    package com.example.demo.mapper;
    
    import com.example.demo.entity.HistoryRecord;
    
    import com.example.demo.entity.HistoryRecordList;
    import org.apache.ibatis.annotations.Param;
    import org.apache.ibatis.annotations.Select;
    
    import java.util.List;
    
    
    public interface HistoryRecordMapper {
        //搜索数据库分页对应数据,搜索数据库模糊查询(这里参数要这么写:like concat('%',#{searchValue},'%'))
        //这句sql问的意思:查询条件为suject字段中前后包含有searchValue内字符的数据,并且分页查询返回对应数据。
        @Select("select * from history_record where suject like concat('%',#{searchValue},'%') limit #{currentPage},#{pageSize}")
        List<HistoryRecord> HistoryRecordAll(@Param("currentPage") int currentPage, @Param("pageSize") int pageSize,@Param("searchValue") String searchValue);
    
        //搜索数据库数据总条数
        @Select("SELECT count(*) FROM history_record")
        int HistoryRecordIndex();
    
        //搜索数据库数据条件筛选后的总条数
        @Select("select count(*) from history_record where suject like concat('%',#{searchValue},'%')")
        int HistoryRecordSearchIndex(@Param("searchValue") String searchValue);
    }
    
    

    HistoryRecordController(后端给前端写的接口的文件,给前端调用的接口就在这里,那个 /HistoryRecord/select 就是前端要调用的接口地址)

    package com.example.demo.controller;
    import com.example.demo.entity.HistoryRecord;
    import com.example.demo.entity.HistoryRecordList;
    import com.example.demo.mapper.HistoryRecordMapper;
    import org.springframework.web.bind.annotation.*;
    import javax.annotation.Resource;
    import java.util.List;
    
    @RestController
    @RequestMapping("/HistoryRecord")
    public class HistoryRecordController {
        @Resource
        HistoryRecordMapper HistoryRecordMapper;
    
        @CrossOrigin(origins = "*", maxAge = 3600)
        @GetMapping("/select")
        //前端get请求发进来两个参数,分别为,当前页currentPage,每页数pageSize
        public HistoryRecordList findHistoryRecord(@RequestParam("currentPage") int currentPage, @RequestParam("pageSize") int pageSize, @RequestParam("searchValue") String searchValue) {
            if (searchValue == "") {
                //判断:如果searchValue内为空,代表输入框没有输入值,那就正常查询所有表格数据返回
    
                //当前页
                int cuIndex = (currentPage - 1) * pageSize;
                //调用数据库的方法返回的表格数据用数组保存
                List list = HistoryRecordMapper.HistoryRecordAll(cuIndex, pageSize, searchValue);
                //存下当前页
                int currentPageIndex = currentPage;
                //存下每页数
                int pageSizeIndex = pageSize;
                //调用数据库表格总数方法返回的值存下来
                int totalIndex = HistoryRecordMapper.HistoryRecordIndex();
                //new出要返回给前端的对象,不new出对象无法往里面赋值
                HistoryRecordList historyRecordList = new HistoryRecordList();
                //往对象内list添加表格数据
                historyRecordList.setList(list);
                //把当前页赋值进去
                historyRecordList.setCurrentPage(currentPageIndex);
                //把每页数赋值进去
                historyRecordList.setPageSize(pageSizeIndex);
                //把总数赋值进去
                historyRecordList.setTotal(totalIndex);
                //对象的数据上面赋值都拿到了,返回整个对象给前端
                return historyRecordList;
            } else {
                //在搜索框输入了值就走这边。
    
                //当前页
                int cuIndex = (currentPage - 1) * pageSize;
                //调用数据库的方法返回的表格数据用数组保存
                List list = HistoryRecordMapper.HistoryRecordAll(cuIndex, pageSize, searchValue);
                //存下当前页
                int currentPageIndex = currentPage;
                //存下每页数
                int pageSizeIndex = pageSize;
                //调用数据库表格总数方法返回的值存下来,这里专门调用的查询对应条件的总数方法
                int totalIndex = HistoryRecordMapper.HistoryRecordSearchIndex(searchValue);
                //new出要返回给前端的对象,不new出对象无法往里面赋值
                HistoryRecordList historyRecordList = new HistoryRecordList();
                //往对象内list添加表格数据
                historyRecordList.setList(list);
                //把当前页赋值进去
                historyRecordList.setCurrentPage(currentPageIndex);
                //把每页数赋值进去
                historyRecordList.setPageSize(pageSizeIndex);
                //把总数赋值进去
                historyRecordList.setTotal(totalIndex);
                //对象的数据上面赋值都拿到了,返回整个对象给前端
                return historyRecordList;
            }
        }
    }
    
    

    前端代码(我这都是写给前端看的,这个就不解释了。肯定看得懂吧。)

    <template>
      <div class="release_wrap">
        <div class="release_title">个 人 信 息</div>
        <el-card class="release_card">
          <el-button
            type="primary"
            round
            icon="el-icon-arrow-left"
            style="margin-bottom: 40px"
            @click="jump_home"
            >返回</el-button
          >
          <div>
            <el-input
              placeholder="请输入查询内容"
              v-model="input"
              clearable
              style="width: 300px"
            >
            </el-input>
            <el-button type="primary" style="margin-left: 20px" @click="getDataList1"
              >查询</el-button
            >
            <el-tag type="success" style="margin-left: 540px">{{
              "已通过: " + exam_total
            }}</el-tag>
            <el-tag type="danger" style="margin-left: 20px">{{
              "未通过: " + nopass_total
            }}</el-tag>
            <el-tag type="info" style="margin-left: 20px">{{
              "科目总数: " + tableData.length + "/" + 188
            }}</el-tag>
          </div>
          <el-table :data="tableData" style="width: 100%" max-height="600">
            <el-table-column
              prop="suject"
              label="科目"
              width="380"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="time" label="学习时间" width="280">
            </el-table-column>
            <el-table-column prop="name" label="人员"> </el-table-column>
            <el-table-column label="业务内容">
              <template slot-scope="scope">
                <el-button type="success" size="small" v-if="scope.row.content == 1"
                  >已学习</el-button
                >
                <el-button size="small" type="primary" v-else>未学习</el-button>
              </template>
            </el-table-column>
            <el-table-column label="业务视频">
              <template slot-scope="scope">
                <el-button type="success" size="small" v-if="scope.row.video == 1"
                  >已学习</el-button
                >
                <el-button size="small" type="primary" v-else>未学习</el-button>
              </template>
            </el-table-column>
            <el-table-column label="知识点">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="small"
                  v-if="scope.row.knowledge == 1"
                  >已学习</el-button
                >
                <el-button size="small" type="primary" v-else>未学习</el-button>
              </template>
            </el-table-column>
            <el-table-column label="模拟训练">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="small"
                  v-if="scope.row.simulation == 1"
                  >已学习</el-button
                >
                <el-button size="small" type="primary" v-else>未学习</el-button>
              </template>
            </el-table-column>
            <el-table-column label="业务考试">
              <template slot-scope="scope">
                <el-button type="success" size="small" v-if="scope.row.exam == 1"
                  >已通过</el-button
                >
                <el-button size="small" type="danger" v-else>未通过</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-top: 15px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next"
            :total="totalindex"
          >
          </el-pagination>
        </el-card>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          //表格数据
          tableData: [],
          //查询的输入框
          input: "",
          //当前页码
          currentPage: 1,
          //每页数
          pagesize: 10,
          //总数
          totalindex: 0,
        };
      },
      computed: {
        exam_total() {
          let a = this.tableData.filter(function (x, y) {
            return x.exam == 1;
          }).length;
          return a;
        },
        pass_total() {
          let b = this.tableData.filter(function (x, y) {
            return x.state == 2;
          }).length;
          return b;
        },
        nopass_total() {
          let c = this.tableData.filter(function (x, y) {
            return x.exam == 0;
          }).length;
          return c;
        },
      },
      created() {
        this.getDataList();
      },
      methods: {
        //页数
        handleSizeChange(val) {
          this.pagesize = val;
          this.currentPage=1;
          this.getDataList();
          console.log(`每页 ${val}`);
        },
        //当前页
        handleCurrentChange(val) {
          this.currentPage = val;
          this.getDataList();
          console.log(`当前页: ${val}`);
        },
        //提交按钮
        onSubmit() {
          console.log(this.dynamicTags, "dynamicTags");
        },
        //返回首页
        jump_home() {
          this.$router.push("/");
        },
        //已学习·
        jump_material(row) {
          console.log(row);
        },
        //获取表格数据
        getDataList() {
          this.$axios
            .get("/HistoryRecord/select", {
              currentPage: this.currentPage,
              pageSize: this.pagesize,
              searchValue: this.input,
            })
            .then((res) => {
              this.tableData = res.list;
              this.totalindex = res.total;
              console.log(res);
            });
        },
            getDataList1() {
          this.$axios
            .get("/HistoryRecord/select", {
              currentPage: 1,
              pageSize: this.pagesize,
              searchValue: this.input,
            })
            .then((res) => {
              this.tableData = res.list;
              this.totalindex = res.total;
              console.log(res);
            });
        }
      },
    };
    </script>
    
    <style  scoped lang='scss'>
    .release_wrap {
      background-image: url("../assets/home1.jpg");
      width: 100%;
      height: 100%;
      position: relative;
    }
    //卡片效果
    .release_card {
      width: 70%;
      position: absolute;
      top: 200px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
        0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
        0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
      transition: 0.5s ease; //改变大小
      &:hover {
        box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157),
          0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28),
          0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
      }
    }
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
    // title效果
    .release_title {
      text-align: center;
      font-size: 38px;
      font-weight: bold;
      position: absolute;
      top: 75px;
      left: 50%;
      transform: translateX(-50%);
      font-family: Lato, sans-serif; //字体
      letter-spacing: 4px; //字符间距空白
      text-transform: uppercase; //转换文本,控制大小写
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(255, 255, 255, 1) 50%,
        rgba(0, 0, 0, 1) 100%
      );
      background-size: 80%; //背景大小
      background-repeat: no-repeat; //背景平铺不重复
      // below two lines create text gradient effect
      color: rgba(237, 227, 231, 0.7); //颜色透明
      background-clip: text; //规定背景的绘制区域在文字上
      animation: shining 3s linear infinite;
    }
    @keyframes shining {
      from {
        background-position: -500%; //背景图像的起始位置
      }
      to {
        background-position: 500%; //背景图像的结束位置
      }
    }
    </style>
    
    展开全文
  • 主要介绍了BootStrap Table 分页后重新搜索问题的解决办法,自定义搜索且有分页功能,比如搜索产品名的功能。小编给大家带来了关键代码,非常不错,需要的朋友可以参考下
  • Web分页打印 细线表格+分页打印之终极攻略发布时间:2009-03-01 23:46:40 作者:佚名 我要评论最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面的内容,因为头部有背景和打印按钮,而...

    Web分页打印 细线表格+分页打印之终极攻略

    发布时间:2009-03-01 23:46:40   作者:佚名   text-message.png 我要评论

    最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面的内容,因为头部有背景和打印按钮,而

    最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面的内容,因为头部有背景和打印按钮,而且要细线表格的那种,我想细线表格不是很简单吗

    如果你还不知道细线表格怎么做,请看下面的代码实现效果:)

    国家级市级
    人民日报解放日报新民晚报

    然后把IE的设置为可以打印背景,本以为可以大功告成了

    结果打印一预览,头部一个大黑块,为什么呢,因为我头部里面的有一个背景,结果占用页面!

    .gTitle

    {

    width:100%;

    height:32px;

    line-height:32px;

    background-image:url(images/gtitle.gif);

    padding-left:130px;

    margin-bottom:10px;

    }

    开始郁闷啦,在网上搜了半天都没有一个完美的解决方案,决定自己搞定。

    自己琢磨了半天,终于搞定:)

    Css定义如下:

    noneprint: 打印时隐藏的样式定义

    tabPrint: 要打印的细线表格样式定义

    nextPate: 分页的样式定义

    linetd: 呵呵,此处最关键,让你的表格打印时完美无缺

    复制代码代码如下:

    @media print {

    .noneprint{display:none;}

    }

    .tabPrint td

    {

    border-left:#000000 solid 1px;

    border-top:#000000 solid 1px;

    height:21px;

    }

    table.tabPrint

    {

    border-right:#000000 solid 1px;

    border-bottom:#000000 solid 1px;

    }

    .nextPage

    {

    page-break-after:always;

    }

    .linetd

    {

    border-bottom:solid 1px #000;

    }

    页面HTML如下:

    记得在thead加上style="display:table-header-group;font-weight:bold",这样每个页面才会有都表头哟

    >> 首页>> 门户>>信息管理
    标题:所属街道:

    -请选择状态-

    录入日期:--

    ID="Table2">

    所属街道标题录入日期国家级市级人民日报解放日报新民晚报

    浦东新区浦三街道测试02-24-2009√√√浦东新区浦三街道sseref02-24-2009 浦东新区浦三街道sseref02-24-2009 第1页浦东新区浦三街道sdsedjiik02-24-2009 浦东新区浦三街道sdsedjiik02-24-2009 浦东新区浦三街道sdsedjiik02-24-2009 浦东新区浦三街道sdsedjiik02-24-2009 浦东新区浦三街道sdsedjiik02-24-2009

    呵呵,标记为红色的地方你可要看仔细哟,完不完美全靠它!

    相关文章

    e40efe845a0f664ad2a2f614e7bd4206.png

    这篇文章主要介绍了html父子页面iframe双向发消息的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来2020-10-12

    02428f9a3a53c0dbc61aa524e045f3b8.png

    这篇文章主要介绍了如何在HTML里加载摄像头,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-29

    这篇文章主要介绍了html-webpack-plugin使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-15

    fb53b03c06d6b99c2470ba5621627936.png

    这篇文章主要介绍了html直接引用vue和element-ui的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-02

    11c12187b7f88a98f8e187034751e1ae.png

    这篇文章主要介绍了详解HTML中字体使用line-height依然不能垂直居中解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友2020-08-20

    7b55d6d8d4513e2aec57044733efc6d9.png

    这篇文章主要介绍了前端html换肤功能的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-20

    fbf8fd9af4fb0a5f134d10cbbaabdac2.png

    这篇文章主要介绍了多个HTML页面共同调用一段html代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来2020-08-17

    这篇文章主要介绍了HTML中图片不存在显示默认图片的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来2020-08-17

    47e8b754abb2e662eb86e189d77d507f.png

    这篇文章主要介绍了HTML table行距的改变方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学2020-07-31

    这篇文章主要介绍了HTML Table 空白单元格补全的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一2020-07-31

    最新评论

    展开全文
  • 下面是我在学习ajax的过程中,实现的一个解决方案,不知道设计得怎么样,所以想发出来给大家参考下,恳请给予建议和指导,狗狗感激不尽!需求概述:需要将二维数据通过表格展现给客户端,用户可以事先选择每页显示的...
  • 项目场景:Thinkphp+layui数据表格实现表格分页 提示:thinkphp+layui数据表格分页,需要服务器端配合。之前在百度上一通乱搜也没找到解决方案。 问题描述 提示:这里描述项目中遇到的问题: 之前一看layui的文档一...

    项目场景:Thinkphp+layui数据表格实现表格分页

    提示:thinkphp+layui数据表格分页,需要服务器端配合。之前在百度上一通乱搜也没找到解决方案。
    在这里插入图片描述

    问题描述

    提示:这里描述项目中遇到的问题:

    之前一看layui的文档一只以为在page里面设置参数就可以,其中limit的值是每页显示多少条,limits是的值是下拉框选择每页显示条数,例如显示20 50 100等等。经过反复设置,表格依然是读取了所有数据。

         ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            ,limit:20 //一页显示多少条
            ,limits:[20,50,100]//每页条数的选择项
            ,groups: 5 //只显示 2 个连续页码
            ,first: "首页" //不显示首页
            ,last: "尾页" //不显示尾页
          }
    

    解决方案:

    提示:在后台分页,利用 parseData 回调函数读取数据

    在后台分页后,发现layui不能正确读取数据,获得的数据如下:

    后端分页代码

    	public function pgdata()
    	{
    		$database = new pingguModel();
    		$data = $database->paginate(10);//Thinkphp分页函数,每页10条数据
    		$count = count($data);
    		$list["msg"] = "";
    		$list["code"] = 0;
    		$list["count"] = $count;
    		$list["data"] = $data;
    		return json($list);//返回json
    	}
    

    json数据

    {"msg":"","code":0,"count":10,"data":{"total":401,"per_page":10,"current_page":1,"last_page":41,"data":
    [{"id":1,"run_id":8130,"run_name":"详细信息显示项目-","begin_user":"181","begin_time":"2019-09-18 
    10:49:18","flow_auto_num":0,"flow_auto_num_year":0,"flow_auto_num_month":0,"data_m6969":"《2019年
    详细信息显示项目-","data_m6970":"","data_m6971":"","data_m6972":"崔晶红,","data_m6974":"ZX-2019-
    FP-ZC-027","data_m6975":"","data_m6977":"","data_m6978":null,"data_m6979":"详细信息显示项目-
    ",,"data_m6982":"","data_m6983":"已登
    记","data_m6984":"曹艺伦","data_m6985":"合同","data_m6986":"ZX-2019-FP-ZC-
    
    

    阅读数据后发现,返回的是个多维数组,layui表格中的data参数对应的键值就不对了,所以获取不到数据。于是调整如下:
    后端分页代码无需调整
    调整layui的js部分,增加如下代码,读取多维数组数据,回头刷新吧,分页了。

          ,parseData: function(res) { //res 即为原始返回的数据
            return {
              "code": res.code, //解析接口状态
              "msg": res.message, //解析提示文本
              "count": res.data.total, //解析数据长度
              "data": res.data.data //解析数据列表
            }
    
    展开全文
  • layui表格分页不生效(无法正常显示)怎么解决?下面本篇文章给大家介绍一下layui数据表格分页无法正常显示的解决方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。应该先利用layui table中的...
  • 先看一下图: 看到图中并没有展示分页的工具,layui给的实例 page:true就可以,但是写上了也不行 解决办法:找到你layui.css 里面有个 .layui-hide 属性 把这个注释掉就可以了 ...
  • asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用...
  • element-table表格分页多选

    千次阅读 2022-02-15 17:23:26
    element table 分页多选问题
  • layui数据表格自带分页失效
  • 今天小编就为大家分享一篇解决vue 表格table列求和的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • wkhtmltopdf生成PDF分页文字展示错乱,需要加上css样式:page-break-inside: avoid !important; 避免在div元素中分页 <div style="page-break-inside: avoid !important;"></div> 避免在table元素中...
  • elementui表格多选加分页,获取选择的数据解决
  • 使用element-ui实现表格分页

    万次阅读 多人点赞 2020-01-20 19:10:42
    由于项目需要,我使用到了element-ui,当需要使用到表格分页功能的时候,就遇到了一些问题,但通过努力还是解决了,接下来就让我讲一下我对于element-ui中的分页功能的了解(因为这次讲的是表格的分页,所以接下来的...
  • 关于react的antd表格分页的问题

    千次阅读 2021-04-15 14:37:40
    最近用react的框架做了一个表格比较多的数据库,里面涉及到了以一些分页的问题,目前我还是一个前端的小白。... 下面是表格分页的代码。rowKey="id"rowSelection={rowSelection}columns={character}dataSour...
  • Vue + Element UI 表格分页记忆选中

    万次阅读 2021-12-13 23:05:22
    官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但...
  • js解决表格再打印时,分页的时候,边框线丢失的问题
  • PHP+Ajax+bootstrap+dataTables无刷新分页表格插件
  • 查阅资料,花几天时间整理的,支持新增行、单行编辑保存、展开、分页国际化;子表格增加、编辑、删除、保存。解决多个问题(包含组件,不包含store)
  • element-ui table表格中,序号列,进行分页,如翻到第二页序号仍然从1开始,并没有递增。 <el-table-column label="序号" type="index" width="120" /> 解决办法: <el-table-column label="序号...
  • 下面是需要打印的表格: 当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出来在纸上会有空白,不太好。中间内容是不确定的可能几十条,可能上百条,这样循环在界面上展示是没有问题的,但是当使用...
  • 由于之前自己做过jquery分页,就是调用jni接口时,只能用前台分页解决显示问题。最近看到有人提这样的问题:一个请求传过来上万个数据怎么办?于是萌生了写这篇博客的想法。 效果展示: 因为核心代码主要在前端...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,803
精华内容 11,921
关键字:

如何解决表格分页