<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>