bootStrap

2023-04-23 07:10| 来源: 网络整理| 查看: 265

首页 > 开发

bootStrap-table服务器端后台分页及自定义搜索框的实现的使用 Posted on 12/31/2022 | by liu web前端|Bootstrap教程 bootstrap,table web前端-Bootstrap教程简洁的淘宝客源码,vscode js打包,ubuntu 学习c语言,jaxws tomcat,sqlite long值,四川电信服务器租用托管,js 图片组合插件,前端框架搭建视频,nginx 限制爬虫,php镜头,上海seo建站公司,cf刷枪网站源码大全,网页星星代码,产品特色模板,公众号页面适应手机端,自由策划企业网站管理系统商业版,telnet客户端程序lzw　　关于分页，之前一直纯手写js代码来实现，最近又需要用到分页，找了好多最终确定bootstrap-table，正好前端页面用的是bootstrap。下面就为大家介绍一下bootstrap-table如何实现分页及自定义搜索框。flv封装源码,ipados 安装vscode,ubuntu笔记软件,单台tomcat最大并发量,sqlite image,橙色网页设计欣赏,数据库按条件插入语句,美国服务器哪家好,无限分类插件jquery,新浪微博前端框架,爬虫知识,php array,seo服务价格,springboot对接接口,为图片加标签,响应式自适应网站模板,手机端web网页开发框架,产品网站免费模板下载地址,zblog后台地址,jquery 页面滑动,swing 学生管理系统,ga matlab程序lzw推荐教学：bootstrap教学仿吾爱破解源码,vscode怎么设置跳转,gnome ubuntu,tomcat 优化配置,sqlite 判断语句,比较著名的网页设计师,mysql 数据库替换,如何禁止通过ip访问服务器,sliderpro插件,2022最好的前端框架,vb写爬虫,php倒序,网站seo推广工具,springboot从,正则过滤html标签,blog建设网站,网页翻页代码,仿zol电脑壁纸源码模板程序,织梦后台操作特别慢,html页面提示框,办公自动化管理系统下载,vb程序代码程序结构lzw

首先下载BootStrap-table的js和CSS

下载地址：https://github.com/wenzhixin/bootstrap-table.git

下载完后解压

把bootstrap-table.js、bootstrap-table-zh-CN.js、bootstrap-table.css复制到项目中

在jsp中引入js和css

其他bootstrap相关文件和jQuery相关文件自行引入即可

先上一段jsp中代码

再看js代码

$(document).ready(function () { //调用函数，初始化表格 initTable(); //当点击查询按钮的时候执行,bootstrap-table前端分页是不能使用搜索功能，所以可以提取出来自定义搜索。后台代码，在后面给出 $("#queryBtn").bind("click", initTable);});function initTable() { //先销毁表格 $('#myTable').bootstrapTable('destroy'); $('#myTable').bootstrapTable({ url: "showConsumeRecordlList",//请求后台的URL（*） method: 'get', dataType: "json", dataField: 'rows', striped: true,//设置为 true 会有隔行变色效果 undefinedText: "空",//当数据为 undefined 时显示的字符 pagination: true, //设置为 true 会在表格底部显示分页条。 showToggle: "true",//是否显示切换试图（table/card）按钮 showColumns: "true",//是否显示内容列下拉框 pageNumber: 1,//初始化加载第一页，默认第一页 pageSize: 10,//每页的记录行数（*） pageList: [10, 20, 30, 40],//可供选择的每页的行数（*），当记录条数大于最小可选择条数时才会出现 paginationPreText: '上一页', paginationNextText: '下一页', search: false, //是否显示表格搜索,bootstrap-table服务器分页不能使用搜索功能，可以自定义搜索框，上面jsp中已经给出，操作方法也已经给出 striped : true,//隔行变色 showColumns: false,//是否显示内容列下拉框 showToggle: false, //是否显示详细视图和列表视图的切换按钮 clickToSelect: true, //是否启用点击选中行 data_local: "zh-US",//表格汉化 sidePagination: "server", //服务端处理分页 queryParamsType : "limit",//设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数. queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的// 请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数如果//　　　　　　　queryParamsType = 'limit' ,返回参数必须包含limit, offset, search, sort, order // queryParamsType = 'undefined', 返回参数必须包含: pageSize, pageNumber, searchText, sortName, sortOrder. // 返回false将会终止请求。 return {//这里的params是table提供的offset: params.offset,//从数据库第几条记录开始limit: params.limit,//找多少条memberId: $("#searchString_id").val() //这个就是搜索框中的内容，可以自动传到后台，搜索实现在xml中体现 }; }, responseHandler: function (res) {　　　　　　//如果后台返回的json格式不是{rows:[{...},{...}],total:100},可以在这块处理成这样的格式　　　　　　return res; }, columns: [{ field: 'xuhao', title: '序号', formatter: idFormatter }, { field: 'memberId', title: '会员卡号', }, { field: 'name', title: '会员姓名' }, { field: 'payTime', title: '缴费时间', formatter: timeFormatter }, { field: 'payNo', title: '缴费单号' }, { field: 'payEntry', title: '收款条目', formatter: payEntryFormatter }, { field: 'cardType', title: '卡种', formatter: cardTypeFormatter }, { field: 'payMoney', title: '缴费金额' }, { field: 'operate', title: '缴费详情', formatter: operateFormatter } ], onLoadSuccess: function () { }, onLoadError: function () { showTips("数据加载失败！"); } });}function idFormatter(value, row, index){ return index+1;}function timeFormatter(value, row, index) { if (value != null) { var date = new Date(dateTime); var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds; }}function payEntryFormatter(value, row, index){ switch(row.payEntry){ case '1': value='缴费种类1'; break; case '2': value='缴费种类2'; break; case '3': value='缴费种类3'; break; default: value='其他'; break; } return value;}function cardTypeFormatter(value, row, index) { switch(row.cardType){ case '1': value='卡种1'; break; case '2': value='卡种2'; break; case '3': value='卡种3'; break; default: value='其他'; break; } return value;}function operateFormatter(value, row, index) { return '';}

前段准备就绪，开始服务器代码

准备分页实体

package com.gym.utils;public class Page { // 每页显示数量 private int limit; // 页码 private int page; // sql语句起始索引 private int offset; // setter and getter....}

准备展示实体

import java.util.Date;import com.gym.utils.Page;public class ConsumeRecord extends Page { private Integer id; private Integer memberId; private String months; private Long payMoney; private Date payTime; private String payStatus; private String payEntry; private String remark; private String name; private String cardType; private Date endTime; private Date registerTime; private String payNo; // setter and getter...}

再来一个分页帮助类

import java.util.ArrayList;import java.util.List;public class PageHelper { // 注意：这两个属性名称不能改变，是定死的 // 实体类集合 private List rows = new ArrayList(); // 数据总条数 private int total; // setter and getter...}

编写Controller

/** * 展示缴费详情列表 * * @param modelMap * @return */ @RequestMapping("/showConsumeRecordlListA") @ResponseBody public String showConsumeRecordlListA(ConsumeRecord consumeRecord, HttpServletRequest request) { PageHelper pageHelper = new PageHelper(); // 统计总记录数 Integer total = consumerRecordService.getTotal(consumeRecord); pageHelper.setTotal(total); // 查询当前页实体对象 List list = consumerRecordService.getConsumerRecordListPage(consumeRecord); pageHelper.setRows(list); return new GsonBuilder().serializeNulls().create().toJson(pageHelper); }

经过Service层，这块就不粘贴了，直接到达mapper

import java.util.List;import com.entity.ConsumeRecord;public interface ConsumeRecordMapper { ... ... /** * 获取消费记录条数 * * @param consumeRecord * @return */ Integer getTotal(ConsumeRecord consumeRecord); /** * 分页查询消费记录集合 * * @param consumeRecord * @return */ List getConsumerRecordListPage(ConsumeRecord consumeRecord);}

然后mapper.xml

SELECT count(1) FROM consume_record where 1=1 and member_id=#{memberId} SELECT * FROM consume_record where 1=1 and member_id=#{memberId} ORDER BY pay_time DESC LIMIT #{offset},#{limit}

这是bootstrap-table官方文档，主要解释参数的意思，可根据文档按照自己的需求更改代码

thinkphp中display模板没法显示bootstrap效果

后端开发|php教程 nbsp,bootstrap,PUBLIC,script,gt 后端开发-php教程thinkphp中display模板无法显示bootstrap效果我将html的...

bootstrap public script php 购物车剔除过期的商品

后端开发|php教程 cookie,cartID,table,cart,setcookie 后端开发-php教程php 购物车删除过期的商品现在做了一个小型的商品系...

cartID cookie setcookie table javascript – 求基于bootstrap后台管理框架

后端开发|php教程 bootstrap,后端,php,javascript,jquery 后端开发-php教程要做后台管理系统，想找一个好的后台管理框架，基...

bootstrap JavaScript jquery 后端 segmentfault笔记删除成功提示判断实现思路？

后端开发|php教程 php,bootstrap 后端开发-php教程数据结构与算法源码,vscode 原理,ubuntu添加字体,neno tomcat,SQlite查找...

bootstrap php用户注册（前台完美js验证）

后端开发|php教程 php,用户注册,前台,完美,验证,php,用户注册,前台,完美,验证,教程,网页特效,create,table,mem 后端开发-php...

create table 前台完美教程用户注册网页特效验证 PHP快速导出Table数据的教程

后端开发|php教程 Table,php,教程后端开发-php教程教学辅助平台系统源码,vscode 切换全屏,iwiwifi ubuntu,tomcat 上传jsp,s...

table 教程 Posted in 开发 | Tagged bootstrap, table

【本文地址】

公司简介

联系我们