html开发中bootstrap-table使用教程
程序员文章站
2022-06-18 23:51:49
html开发中bootstrap-table使用教程,这是用ssm写的这里边没有添加接口。
首先是粘上页面
<%@ page language="jav...
html开发中bootstrap-table使用教程,这是用ssm写的这里边没有添加接口。
首先是粘上页面
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%> <%@ taglib uri="https://java.sun.com/jsp/jstl/core" prefix="c"%> <% string contextpath = request.getcontextpath(); %> <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <!-- 导入jquery --> <script type="text/javascript" src="<%=contextpath%>/js/jquery-3.2.1.min.js"></script> <!-- 导入bootstrap --> <script type="text/javascript" src="<%=contextpath%>/js/bootstrap.js"></script> <link href="<%=contextpath%>/css/bootstrap.css" rel="stylesheet" /> <!-- 导入bootstrap-table --> <script type="text/javascript" src="<%=contextpath%>/js/bootstrap-table.min.js"></script> <script type="text/javascript" src="<%=contextpath%>/js/bootstrap-table-zh-cn.js"></script> <link href="<%=contextpath%>/css/bootstrap-table.min.css" rel="stylesheet" /> </head> body> <p class="container"> <table data-height="540" id="tb_departments" class="table-striped table-hover" data-mobile-responsive="true"></table> </p> </body> <script type="text/javascript"> $(function() { //1.初始化table var otable = new tableinit(); otable.init(); }); var tableinit = function() { var otableinit = new object(); //初始化table otableinit.init = function() { $('#tb_departments') .bootstraptable( { url : '<%=contextpath%>/bootstraoselectvisit.action', //请求后台的url(*) method : 'get', //请求方式(*) editable : true, striped : true, //是否显示行间隔色 cache : false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination : true, //是否显示分页(*) cardview : false, //是否显示详细视图 smartdisplay : true, // 智能显示 pagination 和 cardview 等 sortable : true, //是否启用排序 sortorder : "desc", //排序方式 queryparams : otableinit.queryparams, //传递参数(*) sidepagination : "server", //分页方式:client客户端分页,server服务端分页(*) pagenumber : 1, //初始化加载第一页,默认第一页 pagesize : 10, //每页的记录行数(*) pagelist : [ 10, 25, 50, 100 ], //可供选择的每页的行数(*) //responsehandler:responsehandler,//请求数据成功后,渲染表格前的方法 //onclickrow:otableinit.onclickrow,//表格单击事件 search : false, //显示搜索框 clicktoselect : true, //是否启用点击选中行 showexport : true, //是否显示导出 exportdatatype : "basic", //basic', 'all', 'selected'. uniqueid : "id", //每一行的唯一标识,一般为主键列 columns : [ { checkbox : true }, { field : 'id', title : '编号', align : 'center' }, { field : 'unit', title : '单位', align : 'center' }, { field : 'number', title : '人数', align : 'center' }, { field : 'date', title : '时间', align : 'center', overflow : 'hidden', }] }); }; //得到查询的参数 otableinit.queryparams = function(params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit : params.limit, //页面大小 offset : params.offset,//页码 }; return temp; }; otableinit.onclickrow = function() { alert("onclickrow"); } return otableinit; }; </script> </html>
然后是action层
@requestmapping("/bootstraoselectvisit") public void bootstraoselectvisit(visit visit,httpservletrequest request,httpservletresponse response){ /* tablepage */ //获取分页查询结果 visit bootstrappagedata = visitservice.getbootstrappagedata(visit); //将其转化为json字符串 string s = jsonobject.fromobject(bootstrappagedata).tostring(); response.setcharacterencoding("utf-8"); response.setcontenttype("text/html;charset=utf-8"); try { response.getwriter().print(s); } catch (ioexception e) { // todo auto-generated catch block e.printstacktrace(); } }
接下来是service层
@override public visit getbootstrappagedata(visit visit) { //获取前台穿过来的页面大小 int limit = visit.getlimit(); //获取前台穿过来的页码 int offset = visit.getoffset(); if (limit==0) { visit.setlimit(10); } //根据页面大小和页码查询数据库中的数据 list<visit> repairsfind = visitdao.repairsfindbypage(visit); list<tablepage> rowslist = new arraylist<tablepage>(); //将数据循环放入集合 for (int i=0; i < visit.getlimit(); i++){ if(i >= repairsfind.size()){ break; } tablepage t = repairsfind.get(i); rowslist.add(t); } //将集合放入到分页中 visit.setrows(rowslist); //查询总共有多少条数据,并放入到分页类中 integer countbyrepairs = visitdao.getcountbyrepairs(visit); visit.settotal(long.valueof(countbyrepairs)); return visit; }这两个是涉及到的 dao 层
<select id="repairsfindbypage" parametertype="com.syy.bean.visit" resulttype="com.syy.bean.visit"> select * from visit where 1=1 <if test="id!=null and id!=''"> and id=#{id} </if> <if test="unit !=null and unit !=''"> and unit like concat('%','${unit}','%') </if> <if test="number !=null and number !=''"> and number like concat('%','${number}','%') </if> <if test="date !=null and date !=''"> and date like concat('%','${date}','%') </if> limit #{offset},#{limit} </select> <select id="getcountbyrepairs" resulttype="int" parametertype="com.syy.bean.visit"> select count(*) from visit where 1=1 <if test="id!=null and id!=''"> and id=#{id} </if> <if test="unit !=null and unit !=''"> and unit like concat('%','${unit}','%') </if> <if test="number !=null and number !=''"> and number like concat('%','${number}','%') </if> <if test="date !=null and date !=''"> and date like concat('%','${date}','%') </if> </select>
还有一个就是涉及到的封装类
public class tablepage<t> { private long total; private list<t> rows; private int limit; private int offset ; private string order ="asc"; public long gettotal() { return total; } public void settotal(long total) { this.total = total; } public list<t> getrows() { return rows; } public void setrows(list<t> rows) { this.rows = rows; } public int getlimit() { return limit; } public void setlimit(int limit) { this.limit = limit; } public int getoffset() { return offset; } public void setoffset(int offset) { this.offset = offset; } public string getorder() { return order; } public void setorder(string order) { this.order = order; } }
上一篇: 怎么才能让用户站直接.shtml文件
推荐阅读
-
JavaScript中Function()函数的使用教程
-
使用Python下的XSLT API进行web开发的简单教程
-
ThinkPHP中limit()使用方法详解,thinkphplimit_PHP教程
-
PHP与MySQL开发中页面乱码的产生与解决_PHP教程
-
在Python中操作文件之truncate()方法的使用教程
-
在php中输出html代码_PHP教程
-
在使用angular4中出现JavaScript内存溢出问题(详细教程)
-
PHP中批量生成静态html(命令行下运行PHP)_PHP教程
-
WordPress开发中的get_post_custom()函数使用解析,wordpressgetpost
-
jQuery编程开发中$.each使用详解