- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有这样的代码:
var demoList = new Vue({
el: '#demoList',
data: {
items: [{
"id": 1,
"name": "Tom"
}, {
"id": 2,
"name": "Kate"
}, {
"id": 3,
"name": "Jack"
}, {
"id": 4,
"name": "Jill"
}, {
"id": 5,
"name": "aa"
}, {
"id": 6,
"name": "bb"
}, {
"id": 7,
"name": "cc"
}, {
"id": 8,
"name": "dd"
}, {
"id": 1,
"name": "Tom"
}, {
"id": 2,
"name": "Kate"
}, {
"id": 3,
"name": "Jack"
}, {
"id": 4,
"name": "Jill"
}, {
"id": 5,
"name": "aa"
}, {
"id": 6,
"name": "bb"
}, {
"id": 7,
"name": "cc"
}, {
"id": 8,
"name": "dd"
}, ],
loading: false,
order: 1,
searchText: null,
ccn: null,
currentPage: 0,
itemsPerPage: 2,
resultCount: 0
},
computed: {
totalPages: function() {
console.log(Math.ceil(this.resultCount / this.itemsPerPage) + "totalPages");
return Math.ceil(this.resultCount / this.itemsPerPage);
}
},
methods: {
setPage: function(pageNumber) {
this.currentPage = pageNumber;
console.log(pageNumber);
}
},
filters: {
paginate: function(list) {
this.resultCount = this.items.length;
console.log(this.resultCount + " Result count");
console.log(this.currentPage + " current page");
console.log(this.itemsPerPage + " items per page");
console.log(this.totalPages + " Total pages 2");
if (this.currentPage >= this.totalPages) {
this.currentPage = Math.max(0, this.totalPages - 1);
}
var index = this.currentPage * this.itemsPerPage;
console.log(index + " index");
console.log(this.items.slice(index, index + this.itemsPerPage));
return this.items.slice(index, index + this.itemsPerPage);
}
}
});
a {
color: #999;
}
.current {
color: red;
}
ul {
padding: 0;
list-style-type: none;
}
li {
display: inline;
margin: 5px 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="demoList">
<div class="containerTable">
<table class="table">
<thead>
<tr class="header">
<th>
<div><a @click="sortvia('provider_name')">Provider</a>
</div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items | paginate">
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
<ul>
<li v-for="pageNumber in totalPages">
<a href="#" @click="setPage(pageNumber)">{{ pageNumber+1 }}</a>
</li>
</ul>
</div>
我一直在尝试使用 vuejs 创建寻呼机,所以我想知道是否有人可以指定一个示例来说明如何制作这样的寻呼机(如果可能的话“1-2-3-4-5 ... 55”)? ?,再次感谢您的帮助。
最佳答案
检查这段代码:
https://jsfiddle.net/os7hp1cy/48/
html:
<ul>
<li v-for="pageNumber in totalPages"
v-if="Math.abs(pageNumber - currentPage) < 3 || pageNumber == totalPages - 1 || pageNumber == 0">
<a href="#" @click="setPage(pageNumber)"
:class="{current: currentPage === pageNumber, last: (pageNumber == totalPages - 1 && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 0 && Math.abs(pageNumber - currentPage) > 3)}">
{{ pageNumber+1 }}</a>
</li>
</ul>
CSS:
a.first::after {
content:'...'
}
a.last::before {
content:'...'
}
基本上,它只显示当前页面 2 页以内的分页。然后它还会显示第 1 页和最后一页,并将 "..."
用 CSS 放在数字之前或之后。因此,如果您在第 10 页,它将显示:
1...8 9 10 11 12 ...21
关于javascript - VueJs 如何使用限制器和范围进行分页..?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35596389/
我有一个 ServiceBusQueue(SBQ),它获取大量消息负载。我有一个具有 accessRights(manage) 的 ServiceBusTrigger(SBT),它不断轮询来自 SBQ
在下面给出的结果集中,有 2 个唯一用户 (id),并且查询中可能会出现更多此类用户: 这是多连接查询: select id, name, col1Code, col2Code, col2Va
我正在用 Python 2.7.3 编写一个带有 GRequests 的小脚本和 lxml 可以让我从各种网站收集一些收藏卡价格并进行比较。问题是其中一个网站限制了请求的数量,如果我超过它,就会发回
我想知道何时实际使用删除级联或删除限制以及更新级联或更新限制。我对使用它们或在我的数据库中应用感到很困惑。 最佳答案 在外键约束上使用级联运算符是一个热门话题。 理论上,如果您知道删除父对象也将自动删
下面是我的输出,我只想显示那些重复的名字。每个名字都是飞行员,数字是飞行员驾驶的飞机类型。我想显示驾驶不止一架飞机的飞行员的姓名。我正在使用 sql*plus PIL_PILOTNAME
我正在评估不同的移动框架,我认为 nativescript 是一个不错的选择。但我不知道开发过程是否存在限制。例如,我对样式有限制(这并不重要),但我想知道将来我是否可以有限制并且不能使用某些 nat
我正在尝试使用 grails 数据绑定(bind)将一些表单参数映射到我的模型中,但我认为在映射嵌入式集合方面可能存在一些限制。 例如,如果我提交一些这样的参数,那么映射工作正常: //this wo
是否可以将 django 自过滤器起的时间限制为 7 天。如果日期超过 7 天,则不应用过滤器 最佳答案 timesince 的源代码位于 django/django/utils/timesince.
我想在我的网站上嵌入一个 PayPal 捐赠按钮。但问题是我住在伊朗——这个国家受到制裁,人们不使用国际银行账户或主要信用卡。 有什么想法吗?请帮忙! 问候 沮丧 最佳答案 您可以在伊朗境内使用为伊朗
这是我的查询 select PhoneNumber as _data,PhoneType as _type from contact_phonenumbers where ContactID = 3
这个问题在这里已经有了答案: What is the maximum number of parameters passed to $in query in MongoDB? (4 个答案) 关闭
我的一个项目的 AndroidManifest.xml 变得越来越大(> 1000 行),因为我必须对某些文件类型使用react并且涵盖所有情况变得越来越复杂。我想知道 list 大小是否有任何限制。
在使用 Sybase、Infomix、DB2 等其他数据库产品多年后使用 MySQL 5.1 Enterprise 时;我遇到了 MySQL 不会做的事情。例如,它只能为 SELECT 查询生成 EX
这个问题在这里已经有了答案: What is the maximum number of parameters passed to $in query in MongoDB? (4 个回答) 关闭5年
通常我们是在{$apache}/conf/httpd.conf中设置Apache的参数,然而我们并没有发现可以设置日志文件大小的配置指令,通过参考http://httpd.apache.org/do
我正在搜索最大的 Android SharedPreferences 键值对,但找不到任何好的答案。其次,我想问一下,如果我有一个键,它的字符串值限制是多少。多少字符可以放入其中。如果我需要频繁更改值
我目前正在试验 SoundCloud API,并注意到我对/tracks 资源的 GET 请求一次从不返回超过 200 个结果。关于这个的几个问题: 这个限制是故意的吗? 有没有办法增加这个限制? 如
我正在与一家名为 Dwolla 的金融技术公司合作,该公司提供了一个 API,用于将银行信息附加到用户并收取/发送 ACH 付款。 他们需要我将我的 TLS 最低版本升级到 1.2(禁用 TLS 1.
我在 PHP 中有一个多维数组,如下所示: $array = Array ( [0] => Array ( [bill] => 1 ) [1] => Array ( [
我在获取下一个查询的第一行时遇到了问题: Select mar.Title MarketTitle, ololo.NUMBER, ololo.Title from Markets mar JOIN(
我是一名优秀的程序员,十分优秀!