Bootstrap table中toolbar新增条件查询及refresh参数使用方法


当前第2页 返回上一页

要实现这样的效果,我们首先要新增查询表单:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<div class="container">

 <div class="row">

  <div class="table-responsive">

   <div id="toolbar">

    <form class="form-inline">

     <div class="form-group">

     <label class="sr-only" for="product_line">产品线</label>

     <div class="input-group">

      <div class="input-group-addon">产品线</div>

      <select class="form-control" name="product_line" id="productLine">

       <option value="">请选择产品线...</option>

      </select>

     </div>

     </div>

     <div class="form-group">

     <label class="sr-only" for="msg_type">消息类型</label>

     <div class="input-group">

      <div class="input-group-addon">消息类型</div>

      <select class="form-control" name="msg_type" id="msgType">

       <option value="">请选择消息类型...</option>

      </select>

     </div>

     </div>

     <div class="form-group">

     <label class="sr-only" for="msg_type">消息类型</label>

     <div class="input-group">

      <div class="input-group-addon">消息类型</div>

      <input type="text" class="form-control" name="searchTexts" id="searchText" placeholder="请输入消息名称或内容关键字...">

     </div>

     </div>

     <button type="button" class="btn btn-primary queryButton">查询</button>

    </form>

   </div>

   <table id="table" ></table>

  </div>

 </div>

</div>

在请求服务器中传递的参数中获取对应的值:

1

2

3

4

5

6

7

8

9

10

11

12

13

//请求服务器数据

 queryParams: function queryParams(params){

  var param = {

    pageNumber: params.pageNumber,

    pageSize: params.pageSize,

    sortName: params.sortName,

    sortOrder: params.sortOrder,

    searchText: $("#searchText").val(),

    msgType: $("#msgType").val(),

    productLine: $("#productLine").val()

   };

   return param;

 }

最后是提交到服务端:

1

2

3

4

//查询

$(document).on('click', ".queryButton",function(){

  $('#table').bootstrapTable('refresh');

});

这个refresh官方文档是这样描述的:

刷新远程服务器数据,可以设置{silent: true}以静默方式刷新数据,并设置{url: newUrl}更改URL。

要提供特定于此请求的查询参数,请设置{query: {foo: 'bar'}}

总结

  以上所述是小编给大家介绍的Bootstrap table中toolbar新增条件查询及refresh参数使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

以上就是Bootstrap table中toolbar新增条件查询及refresh参数使用方法的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

bootstrap.css样式表是什么

bootstrap是js框架吗

为什么前端不用bootstrap

easyui和bootstrap之间有什么区别?

bootstrap简介以及怎样部署安装(介绍)

bootstrap如何让div居右

表格标签以什么开始以什么结束

vue.js和bootstrap之间有什么区别?

html如何引用bootstrap

详解bootstrap中的缩略图

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...