欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrap table动态加载数据示例代码

程序员文章站 2022-06-30 10:50:15
我最近在研究bootstrap的学习路上,那么今天也算个学习笔记吧! 效果如下: 点击选择按钮,弹出模态框,加载出关键词列表 table样式:...

我最近在研究bootstrap的学习路上,那么今天也算个学习笔记吧!

效果如下:

bootstrap table动态加载数据示例代码

点击选择按钮,弹出模态框,加载出关键词列表

bootstrap table动态加载数据示例代码

table样式:

<div class="modal fade " id="clickmodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true" >
 <div class="modal-dialog"> 
 <div class="modal-content"> 
<div class="modal-header"><button onclick="colseclickmodal()" class="close" type="button" data-dismiss="modal">×</button>
<h2 id="mymodallabel">关键词表</h2>
</div>
<div class="modal-body" style="height:310px">
<table class="table table-hover"id="clicktable"  > 
  <thead> 
           <tr>                              
             <th id="gjc" data-field="id" data-sortable="true"> 
                 关键词 <a style="color:red">(双击选择)</a>
             </th> 
             <th data-field="requestconetent" > 
                请求内容 
             </th>          
           </tr> 
         </thead> 
</table> 
 </div>
<div class="modal-footer">
<a href="javascript:void(0)" rel="external nofollow" onclick="colseclickmodal()" class="btn">关闭</a>

</div>
 </div>
</div>
</div>

javascript脚本:

   function choosebtn1(){
      $.ajax({
      type:"post",
      url:'wxgl/findkey',
      success:function(data){
        var datajson = eval('(' + data + ')');
        var datalist = datajson.keys;
        $('#clicktable').bootstraptable('destroy').bootstraptable({  //'destroy' 是必须要加的==作用是加载服务器//  //数据,初始化表格的内容destroy the bootstrap table.
          data:datalist,   //datalist 即为需要的数据
          datatype:'json',
          data_locale:"zh-us",  //转换中文 但是没有什么用处
          pagination: true,
          pagelist:[],
          pagenumber:1,
          pagesize:5,//每页显示的数量
          paginationpretext:"上一页",
          paginationnexttext:"下一页",
          paginationloop:false,
     //这里也可以将table样式中的<tr>标签里的内容挪到这里面:
        columns: [{
           checkbox: true
         },{
           field: 'id',
           title:'关键词 ',
           valign: 'middle',
         },{
         field: 'requestconetent',
         title:'请求内容'
         }]
          ondblclickcell: function (field, value,row,td) {       
            console.log(row); 
            $('#msgid').val(row.id);
            $('#clickmodal').modal('hide');
           } 
        });
         $('#clickmodal').modal('show');
      },error:function(data){
        modal.confirm({title:'提示',msg:"刷新数据失败!"});
      }
      
    })
     
   }

在脚本中调用的findkey方法:

   @requestmapping(value="findkey")
@responsebody
public void findkey(httpservletresponse response,httpservletrequest request) throws ioexception{
        list<key> keys = null; 
        keys=menuservice.findkey(wxid);
        map<string, object> jsonmap = new hashmap<string, object>();// 定义map
jsonmap.put("keys", keys);// rows键 存放每页记录 list
jsonobject result = jsonobject.fromobject(jsonmap);// 格式化result
response.setcontenttype("text/html;charset=utf-8");
printwriter writer = response.getwriter();
writer.write(result.tostring());
writer.flush();
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。