标签:i++ lis list 20px middle trap ima com console
使用的插件:bootstrap
效果:
HTML:
<div class="common-content" style="margin-top:20px;"> <h3 class="PrimaryTitle">列表查询</h3> <table id="workApplyData" class="table" data-pagination="true" data-side-pagination="client"></table> </div>
CSS:
table{ font-size:15px; table-layout:fixed; } .bootstrap-table{ margin:20px 0 50px; } .table th{ background:#ffefee; text-align:center; } .table th{ font-weight:normal; } table.table tbody tr td{ vertical-align: middle; }
后台json返回:
[{"orgClDate":"2019-07-01","orgName":"上海市XX服务中心1","xzqhCodeName":"上海市XX局1"}, {"orgClDate":"2019-07-02","orgName":"上海市XX服务中心2","xzqhCodeName":"上海市XX局2"}, {"orgClDate":"2019-07-03","orgName":"上海市XX服务中心3","xzqhCodeName":"上海市XX局3"}, {"orgClDate":"2019-07-04","orgName":"上海市XX服务中心4","xzqhCodeName":"上海市XX局4"}, {"orgClDate":"2019-07-05","orgName":"上海市XX服务中心5","xzqhCodeName":"上海市XX局5"}]
JS:
var workApplyData=[] ; var datas = Data(); function Data(){ $.ajax({ type:"post", url: "http://localhost:8080/list.do", data : "", async: false, dataType : "json", error : function() { }, success : function(datafh) { var array = datafh.data; //遍历取出 for(var i = 0;i<array.length;i++){ var names=array[i].orgName; var times=array[i].orgClDate; var jiguans=array[i].xzqhCodeName; //往数组里赋值 workApplyData.push({name:names,time:times,jiguan:jiguans}); console.log(workApplyData); } } }); } $(‘#workApplyData‘).bootstrapTable({ data: workApplyData, queryParams: "queryParams", sidePagination: "true", uniqueId: "ID", pageSize: "10",//每页数据条数 search: true,//开启搜索框 pageList: [10,20,30,40,50],//页面数据个数选择 smartDisplay:false, sortable: true, // 是否启用排序 formatNoMatches:function(){ return "暂无数据"; }, //对应的参数: columns: [ { field: ‘name‘, title: ‘社会组织名称‘, width:40, halign:‘center‘, align: ‘center‘, valign: ‘middle‘, }, { field: ‘time‘, title: ‘登记时间‘, width:40, align: ‘center‘, valign: ‘middle‘, }, { field: ‘jiguan‘, title: ‘登记机关‘, width: 40, align: ‘center‘, valign: ‘middle‘, }, ] });
标签:i++ lis list 20px middle trap ima com console
原文地址:https://www.cnblogs.com/lifan12589/p/13725589.html