您的位置:首页 > 运维架构

bootstroop table 自定义搜索

2016-12-07 14:16 302 查看
  <div class="col-sm-12 ">

      <div class="box">

            <div class="box-header">

              <h3 class="box-title">设备信息</h3>

            </div>

             <div id="toolbar">

                     1:<input id="s1" name="id" class="search">

                     2:<input id="s2" name="DeviceName" class="search">

                     <input type="button" onclick="searchkey();"
value="search">

            </div>

            <div class="box-body">

                  <table class="table  table-bordered table-striped"  id="mytab" ></table>

             </div>

      </div>

 </div>

 

下面是js

 

<script>

  function refresh(){//刷新

     var nullparamss = {}; 

     $("#mytab").bootstrapTable("refresh", nullparamss);

  }

  function autoRefresh(){//自动刷新

     setTimeout(refresh,30000);

  }

 

  $('#mytab').bootstrapTable('resetSearch', {

                    height: tableHeight()

                })

  $(function () {

 

             $("#refresh").click(function () {

                       refresh();

              });

     

            $(window).resize(function() { //根据窗口调整表格高度

                $('#mytab').bootstrapTable('resetView', {

                    height: tableHeight()

                })

            })

  

            $('#mytab').bootstrapTable({

                url: "http://localhost/bootstrap/getJsonData?method=index2",//数据源

                dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total

                totalField: 'total',

                height: tableHeight(),//高度调整

                sidePagination: "server",//服务端分页

                method: "get",//请求方式

                pagination: true,//是否分页

                escape: true,

                pageNumber: 1,

                totalRows: 0, // server side need to set

                queryParams: function getParams(params) {

                    var searchKey1 = $("#s1").val(); 

                    var searchKey2 = $("#s2").val(); 

                    var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的

                             limit: params.limit, //页面大小

                             searchKey1:searchKey1,

                             searchKey2:searchKey2,

                             sortName:this.sortName,

                             sortOrder:this.sortOrder,

                             pageindex:this.pageNumber//当前页码

                              };

                       return temp;

                },

                buttonsAlign: "left",//按钮对齐方式

                selectItemName: 'id',

                //uniqueId: "id",      //每一行的唯一标识,一般为主键列

                toolbar: "#toolbar",

                toolbarAlign: 'left',

                columns: [

                    {

                        title: "全选",//标题

                        width: 60,//宽度

                        align: "center",//水平

                        checkbox: true,

                        valign: "middle"//垂直

                     

                    },

                    {

                        field: "id",

                        title: "id",

                        sortable: true

                    },

                    {

                        field: "DeviceName",

                        title: "DeviceName",

                        sortable: true

                    }

                ],

                onRefresh: function (params) {

                    if($("#refreshWay .active").data("toggle")=== "off"){

                             autoRefresh();

                    }

          },

                locale: "zh-CN"//中文支持

            });

    });

    function searchkey(){

                 var nullparamss = {}; 

                   $("#mytab").bootstrapTable("refresh", nullparamss);

    }

     function tableHeight() {

            return $(window).height() - 219;

        }

    

        function infoFormatter(value, row, index)

        {

            return "<a href='detail.html'>id:" + row.id + " description:" + row.description + " done:" + row.done+"</a>";

        }

</script>

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  bootstrap