分页样式
.pageination_align {
text-align: center
}
.pageination {
color: #48576a;
font-size: 12px;
display: inline-block;
user-select: none;
}
.pagination_page {
padding: 0 4px;
border: 1px solid #d1dbe5;
border-right: 0;
background: #fff;
font-size: 13px;
min-width: 28px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
float: left;
}
.pagination_page_right {
border-right: 1px solid #d1dbe5;
}
.pagination_page:hover {
color: #20a0ff;
}
.disabled {
color: #e4e4e4 !important;
background-color: #fff;
cursor: not-allowed;
}
.pagination_page_active {
border-color: #20a0ff;
background-color: #20a0ff;
color: #fff !important;
;
cursor: default;
}表格样式
/* Table Styles */
.state0 {
color: #f70f0f;
}
.state1 {
color: #00c38d;
}
.state2 {
color: #fcfcfc;
}
.state3 {
color: #fcfcfc;
}
.table-wrapper {
margin: 10px 70px 70px;
box-shadow: 0px 35px 50px rgba(0, 0, 0, 0.2);
}
.fl-table {
border-radius: 5px;
font-size: 12px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
white-space: nowrap;
background-color: white;
}
.fl-table td, .fl-table th {
text-align: center;
padding: 8px;
}
.fl-table td {
border-right: 1px solid #f8f8f8;
font-size: 12px;
}
.fl-table-black thead th {
color: #ffffff;
background: #324960;
}
.fl-table-green thead th {
color: #ffffff;
background: #4FC3A1;
}
.fl-table tr:nth-child(even) {
background: #F8F8F8;
}
.fl-table tbody td img {
width: 100px;
text-align: center;
}
a {
-webkit-tap-highlight-color:rgba(255, 0, 0, 0)
}
.fl-table a {
text-decoration:none;
background:0 0;
width: 50px;
overflow:hidden;
text-overflow:ellipsis;
}
/*.fl-table thead th {*/
/* color: #ffffff;*/
/* background: #4FC3A1;*/
/*}*/
/*.fl-table thead th:nth-child(odd) {*/
/* color: #ffffff;*/
/* background: #324960;*/
/*}*/
/* Responsive */
@media (max-width: 767px) {
.fl-table {
display: block;
width: 100%;
}
.table-wrapper:before {
content:"Scroll horizontally >";
display: block;
text-align: right;
font-size: 11px;
color: white;
padding: 0 0 10px;
}
.fl-table thead, .fl-table tbody, .fl-table thead th {
display: block;
}
.fl-table thead th:last-child {
border-bottom: none;
}
.fl-table thead {
float: left;
}
.fl-table tbody {
width: auto;
position: relative;
overflow-x: auto;
}
.fl-table td, .fl-table th {
padding: 20px .625em .625em .625em;
height: 60px;
vertical-align: middle;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
width: 120px;
font-size: 13px;
text-overflow: ellipsis;
}
.fl-table thead th {
text-align: left;
border-bottom: 1px solid #f7f7f9;
}
.fl-table tbody tr {
display: table-cell;
}
.fl-table tbody tr:nth-child(odd) {
background: none;
}
.fl-table tr:nth-child(even) {
background: transparent;
}
.fl-table tr td:nth-child(odd) {
background: #F8F8F8;
border-right: 1px solid #E6E4E4;
}
.fl-table tr td:nth-child(even) {
border-right: 1px solid #E6E4E4;
}
.fl-table tbody td {
display: block;
text-align: center;
}
}
分页js
var pageination='<script type="text/x-template" id="pageination">\n' +
' <div class="pageination_align">\n' +
' <div class="pageination" v-if="pageinationTotal">\n' +
' <div @click="pageUp(0)" class="pagination_page" :class="startDisabled?\'disabled\':\'\'">首页</div>\n' +
' <div @click="pageUp(1)" class="pagination_page" :class="startDisabled?\'disabled\':\'\'">上一页</div>\n' +
' <div class="pagination_page" :class="item==pageinationCurrentPage?\'pagination_page_active\':\'\'"\n' +
' v-for="item in pageinationLength" @click="jump(item)">\n' +
' {{item}}\n' +
' </div>\n' +
' <div @click="pageDown(1)" class="pagination_page" :class="endDisabled?\'disabled\':\'\'">下一页</div>\n' +
' <div @click="pageDown(0)" class="pagination_page pagination_page_right" :class="endDisabled?\'disabled\':\'\'">\n' +
' 尾页\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
'</script>'
console.log(pageination);
var dom = document.querySelector("body");
dom.innerHTML += pageination;
Vue.component('pageination', {
props: ['total', 'size', 'page', 'changge', 'isUrl'],
template: '#pageination',
data() {
return {
pageinationTotal: this.total,//总条目数
pageinationSize: this.size ? this.size : 10,//每页显示条目个数
pageinationLength: [],
pageinationCurrentPage: this.page ? this.page : 1,//当前页数默认1
pageinationPage: 0,//可分页数
startDisabled: true,//是否可以点击首页上一页
endDisabled: true,//是否可以点击尾页下一页
pageChangge: this.changge,//修改方法
pageIsUrl: this.isUrl ? true : false,//是否开启修改url
}
},
methods: {
jump(item) {
this.pageinationCurrentPage = item;
this.pagers();
this.pageChangge(this.pageinationCurrentPage);
},//跳转页码
pagers() {
//可分页数
this.pageinationPage = Math.ceil(this.pageinationTotal / this.pageinationSize);
//url修改
if (this.pageIsUrl) {
this.$router.replace({
path: this.$route.path,
query: {
page: this.pageinationCurrentPage,
}
});
}
//是否可以点击上一页首页
this.startDisabled = this.pageinationCurrentPage != 1 ? false : true;
//是否可以点击下一页尾页
this.endDisabled = this.pageinationCurrentPage != this.pageinationPage ? false : true;
if (this.pageinationPage == 0) this.endDisabled = true;
//重置
this.pageinationLength = [];
//开始页码1
let start = this.pageinationCurrentPage - 4 > 1 ? this.pageinationCurrentPage - 4 : 1;
//当前页码减去开始页码得到差
let interval = this.pageinationCurrentPage - start;
//最多9个页码，总页码减去interval 得到end要显示的数量+
let end = (9 - interval) < this.pageinationPage ? (9 - interval) : this.pageinationPage;
//最末页码减开始页码小于8
if ((end - start) != 8) {
//最末页码加上与不足9页的数量，数量不得大于总页数
end = end + (8 - (end - start)) < this.pageinationPage ? end + (8 - (end - start)) : this.pageinationPage;
//最末页码加上但是还不够9页，进行开始页码追加，开始页码不得小于1
if ((end - start) != 8) {
start = (end - 8) > 1 ? (end - 8) : 1;
}
}
for (let i = start; i <= end; i++) {
this.pageinationLength.push(i);
}
},//计算分页显示的数字
pageUp(state) {
if (this.startDisabled) return;
if (this.pageinationCurrentPage - 1 != 0 && state == 1) {
this.jump(this.pageinationCurrentPage - 1);
} else {
this.jump(1);
}
},//上一页跟首页 state=1是上一页 state=0是首页
pageDown(state) {
if (this.endDisabled) return;
if (this.pageinationCurrentPage + 1 != this.pageinationPage && state == 1) {
this.jump(this.pageinationCurrentPage + 1);
} else {
this.jump(this.pageinationPage);
}
},// state=1是下一页 state=0是尾页
pageCurrentChange() {
this.pageChangge(this.pageinationCurrentPage);
this.pagers();
}
},
created() {
this.pageCurrentChange();
},
watch: {
total: function (val, oldVal) {
this.pageinationTotal = val;
this.pagers();
},
page: function (val, oldVal) {
this.pageinationCurrentPage = val;
this.pagers();
}
}
})
页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</style>
</head>
<body>
<div class="table-wrapper" id="app">
<table class="fl-table fl-table-black">
<thead>
<tr>
<th v-for="(value, key, index) in thead"> <span v-if="value.type=='checkbox'"><input type="checkbox" @click="changeAllChecked()" > </span>
<span v-else> {{value.tetle}} </span>
</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(list_data_value, list_data_key, list_data_index) in list_data">
<td v-for="(value, key, index) in thead">
<div v-for="(list_data_valuevalue, list_data_valuekey, list_data_valueindex) in list_data_value" v-if="list_data_valuekey == value.name "> <span v-if="value.type=='checkbox' "> <input type="checkbox" v-model="checkedNames" :value="list_data_valuevalue">{{list_data_valuevalue}} </span>
<span v-else-if="value.type=='img' "> <img :src = "list_data_valuevalue"/> </span>
<span v-else-if="value.type=='hert' "> <a :href="list_data_valuevalue">{{list_data_valuevalue}}</a> </span>
<span
v-else-if="value.type=='state' " :class="'state'+list_data_valuevalue">{{value.searchList[list_data_valuevalue]}}</a>
</span> <span v-else> {{list_data_valuevalue}} </span>
</div>
</td>
<td> <span @click="del(list_data_value.id)">删除</span>
</td>
</tr>
<tbody>
</table>
<pageination :total="model.total" :size="model.size" :page="model.page" :changge="pageFn"></pageination>
</div>
<link rel="stylesheet" type="text/css" href="./table/table.css" />
<script src="./table/table.js"></script>
<link rel="stylesheet" type="text/css" href="./page/pageination.css" />
<script src="./page/pageination.js"></script>
<script src="./j.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
pk: 'id',
index_url: './q.php',
add_url: 'article/add',
edit_url: 'article/edit',
del_url: 'article/del',
multi_url: 'article/multi',
search: {
fname: '',
lname: '',
},
thead: [
{
name: 'id',
tetle: "name",
type: "checkbox"
},
{
name: 'tetle',
tetle: "tetle",
type: "a"
},
{
name: 'hert',
tetle: "hert",
type: "hert"
},
{
name: 'img',
tetle: "img",
type: "img"
},
{
name: 'img',
tetle: "img",
type: "imgs"
},
{
name: 'img',
tetle: "img",
type: "Headportrait"
},
{
name: 'img',
tetle: "img",
type: "switch"
},
{
name: 'img',
tetle: "img",
type: "label"
},
{
name: 'state',
tetle: "state",
type: "state",
searchList: {
"1": "显示",
"0": "隐藏"
}
}
],
checked: false,
checkedNames: [],
model: {
total: 300, //总页数
size: 10, //每页显示条目个数不传默认10
page: 1, //当前页码
},
list_data: null
},
watch: {
checkedNames() {
if (this.checkedNames.length == this.list_data.length) {
this.checked = true;
} else {
this.checked = false;
}
}
},
methods: {
//页码切换执行方法
pageFn(val) {
this.model.page = val;
// alert(val);
this.post();
console.log(val);
},
post: function () {
var fname = this.search.fname;
//发送 post 请求
var index_url = this.index_url
this.$http.post(index_url, {
p: this.model.page,
where: this.search
}, {
emulateJSON: true
}).then(function (res) {
this.list_data = res.body.data
console.log(res);
}, function (res) {
console.log(res.status);
});
/* */
},
changeAllChecked: function () {
if (this.checked) {
this.checkedNames = [];
} else {
this.list_data.forEach((item) => {
if (this.checkedNames.indexOf(item.id) == -1) {
this.checkedNames.push(item.id)
}
})
}
},
del: function (e) {
this.$messagebox.show({'title':'hello','describe':'everyOne'},{cb:function () {
alert('点击确认以后的回调')
},buttonName:['关闭','确定']});
console.log(e);
},
dels: function () {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
alert(1);
// rows.splice(index, 1);
// this.$message({
// type: 'success',
// message: '删除成功!'
// });
}).
catch (() => {
// this.$message({
// type: 'info',
// message: '已取消删除'
// });
});
console.log(this.checkedNames);
},
onSubmit() {
console.log('submit!');
}
}
})
//这是我们预留的分页和搜索用的
app.post();
//删除、全删
//添加
//修改
//分页
//查询
// 表初始化
// extend: {
// index_url: 'article/index',
// add_url: 'article/add',
// edit_url: 'article/edit',
// del_url: 'article/del',
// multi_url: 'article/multi',
// table: 'article',
// }
// ajax
// 生成分页
// 生成表格(特殊字段、排序)
// 生成搜索
// 生成快捷按钮
</script>
<script>
</script>
</body>
</html>
