bootstrap table 简单使用

本文介绍如何利用Bootstrap Table插件实现服务器端分页功能,包括配置JS代码以完成数据加载、显示等功能,并展示了具体的表格字段设置及格式化日期的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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");     
}
          }}, 
   ],
        });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值