一、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<title>常見問題</title>
<link href="css/skin_blue.css" rel="stylesheet" type="text/css">
<link href="css/css.css" rel="stylesheet" type="text/css">
<link href="fonts/iconfont.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/other.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
<style>
.page-bar {
margin: 40px;
}
.page-bar ul {
width: 405px;
margin: 0 auto;
}
.page-bar li {
float: left;
}
.page-bar li:first-child>a {
margin-left: 0px
}
.page-bar a {
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 4px 10px;
margin-left: -1px;
line-height: 1.42857143;
color: #1cb082;
cursor: pointer;
border-radius: 3px;
margin-left: 10px;
}
.page-bar a:hover {
background-color: #eee;
}
.page-bar a.banclick {
cursor: not-allowed;
}
.page-bar .active a {
color: #fff;
cursor: default;
background-color: #1cb082;
border-color: #1cb082;
}
.page-bar i {
font-style: normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}
</style>
</head>
<body class="a_body">
<!--content-->
<div class="wrap content" id="app" v-cloak>
<div class="right" style="float: initial;">
<div class="title fz-22">
<i class="titleline"></i>常見問題
</div>
<div class="right_main">
<div class="search">
<input type="text" id="text_input" class="s_input" placeholder="請輸入關鍵字">
<input type="button" class="s_button" v-on:click="search()" value="查詢">
</div>
<div class="cjwtlist">
<ul v-for="list in sites">
<li>
<a href="#">{{list.name}}</a>
<p>{{list.content}}</p>
</li>
</ul>
</div>
<div class="page-bar">
<ul>
<li v-if="cur>1">
<a v-on:click="cur--,pageClick()">上一頁</a>
</li>
<li v-if="cur==1">
<a class="banclick">上一頁</a>
</li>
<li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
<a v-on:click="btnClick(index)">{{ index }}</a>
</li>
<li v-if="cur!=all">
<a v-on:click="cur++,pageClick()">下一頁</a>
</li>
<li v-if="cur == all">
<a class="banclick">下一頁</a>
</li>
<li style="margin-left:20px; padding-top:5px;">
共<i>{{all}}</i>頁
</li>
</ul>
</div>
<!--
<div class="page" maxshowpageitem="5" pagelistcount="10" id="page"></div>
</div>
-->
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
var last = 0;
function search2() {
var input = $('#text_input').val();
alert(input);
}
window.onload = function() {
//獲取參數
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg); //search,查詢？後面的參數，並匹配正則
if(r != null) return unescape(r[2]);
return null;
}
var vm = new Vue({
el: '#app',
data: {
all: 5, //總頁數
cur: 1, //當前頁碼
count: 100,
title1: "常見問題",
sites: []
},
watch: {
cur: function(oldValue, newValue) {
//alert(newValue);
//console.log(arguments);
}
},
methods: {
btnClick: function(data) { //頁碼點擊事件
if(data != this.cur) {
this.cur = data
}
var k = data - 1;
var m = k * 5;
vm.getdocs(m, 5);
},
pageClick: function() {
//alert('現在在' + this.cur + '頁');
var k = this.cur - 1;
var m = k * 5;
vm.getdocs(m, 5);
},
search: function() {
var self = this;
var input = $('#text_input').val();
$.post(request + "generalSelect.shtml", {
tableName: 't_train',
where: "content like " + "'" + "%" + input + "%" + "'"
},
function(data) {
var code = data.responsestatus;
var msg = data.message;
if(code == "1") {
//alert(code);
self.sites = data.data;
//count = self.sites.length;
} else {
alert(msg);
}
}, "json");
},
getdocs: function(i, j) {
var self = this;
//獲取名稱
$.post("http://192.168.1.21:8080/yxmc/app/interface/generalCountSelect.shtml", {
tableName: 't_train'
//where: 'id >0 limit '+i+','+j //0,5'
},
function(data) {
var code = data.count;
var msg = data.message;
alert(code);
if(code == "1") {
//alert(code);
self.sites = data.data;
count = self.sites.length;
//alert(self.sites.length);
} else {
alert(msg);
}
}, "json");
},
getdocs2: function(pid) {
var self = this;
//獲取名稱
$.post(request + "generalSelect.shtml", {
tableName: 't_train',
where: 'id >0 limit 0,5'
},
function(data) {
var code = data.responsestatus;
var msg = data.message;
if(code == "1") {
//alert(code);
self.sites = data.data;
count = self.sites.length;
//alert(self.sites.length);
} else {
alert(msg);
}
}, "json");
}
},
computed: {
indexs: function() {
var left = 1;
var right = this.all;
var ar = [];
if(this.all >= 5) {
if(this.cur > 3 && this.cur < this.all - 2) {
left = this.cur - 2
right = this.cur + 2
} else {
if(this.cur <= 3) {
left = 1
right = 5
} else {
right = this.all
left = this.all - 4
}
}
}
while(left <= right) {
ar.push(left)
left++
}
return ar
}
}
});
var myparam = GetQueryString("id");
myparam = '1';
if(myparam != null && myparam.toString().length > 0) {
vm.getdocs(1, 5);
//alert(GetQueryString("id"));
} else {
alert("沒有數據。")
}
}
</script>
<!--footer-->
<div class="footer">
</div>
<!--返回頂部-->
<i class="iconfont icon-jiantouarrow502 goTop"></i>
<script type="text/javascript" src="js/other.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript">
function tt(dd) {
//alert(dd);
}
var GG = {
"kk": function(mm) {
//console.log("hellos");
//window.location.href="test.html?page="+mm;
}
}
$("#page").initPage(100, 1, GG.kk);
</script>
</body>
</html>第二種
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="js/vue.min.js"></script>
<style>
.page {
font-weight: 900;
height: 40px;
text-align: center;
color: #888;
margin: 20px auto 0;
background: #f2f2f2;
}
.pagelist {
font-size: 0;
background: #fff;
height: 50px;
line-height: 50px;
}
.pagelist span {
font-size: 14px;
}
.pagelist .jump {
border: 1px solid #ccc;
padding: 5px 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin-left: 5px;
}
.pagelist .bgprimary {
cursor: default;
color: #fff;
background: #337ab7;
border-color: #337ab7;
}
.jumpinp input {
width: 55px;
height: 26px;
font-size: 13px;
border: 1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
}
.ellipsis {
padding: 0px 8px;
}
.jumppoint {
margin-left: 30px;
}
.pagelist .gobtn {}
.bgprimary {
cursor: default;
color: #fff;
background: #337ab7;
border-color: #337ab7;
}
</style>
</head>
<body>
<div id="app">
<div>
<div class="page" v-show="show">
<div class="pagelist">
<span class="jump"v-show="current_page>1" @click="{current_page--}">上一頁</span>
<span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
<span class="ellipsis" v-show="efont">...</span>
<span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
<span class="ellipsis" v-show="efont&¤t_page<pages-4">...</span>
<span class="jump" @click="{current_page++}">下一頁</span>
<span v-show="current_page<pages-1" class="jump" class="jump" @click="jumpPage(pages)">{{pages}}</span>
<!--
作者：
時間：2018-11-01
描述：
<span class="jumppoint">跳轉到：</span>
<span class="jumpinp"><input type="text" v-model="changePage"></span>
<span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
-->
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
var newlist = new Vue({
el: '#app',
data: {
current_page: 1, //當前頁
pages: 50, //總頁數
changePage:'',//跳轉頁
nowIndex:0
},
computed:{
show:function(){
return this.pages && this.pages !=1
},
efont: function() {
if (this.pages <= 7) return false;
return this.current_page > 5
},
indexs: function() {
//alert(this.current_page);
var left = 1,
right = this.pages,
ar = [];
if (this.pages >= 7) {
if (this.current_page > 5 && this.current_page < this.pages - 4) {
left = Number(this.current_page) - 3;
right = Number(this.current_page) + 3;
} else {
if (this.current_page <= 5) {
left = 1;
right = 7;
} else {
right = this.pages;
left = this.pages - 6;
}
}
}
while (left <= right) {
ar.push(left);
left++;
}
return ar;
},
},
methods: {
jumpPage: function(id) {
this.current_page = id;
},
},
})
</script>
</body>
</html>