bootstrap table動態載入資料
阿新 • • 發佈:2019-01-07
點選選擇按鈕,彈出模態框,加載出關鍵詞列表
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)" 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(); }
-----------------------------------------------------------------------------------------------------
http://www.qdfuns.com/notes/25704/0ecd59012e0aeb96ede668fcdc88fd69.html
http://blog.csdn.net/lzx_longyou/article/details/50563907