您好,登錄后才能下訂單哦!
首先初始化頁面
$(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//數(shù)據(jù)源 dataField: "rows",//服務(wù)端返回數(shù)據(jù)鍵值 就是說記錄放的鍵值是rows,分頁時使用總記錄數(shù)的鍵值為total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分頁 sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 //pageNumber:1, pageSize: 10,//單頁記錄數(shù) pageList: [5, 10, 20, 50],//分頁步進值 sidePagination: "server",//服務(wù)端分頁 contentType: "application/json",//請求數(shù)據(jù)內(nèi)容格式 默認是 application/json 自己根據(jù)格式自行服務(wù)端處理 dataType: "json",//期待返回數(shù)據(jù)類型 method: "post",//請求方式 searchAlign: "left",//查詢框?qū)R方式 silent: true, queryParamsType: "limit",//查詢參數(shù)組織方式 queryParams: function getParams(params) { var param = { pageNum: params.pageNumber, pageSize: params.pageSize, realName : params.search }; return param; }, responseHandler: function(res) { return { "total": res.total,//總頁數(shù) "rows": res.rows //數(shù)據(jù) }; }, searchOnEnterKey: false,//回車搜索 showRefresh: true,//刷新按鈕 showColumns: true,//列選擇按鈕 buttonsAlign: "left",//按鈕對齊方式 toolbar: "#userToolbarsendCoin",//指定工具欄 toolbarAlign: "right",//工具欄對齊方式 columns: [ /*{ title: "全選", field: "select", checkbox: true, width: 20,//寬度 align: "center",//水平 valign: "middle"http://垂直 },*/ { title: "ID",//標題 field: "id",//鍵名 sortable: true,//是否可排序 order: "desc"http://默認排序方式 }, { field: "userInfo.userName", title: "用戶名", sortable: true, titleTooltip: "this is name" }/*, { field: "userInfo.id", title: "userInfo.id", }*/, { field: "userInfo.realName", title: "真實姓名", sortable: true, }, { field: "userInfo.department", title: "所屬部門", sortable: true, },{ field: "coinName", title: "類型", sortable: true, }, { field: "amount", title: "數(shù)量", sortable: true, sorter:numSort }, { field: "validDateStart", title: "有效期起", sortable: true, //——修改——獲取日期列的值進行轉(zhuǎn)換 formatter: function (value, row, index) { var time = new Date(value); var y = time.getFullYear();//年 var m = time.getMonth() + 1;//月 var d = time.getDate();//日 return y+"-"+m+"-"+d } }, { field: "validDateEnd", title: "有效期止", sortable: true, //——修改——獲取日期列的值進行轉(zhuǎn)換 formatter: function (value, row, index) { var time = new Date(value); var y = time.getFullYear();//年 var m = time.getMonth() + 1;//月 var d = time.getDate();//日 return y+"-"+m+"-"+d} } , { field: "userInfo.id", title: "操作列", formatter:function(value, row, rowIndex){ var userId =row.userInfo.id; var amount =row.amount; var validDateStart =row.validDateStart; var validDateEnd =row.validDateEnd; var realName =row.userInfo.realName; console.log(userId); console.log(realName); console.log(amount);console.log(validDateStart);console.log(validDateEnd); if(userId!=null){ return' '+'<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\',\''+realName+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>分配</a>' +' '/*+ '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="editTw(\''+userId+'\',\''+amount+'\',\''+realName+'\',\''+validDateEnd+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>編輯</a>'*/; }else{ return '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\');"> <i class="icon-edit icon-white"></i>分配</a>'; } } } ], onClickRow: function(row, $element) { //$element是當前tr的jquery對象 $element.css("background-color", "white"); /*alert(row.id); id = row.id;*/ },//單擊row事件 locale: "zh-CN",//中文支持, detailView: false, //是否顯示詳情折疊 detailFormatter: function(index, row, element) { var html = ''; $.each(row, function(key, val){ html += "<p>" + key + ":" + val + "</p>" }); return html; } }) /*$('#archives-table').bootstrapTable('hideColumn', 'userInfo.id');*/ /*$("#searchBtn").click(function() { var realName = $("#realName").val(); $.ajax({ type: "post", url: "/coinSend/list", data: {param : param}, dataType:"json", success : function(json) { $("#archives-table").bootstrapTable('load', json);//主要是要這種寫法 } }); });*/ })
請求后臺controller,動態(tài)獲取數(shù)據(jù)
表格可以加一個手風(fēng)琴樣式
<div class="ibox float-e-margins"> <div class="ibox-title"> <h6>員工列表</h6> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> </div> </div> <div class="ibox-content"> <div class="ibox float-e-margins"> <table id="archives-table" class="table table-hover"> </table> </div> </div> </div>
總結(jié)
以上所述是小編給大家介紹的BootStrap數(shù)據(jù)表格實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。