bootstrap的table表格使用

本文介绍了如何在Bootstrap中使用bootstrap-table插件进行分页查询和条件查询。首先,需要下载并引入插件包,然后设置表格的重要参数如url、queryParams等。在查询操作中,可以通过表单的name或id属性获取参数,注意中文参数传递时需处理Content-Type防止乱码。

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

bootstrap的table表格使用(分页查询、条件查询)


  • 将插件的jar包引入到工程中,并通过src导入到本地的项目里

<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

  • 接下来就可以调用包中的bootstrapTable的方法
  $('#tradeList').bootstrapTable({
  url: '/VenderManager/TradeList',  //请求后台的URL(*)
  method: 'post',   //请求方式(*)
  toolbar: '#toolbar',  //工具按钮用哪个容器
  striped: true,   //是否显示行间隔色
  cache: false,   //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  pagination: true,   //是否显示分页(*)
  sortable: false,   //是否启用排序
  sortOrder: "asc",   //排序方式
  queryParams: oTableInit.queryParams,//传递参数(*)
  sidePagination: "server",  //分页方式:client客户端分页,server服务端分页(*)
  pageNumber:1,   //初始化加载第一页,默认第一页
  pageSize: 50,   //每页的记录行数(*)
  pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
  strictSearch: true,
  clickToSelect: true,  //是否启用点击选中行
  height: 460,   //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
  uniqueId: "id",   //每一行的唯一标识,一般为主键列
  cardView: false,   //是否显示详细视图
  detailView: false,   //是否显示父子表
  columns: [{
   field: 'id',
   title: '序号'
  }, {
   field: 'liushuiid',
   title: '交易编号'
  }, {
   field: 'orderid',
   title: '订单号'
  }, {
   field: 'receivetime',
   title: '交易时间'
  }, {
   field: 'price',
   title: '金额'
  }, {
   field: 'coin_credit',
   title: '投入硬币'
  }, {
   field: 'bill_credit',
   title: '投入纸币'
  }, {
   field: 'changes',
   title: '找零'
  }, {
   field: 'tradetype',
   title: '交易类型'
  },{
   field: 'goodmachineid',
   title: '货机号'
  },{
   field: 'inneridname',
   title: '货道号'
  },{
   field: 'goodsName',
   title: '商品名称'
  }, {
   field: 'changestatus',
   title: '支付'
  },{
   field: 'sendstatus',
   title: '出货'
  },]
  });
 };
  • 介绍几个重要的参数
    url:这个参数是表格的数据源,请求的数据的url。与Action层里面的方法对应
    queryParams: queryparams 请求过程中传递的参数
function queryParams(params) {
        return {
        pageSize: params.limit,
        pageNumber:params.offset/params.limit +1,
        };
        }

pageSize:params.limit 传递的的页面大小

pageNumber:params.offset/params.limit+1 传递的是当前页


源码

  • 在查询操作

  <form id="searchForm" >
            <div style="padding:3px; float:left">
                动态编号&nbsp;&nbsp;<input class="form-control"  name="dno"
                    id="sd.dno" style="width:110px" /></div><div style="padding:3px; float:left">账号&nbsp;&nbsp;<input class="form-control" name="userName"
                    id="sd.userInfo.userName" style="width:110px" /></div>
            <div style="clear:both">    
            <div style="padding:3px;float:left">
                昵称&nbsp;&nbsp;<input class="easyui-textbox" name="name"
                    id="sd.userInfo.name" style="width:110px" /></div><div style="padding:3px;float:left">标题关键字&nbsp;&nbsp;<input class="easyui-textbox" name="title"
                    id="sd.title" style="width:150px" /></div><div style="padding:3px;float:left">内容关键字&nbsp;&nbsp;<input class="easyui-textbox" name="text"
                    id="sd.text" style="width:150px" />&nbsp&nbsp<button type="button"  method="post" class="btn btn-primary" name="button"  id ='btnf' onclick =search()>查询</button>   </div> 
                    </form>
    function search()
        {
        var opt = {     
                        url: 'doDynamicsList',
                        silent: true,
                        query:{
                            'sd.dno':searchForm.dno.value,
                            'sd.userInfo.userName':searchForm.userName.value,
                            'sd.userInfo.name':searchForm.name.value,
                            'sd.title':searchForm.title.value,
                            'sd.text':searchForm.text.value
                        }
                    };
        $("#table").bootstrapTable('destroy'); 
        $('#test').bootstrapTable('refresh',opt);  
        }

响应查询按钮,将input内的值传入后台中


解释

  • name用于表单提交加了name属性的标签元素才会提交到服务器
  • id 一般用于css和js中引用
  • 获取表单参数的两种方法如下

通过表单的name值获取

 <html>  
 <head>  
 <script language="javascript">  
  function print(){  
   var a=myform.name.value;  
   alert(a);  
  }  
 </script>  
 </head>  
 <body>  
  <form name="myform">  
   <input type="text" name="name" id="nn" />  
   <input type="button" name="button" value="获取" onclick="print()" />  
  </form>    
 </body>  
</html>  

通过id获取

<html>  
 <head>  
 <script language="javascript">  
  function print(){  
   var a=document.getElementById("nn").value;  
   alert(a);  
  }  
 </script>  
 </head>  
 <body>  
  <form>  
   <input type="text" name="name" id="nn" />  
   <input type="button" name="button" value="获取" onclick="print()" />  
  </form>    
 </body>  
</html>  
  • 最后通过重新加载table提交表单(需要先摧毁table)
$("#table").bootstrapTable('destroy'); 
$('#test').bootstrapTable('refresh',opt);  

注意

进行查询时,如有中文参数传递,则需要改变Action层的ContentType否则会出现乱码

resp.setContentType("application/x-www-form-urlencoded; charset=UTF-8");
Bootstrap Table是一个强大的、基于Bootstrap框架开发的响应式表格插件,提供了丰富的特性和易用的API,用于快速地呈现数据集合。以下是Bootstrap Table使用方法: 1. 引入必要的文件 在使用Bootstrap Table前,需要引入以下文件: ```html <!-- bootstrap样式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <!-- bootstrap table样式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.15.4/bootstrap-table.min.css"> <!-- jquery文件 --> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <!-- bootstrap js文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- bootstrap table js文件 --> <script src="https://cdn.staticfile.org/bootstrap-table/1.15.4/bootstrap-table.min.js"></script> ``` 2. 创建HTML结构 在页面中创建一个table元素,并添加必要的属性: ```html <table id="myTable" data-toggle="table" data-url="data.json"></table> ``` 其中,id属性指定了表格的唯一标识符,data-toggle属性指定了表格的类型为Bootstrap Table,data-url属性指定了表格的数据来源。 3. 初始化表格 在JavaScript代码中,使用以下代码初始化表格: ```javascript $(function(){ $(&#39;#myTable&#39;).bootstrapTable(); }); ``` 这里使用了jQuery的文档就绪事件,在页面加载完成后执行初始化操作。此时会根据data-url指定的地址异步加载数据,并自动生成表格。 4. 自定义表格 Bootstrap Table提供了丰富的配置选项,可以自定义表格的样式、特性和行为。例如,可以通过以下代码自定义表格的列、排序和分页等: ```javascript $(function(){ $(&#39;#myTable&#39;).bootstrapTable({ columns: [{ field: &#39;name&#39;, title: &#39;姓名&#39; }, { field: &#39;age&#39;, title: &#39;年龄&#39;, sortable: true }, { field: &#39;gender&#39;, title: &#39;性别&#39; }], sortable: true, pagination: true }); }); ``` 这里使用了columns选项指定了表格的列,每个列由一个field和一个title属性组成,分别指定了列的数据字段和标题。同时也可以通过sortable和pagination选项开启排序和分页功能。 以上就是Bootstrap Table表格的基本使用方法,更多高级特性和API请参考官方文档。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值