bootstrap table 简单使用

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

https://www.cnblogs.com/landeanfen/p/5821192.html#_label2_1

https://www.cnblogs.com/wdcwy/p/6590855.html

<table id="table-javascript"></table>

JS例

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

  $("#table-javascript").bootstrapTable({
               method: "get",
               url: "<%=basePath%>fyadmin/sysUser/getUserList",
               cache: false, 
               striped: true,
               pagination: true,
               pageList: [10,50],
               pageSize: 50, 
               showColumns: true,
               showRefresh: true,
               sidePagination: "server", //设置为服务器端分页
               minimumCountColumns: 2,
               clickToSelect: true,
               toolbar: "#custom-toolbar",
               columns: [
{field: "status", checkbox: true}, 
/* {field: "num",title: "序号",align: "center",width: 10,formatter: function(value, row, index) {return index+1;}},  */
{field: "loginname",title: "用户名",align: "left",valign: "middle",sortable: true }, 
{field: "name",title: "姓名",align: "left",valign: "top",sortable: true},
{field: "age",title: "年龄",align: "center",valign: "middle",sortable: true}, 
{field: "identification",title: "身份证",align: "center",valign: "middle",sortable: true}, 
{field: "tel",title: "手机号",align: "left",valign: "middle",sortable: true },
{field: "email",title: "邮箱",align: "left",valign: "middle",sortable: true }, 
{field: "createtime",title: "创建时间",align: "left",valign: "top",sortable: true,  
formatter:function(value,row,index){
if(value!=null){
var date=new Date(value);
return date.Format("yyyy-MM-dd HH:mm:ss");     
}
          }}, 
   ],
        });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table是一个基于Bootstrap框架的jQuery表格插件,可以快速地将HTML表格转换为功能丰富的交互式表格。它支持搜索、排序、分页、导出等功能,并且可以自定义样式和事件。 使用Bootstrap Table简单,只需要引入相关的文件和代码即可。以下是一个简单的例子: 1. 引入相关文件 ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script> ``` 2. 编写HTML表格 ```html <table id="myTable" data-toggle="table" data-url="data.json"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> </table> ``` 3. 编写JavaScript代码 ```javascript $(function() { $('#myTable').bootstrapTable(); }); ``` 在上面的代码中,我们通过将`data-toggle`设置为`table`来启用Bootstrap Table插件,将数据源设置为`data.json`,并定义了表格的列。 最后,我们在JavaScript中调用`bootstrapTable()`方法来初始化表格。现在我们就可以使用Bootstrap Table插件了,可以通过鼠标点击、拖动等方式对表格进行交互操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值