正文 

当前位置： 首页 > java > java框架

使用bootstarp前端组件集成的table分页组件；简单上手使用实现前端分页功能

小智RE0      2022-02-16     685

关键词：

文章目录

注意这是前端分页实现哦,
在后端会一次性把数据取过来的,慎用啊😁

上次用的那个后端分页PageHelper,虽然说也是比较方便的;
----> 前后端分离学习笔记(4) —[路由嵌套, 查询表单显示]

这次练习的话,也是打算整体试试BootStarp前端框架;上手简单,且比较使用于融入到HTML页面中;
分页的话就用在前端页面分页了,也就是说会一次性把数据查询过来;前端分页即可;
需要注意的是: 如果你的数据量特多大的情况下,就别用这种前端分页的方式了,比较影响使用的效率,比如你好几万条数据一下子加载过来,一般的服务器它可能就扛不住啊.

1. 下载bootstarp

当然,首先的下载css,js配置文件;为了方便 我这次都是用了下载的离线文件;
bootStarp3版本
这次我用的还是比较经典的3版本;

建议将dist文件下这几个都放入项目;

2. 下载使用 bootstrap-table

当然还需要下载,bootstrap-table组件的离线配置文件;
我在这下载的 --> bootstrap-table组件

解压后主要用dist下的文件;

放入到项目中即可; 我这次直接把解压文件全放进去了;(没啥影响,就是大部分文件用不到);

推荐看看BootstrapTable参数;

可以看看这个地址的—>BootstrapTable参数;
自动翻译的词语,有的可能不太好理解;

或者网上找资料看看;

这位大佬写的API参数也是很实用的,对于 BootstrapTable使用的过程中,可查看参数的使用;
博文地址:
BootstrapTable参数、属性、事件列表

3.部分代码

页面安排的话;具体引用这些;其他的是我这个小demo中对于页面的修饰文件;或者弹框优化组件;
和分页这几个没关系;
等等.jquery.min.js 是必须要用的;不然bootstrap.min.js用不了

然后我这个页面,代码就放这里了;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>管理员管理</title>
    <!--部署CSS-->
    <link rel="stylesheet" type="text/css" href="../../css/back/style.css">
    <link rel="stylesheet" type="text/css" href="../../css/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/sweetalert.min.css">
    <link rel="stylesheet" type="text/css" href="../../js/bootstrap-table-master/dist/bootstrap-table.min.css">

    <!--部署JS-->
    <script src="../../js/jquery.min.js" type="text/javascript"></script>
    <script src="../../css/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../js/common/alertCommonUtil.js" type="text/javascript"></script>
    <script src="../../js/common/sweetalert.min.js" type="text/javascript"></script>
    <script src="../../js/bootstrap-table-master/dist/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="../../js/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //加载页面后就显示信息;
        $(function () 
            var account = sessionStorage.getItem("account");
            //简易验证是否登录;
            if (account == null) 
                swal(title: "您还没有登录");
                window.parent.location.replace("login.html");
                return;
            

            //前端分页;
            $('#mytab').bootstrapTable(
                method: 'post',
                url: "../../backAdmin/getAllAdmin",//请求路径
                contentType: "application/x-www-form-urlencoded",
                striped: true, //是否显示行间隔色
                pageNumber: 1, //初始化加载第一页
                pagination: true,//是否分页
                sidePagination: 'client',//client：前端分页
                pageSize: 5,//单页记录数
                pageList: [5, 10, 20, 30],//可选择单页记录数
                //showRefresh: true,//刷新按钮
                queryParams: function () 
                    //向服务器传递的参数,这里仅需查询条件;
                    return 
                        account: $('#search_name').val(),
                        sex: $('#search_tel').val()
                    ;
                ,
                //数组类型;
                dataType:'json',
                //响应的数据信息;
                responseHandler(res)
                    //这部分的code ;msg,data是在后端响应时封装的属性信息;
                    console.log(res);
                    if(res === "521")
                        //拦截到异常登录;
                        swal(title: "异常登录警告", type: "warning");
                        window.sessionStorage.removeItem("account");
                        window.sessionStorage.removeItem("aId");
                        window.sessionStorage.removeItem("adminType");
                        window.sessionStorage.removeItem("newFileName");
                        window.parent.location.replace("login.html");
                    else if(res.code === 203 ||res.code === 500)
                        swal(title: res.msg, type: "warning");
                        return  "rows": [] ;
                    else if(res.code === 200)
                        //为参数赋值;
                        return  "rows": res.data 
                    
                ,
                //表单;
                columns: [
                    
                        title: '序号',
                        field: '',
                        formatter: function (value, row, index) 
                            return index + 1;
                        
                    ,
                    
                        title: '账户',
                        field: 'account',
                        sortable: true
                    , 
                        title: '头像',
                        field: 'newFileName',
                        formatter: operAdv,//格式化头像;
                    , 
                        title: '性别',
                        field: 'sex',
                    , 
                        title: '年龄',
                        field: 'age',
                    , 
                        title: '手机',
                        field: 'phone',
                    ,
                    
                        title: '操作时间',
                        field: 'operTime',
                        formatter: operTimes,//格式化时间;
                    ,
                    
                        title: '隶属角色',
                        field: 'roleList',
                        formatter: operRole,//格式化角色;
                    ,
                     
                        title: '操作',
                        field: 'id',
                        formatter: operation,//拼接按钮;
                    ]
            )

            //头像格式化;
            function operAdv(value,row) 
                var userImgLink = "";
                if(row.newFileName != null)
                    userImgLink = "http://localhost:8848/pictures/adminAdv/" + row.account + "/" + row.newFileName;
                else
                    userImgLink = "http://localhost:8848/pictures/default/admin/defaultadmin.png";
                
                return "<img src='" + userImgLink + "' style='width: 40px;height: 40px;border-radius: 20px;/>'";
            

            //格式化时间;
            function operTimes(value,row)
               return new Date(row.operTime).toLocaleString();
            

            //角色格式化;
            function operRole(value,row)
                var arr = row.roleList;
                //拼接;
                var str="";
                for (var i = 0; i < arr.length; i++) 
                    str += arr[i].roleName + " ";
                
                return str;
            

            //操作按钮;
            value代表该列的值，row代表当前对象
            function operation(value,row,index) 
                var htm = "<button type=\"button\" class=\"btn btn-warning\" style='width: 50px;' οnclick='toUpdateAdmin("+row.id+")'>编辑</button>" ;
                htm+="&nbsp;&nbsp;"
                htm+="<button   type=\"button\" class=\"btn btn-danger\"  style='width: 50px;' οnclick='toDelete("+row.id+")'>删除</button>"
                return htm;
            

            //查询按钮事件;这里会刷新;
            $('#search_btn').click(function () 
                $('#mytab').bootstrapTable('refresh', 
                    url: '../../backAdmin/getAllAdmin'
                );
            )
        );




        function toAdd() 
            //跳转到新增页面;
            location.assign("addadmin.html");
        

        //修改;
        function toUpdateAdmin(aId) 
            //修改时携带参数;
            location.assign("updateadmin.html?aId=" + aId);
        

        //删除管理员;
        function toDelete(id) 

        
    </script>

</head>


<body>
<div>
    <div>
        <button type="button" class="btn btn-success" onclick="toAdd()">新增管理员</button>
    </div>
    <!--数据列表 -->
    <div class="panel panel-default">
        <div class="panel-heading">

        </div>
        <div class="panel-body form-group" style="margin-bottom:0px;">
            <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">账户名：</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="account" id="search_name"/>
            </div>
            <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">性别：</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="sex" id="search_tel"/>
            </div>
            <div class="col-sm-1 col-sm-offset-4">
                <button class="btn btn-primary" id="search_btn">查询</button>
            </div>
        </div>
    </div>
    <table id="mytab" class="table table-hover"></table>
</div>
</body>
</html>

具体说说;

这里的话,就一个简单的客户端session验证,

分页的JS部分;


格式化的部分

后端的话,没啥说的;这里一次性就把数据全部查询了;

mapper文件的sql

4.具体效果

具体使用效果;毕竟不是学习前端开发的;样式肯能不是很好看

加载数据时的情景;

查询到信息时

查询不到数据时;

当数据量不足时,不会显示分页

bootstarp(代码片段)

什么是Bootstrap？bootstrap是一个最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。通俗的讲，bootstrap就是预先定义好了一套优美的CSS样式和一套组件，前端开发者可以直接拿来使用，加速开发效率，并且... 查看详情

vue+element-ui前端项目一table表格并实现分页2

阅读目录效果展示0安装axios1引入tableVue组件main.js2网页布局底部信息栏一直展示页面底部App.vue3导航组件添加Table表格导航NavMenu.vue4element-ui表格组件并实现分页tableVue.vue4.1第一步：根据每页要显示的条数来设置，关联分页代码的... 查看详情

elementui中使用table组件实现分页记忆选中

我们再用vue和element-ui，或者其他的表格的时候，可能需要能记忆翻页勾选，那么实现以下几个方法就ok了首先定义个data值data(){return{multipleSelectionAll:[],//所有选中的数据包含跨页数据　　idKey:‘personId‘//标识列表数据中每一行的... 查看详情

elementui表格（table）组件中前端实现数据分页和模糊查询(代码片段)

前端后台管理会存在很多表格,表格数据过多就需要分页，前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索。1.效果展示2.完整代码<template><div&... 查看详情

antd table 的分页道具

...dtable【发布时间】：2018-08-1819:21:22【问题描述】：我正在使用来自antd库的Table组件。我想将分页道具传递给Table组件。在文档中，它说传递指向Pagination组件本身的分页配置对象。所以我使用分页组件道具名称作为键传递分页对象... 查看详情

vue+element-ui前端项目一table表格并实现分页+搜索3

...:\\pdf1\\cg\\src\\components\\tableVue.vue修复bug当数据量过多时，使用分页请求数据,设置分页的页数自动回到第一页E:\\pdf1\\cg\\src\\components\\ 查看详情

带你快速了解微前端的拆分和集成(代码片段)

...？如何制作Web组件？与Web组件的运行时集成示例使用哪种集成方法？用户界面组件库微前端之间的通信结论近年来，微服务大受欢迎。越来越多的组织开始使用这种类型的架构来避免 查看详情

springboot系列springboot整合pagehelper分页组件以及前端js分页插件(代码片段)

七、SpringBoot整合pageHelper分页组件以及前端js分页插件1、PageHelper简介2、PageHelper支持物理分页的数据库3、SpringBoot集成PageHelper4、配置datasource和thymeleaf5、选用SystemUserinfo和SystemRole数据库表6、[mybatis逆向工程](https://blog.csdn.net/qq_5259 查看详情

react+ts+hook封装一个table分页组件(建议收藏,直接使用)

...格的api<><Table<User>columns=columnsdataSource=data/>/*使用JSX风格的API*/<Table<User>dataSource=data><Table.Column<User>key="name"title="Name"dataIndex="name"/></Table></>模拟jsx的api结构<Cardstyle=marginTop:24px><Table<an... 查看详情

前端基础bootstrap

...的jQuery的插件5）支持html5及css36）支持less动态样式 2.bootstarp的结 查看详情

vue分页组件table-pagebar(代码片段)

...底部分页开发完成，相关参数增加自定义功能。　　最终使用展现效果图如下，数据来源于cnodejs【https://cnodejs.org/】　　底部分页组件主要由左侧当前数据项数量显示和右侧分页页码两部分组成。组件代码如下：<templatexmlns:v-o... 查看详情

第17章—前端分页（bootstrap-table）

...g/springboot 　　本篇重点介绍bootstrap-table，一款很棒的前端框架，需要bootstrap支持，可以用于数据的展示，后端没有实现数据分页，只是前端将所接收的数据进 查看详情

基于element-ui实现的同步分页(代码片段)

在后台管理系统中，经常会用到表格的展示。使用vue+element-UI进行后台页面开发时，自己目前常用的数据展示方法是使用element-UI中的el-table和el-pagination两个组件进行实现。大多数情况下由于数据比较多，底部的分页往往是异步的... 查看详情

layui分页处理--乐字节前端

...ntcolor="red">模块加载名称：laypage</font>​laypage的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。通过核心方法：laypage.render(options)来设置基础参数。当分页被切换时触发... 查看详情

drf的分页组件，过滤组件(代码片段)

目录一、DRF中的分页组件1.分页组件的使用二、DRF的过滤组件1.搜索过滤组件的使用2.排序过滤组件的使用3.自定义过滤类三、过滤组件之分类与区间1.分类与区间的使用四、VUE前端播放器组件一、DRF中的分页组件DRF自带的分页组... 查看详情

element-ui中table组件-高度做适配

参考技术A使用element-ui中table组件与Pagination分页组件时,由于分页可设置页面展示条数，那么表格的高度（max-height）为多少合适呢？表头固定在页面上，不会随着页面纵向滚动条的改变而改变？传送门（codepen）:https://codepen.io/enjoy... 查看详情

bootstarp分页

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-s 查看详情

bootstrap-table前台和后台分页对json格式的要求

...rap是一款前端非常流行的框架，其中的表格更为大家经常使用。大家都知道表格的分页分为前台和后台分页，也就是表格配置中sidePagination属性，当sidePagination:"server"时表示后台分页，sidePagination:"client"为前台分页。前台分页主要... 查看详情