1.显示表格
<div id="app">
<template >
<div >
<el-table:data="tableData2"
style="width: 100%;">
<el-table-column
prop="id"
label="id"
width="180">
</el-table-column>
<el-table-column
prop="company_name"
label="公司名称"
width="180">
</el-table-column>
<el-table-column
prop="mobile"
label="手机">
</el-table-column>
</el-table>
</div>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage1"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
:total="pageTotal">
</el-pagination>
</div>
</template>
</div>
2.请求数据js代码
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: function() {
return { visible: false,
pageNum : [5, 10, 15, 20],
currentPage1: 1,
pageTotal:100,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
tableData2:[]
}
},
created:function(){
$.ajax({
type:"POST",
dataType:"json",
data:{"current_page":1},
url:"/merchant/customer/getVueData",
success:function(json) {
vm.tableData2 = json.data;
vm.pageTotal = parseInt(json.count);
console.log(vm.pageTotal);
}
});
},
methods:{
handleSizeChange(){
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
$.ajax({
type:"POST",
dataType:"json",
data:{"current_page":`${val}`},
url:"/merchant/customer/getVueData",
success:function(json) {
vm.tableData2 = json.data;
}
});
}
},
})
</script>
3.PHP代码查询
public function actionGetVueData(){
$connection = Yii::app()->db;
$merchant_id = $this->getMerchantId();
if(IS_POST){
/*
* $beginPage:开始条数
* $page:查询条数
*/
$current_page = $_POST["current_page"];
if($current_page == 1){
$beginPage = 0;
$page = 10;
}else{
$beginPage = (($current_page-1)*10);
$page = 10;
}
//条数
$sql = "SELECT count(id) as countIds FROM {{customer}} WHERE merchant_deleted = 'N' && merchant_id = ".$merchant_id." ";
$command = $connection -> createCommand($sql) ;
$customerCountArr = $command -> queryAll();
//数据
$sql = "SELECT id,company_name,mobile FROM {{customer}} WHERE merchant_deleted = 'N' && merchant_id = ".$merchant_id." limit ".$beginPage.",".$page." ";
$command = $connection -> createCommand($sql);
$customerData = $command -> queryAll();
$ajax["count"] = $customerCountArr[0]["countIds"];
$ajax["data"] = $customerData;
echo json_encode($ajax);
exit();
}
}
