bootstrap后端分页
2018-06-05 本文已影响13人
米诺zuo
html代码
<div id="app">
<div style="display: inline-block;margin-top:-3px;margin-left: 20px;">
<div :title="resource.report" class="header-title-report">报告</div>
<div style="display: inline-block;">
<select v-model="selection" id="select-report" style=";border: 1px solid #E2E2E2;
border-radius: 4px;width: 120px;height: 30px;margin-top: -3px;">
<option v-for="test in reports" :value="test">{{ test.text }}</option>
</select>
</div>
</div>
<div id="capaTableDiv" style="height: calc(100% - 135px);font-family: MicrosoftYaHei-Bold;
font-size: 12px;color: #5D5D5D;line-height: 12px;">
<table data-toggle="table" id="table"></table>
</div>
</div>
js代码
var language = getLanguage();
var vm = new Vue({
el: '#app',
data:{
resource: language,
selection: {value: '', text: language.all},
reports : [],
pageNum:null,
tabelNum:null
},
mounted:function () {
this.reports = [
{value: '', text: this.resource.all },
{value: 'Yes', text: this.resource.yes },
{value: 'No', text: this.resource.no },
]
// this.selection= {value: '', text: this.resource.all};
},
watch:{
selection:function(val){
//给后台传自定义的参数，用query扩展
tableSendReq.query =this.getData();
//刷新表格数据,点击你的按钮调用这个方法就可以刷新
$("#table").bootstrapTable('refresh',tableSendReq);
},
},
methods:{
//前台传给后台的参数
getData: function (params) {
//请求服务数据时所传参数
var height = $(window).height();
this.pageNum = Math.round((height-328)/32);
var tabelNum = {
offset: 0,
range:this.pageNum,
status: this.selected.value,
isReport:this.selection.value,
mdrReportingAuthorities:this.selecth.text
}
return tabelNum;
},
},
})
var tableSendReq = {
type:'POST',
url:"/Windchill/qms/complaint/queryComplaint",
contentType: "application/x-www-form-urlencoded;charset=utf-8",//一种编码。好像在post请求的时候需要用到。这里用的get请求，注释掉这句话也能拿到数据
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
queryParams:vm.getData(), //请求服务器时所传的参数
dataField: "data",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行
striped: true, //表格显示条纹，默认为false
pagination: true, // 在表格底部显示分页组件，默认false
sidePagination:'server',//指定服务器端分页
pageSize:10,//单页记录数
pageList:[10,20,30,40],//分页步进值
responseHandler:function (result) {
//如果没有错误则返回数据，渲染表格
return {
total : result.total, //总页数,前面的key必须为"total"
data : result.dataList //行数据，前面的key要与之前设置的dataField的值一致.
};
},//请求数据成功后，渲染表格前的方法
// pageList: false, // 设置页面可以显示的数据条数
// pageSize: 10, // 页面数据条数
onPostBody:function () {
$('td,th').each(function (i,n) {
$(this).attr('title',$(n).text())
})
},
columns: [//列参数
{
field: 'index', // 返回json数据中的name
title: vm.$data.resource.index, // 表格表头显示文字
align: 'center',
width: '40px',
formatter: function (value, row, index) {
return index+1;
}
},
{
field: 'number', // 返回json数据中的name
title: vm.$data.resource.number, // 表格表头显示文字
width: '105px'
},
{
field: 'country',
title: vm.$data.resource.country,
width: '80px'
},
{
field: 'title',
title: vm.$data.resource.title,
width: '90px'
},
{
field: 'descript',
title: vm.$data.resource.problem,
width: '110px'
},
{
field: 'productLine',
title: vm.$data.resource.productLine,
width: '70px'
},
{
field: 'processCode',
title: vm.$data.resource.process,
width: '70px'
},
{
field: 'knowTime',
title: vm.$data.resource.aware,
width: '80px',
formatter: function (value, row, index) {
return value.substr(0,10)
}
},
{
field: 'status',
title: vm.$data.resource.state,
width: '75px'
},
{
field: 'complaintHandler',
title: vm.$data.resource.Complainpeople,
width: '78px'
},
{
field: 'mdr',
title: vm.$data.resource.authorities,
width: '100px'
},
{
field: 'attachment',
title: vm.$data.resource.attachment,
width: '100px',
formatter: function (value, row, index) {
var isReport = vm.$data.selection.value
var country = vm.$data.selecth.text
var mdr = row.mdr
if(isReport=='Yes'&&mdr.indexOf(country)!=-1){
return "<div onclick=\"onClickImg('"+ row.complaintoid + "','"+ country + "')\"><i class=\"icon\"><i class=\"icont icon-del\"></i></i></div>"
}else{
return "<div onclick=\"nodownLoad()\"><i class=\"icon\"><i class=\"icontion icon-del\"></i></i></div>"
}
}
}
],
}
//页面加载执行
$("#table").bootstrapTable(tableSendReq);
返回数据类型格式：
{
"dataList": [
{
"complaintHandler": "wcadmin",
"complaintoid": "VR:com.ptc.qualitymanagement.cem.CustomerExperience:335328",
"country": "阿富汗",
"descript": "sdf",
"knowTime": "2018-06-06 00:00:00.0",
"mdr": "美国、美国",
"mdrReport": "",
"number": "<a title=CP2018-SJ412 href=/Windchill/netmarkets/html/mindray/qms/complaint/review/review.html?complaintoid=com.ptc.qualitymanagement.cem.CustomerExperience:335329&workitem=OR:wt.workflow.work.WorkItem:335994&activityname=审核 target=_blank>CP2018-SJ412</a>",
"processCode": "",
"productLine": "SJ",
"status": "审核",
"title": "sfdfsdsf"
},
{
"complaintHandler": "xdoudou",
"complaintoid": "VR:com.ptc.qualitymanagement.cem.CustomerExperience:302969",
"country": "AF",
"descript": "sdf",
"knowTime": "2018-05-31 00:00:00.0",
"mdr": "",
"mdrReport": "",
"number": "<a title=CP2018-SJ358 href=/Windchill/netmarkets/html/mindray/qms/complaint/newComplaint/newcomplaint.html?complaintoid=com.ptc.qualitymanagement.cem.CustomerExperience:302970&workitem=OR:wt.workflow.work.WorkItem:303102&activityname=重新创建 target=_blank>CP2018-SJ358</a>",
"processCode": "",
"productLine": "SJ",
"status": "重新创建",
"title": "sfda"
},
{
"complaintHandler": "wcadmin",
"complaintoid": "VR:com.ptc.qualitymanagement.cem.CustomerExperience:302724",
"country": "AL",
"descript": "fds",
"knowTime": "2018-05-31 00:00:00.0",
"mdr": "中国、美国",
"mdrReport": "",
"number": "<a title=CP2018-SY357 href=/Windchill/netmarkets/html/mindray/qms/complaint/complainMdrJudge/complainMdrJudge.html?complaintoid=com.ptc.qualitymanagement.cem.CustomerExperience:302725&workitem=OR:wt.workflow.work.WorkItem:305111&activityname=MDR判定 target=_blank>CP2018-SY357</a>",
"processCode": "",
"productLine": "SY",
"status": "MDR判定",
"title": "sadf"
}
],
"total": 197
}
参考文章:
https://www.cnblogs.com/oswald-tu/p/6767664.html
https://www.cnblogs.com/huhangfei/p/5019733.html
