我有一个问题。我从MySQL数据库中获取数据,并列出它。这一切都很好,并且工作正常,但如果我不限制它,那么列表现在已超过100项。 我已经尝试使用Google搜索如何缩短列表,并使用jQuery和JavaScript找到了一些东西,但这并没有太好用。
我正在寻找的是一种方法,使列表限制在10个项目上,下面有一个[更多]按钮。按下时,显示接下来的10个项目,再按下10个项目等。
我的列表中包含正常的<li>
和<ul>
位。
如果还有其他信息,请问我。这是它的网页:http://lolmewn.nl/stats/
我的一些PHP代码:
echo "<li><a href=\"?player=" . $row['player'] . "\">" . $row['player'] .
"</a></li>\n";
答案 0 :(得分:17)
也许你可以试试this。在这个例子中,我使用了2个项而不是10个。我使用css来隐藏从ul里面的第3个li元素开始的所有li元素。每次显示更多点击时,我使用jQuery显示额外的2 lis。
希望这有帮助
再次更新链接......
修改强>
$(function () {
$('span').click(function () {
$('#datalist li:hidden').slice(0, 2).show();
if ($('#datalist li').length == $('#datalist li:visible').length) {
$('span ').hide();
}
});
});
ul li:nth-child(n+3) {
display:none;
}
ul li {
border: 1px solid #aaa;
}
span {
cursor: pointer;
color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id="datalist">
<li>dataset1</li>
<li>dataset1</li>
<li>dataset2</li>
<li>dataset2</li>
<li>dataset3</li>
<li>dataset3</li>
<li>dataset4</li>
<li>dataset4</li>
<li>dataset5</li>
<li>dataset5</li>
</ul>
<span>readmore</span>
答案 1 :(得分:2)
一种方法是使用ajax加载列表项&amp;使用mysql limit将它们限制为10个项目。
否则,如果您一次加载所有内容,则可以执行以下操作:(自己编写代码)
将所有这些内容加载到ul
中并显示所有无。
然后使用jquery eq selector
显示前10个li
元素。
点击更多内容,只需切换要显示的li
。
答案 2 :(得分:1)
你有没有试过jquery datatable?
答案 3 :(得分:1)
纯javascript中的简单解决方案:
var ul = document.getElementsByTagName("ul")[0], //Your <ul>
readmore = document.createElement("li"),
lisColl = ul.getElementsByTagName("li"),
len = lisColl.length,
lis = [],
pos = 0;
readmore.textContent = "Read more";
for (var i = 0; i < len; i++) {
lisColl[i].style.display = "none";
lis.push(lisColl[i]);
}
readmore.onclick = function () {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
for (var c = 0; pos < len; pos++) {
if ((c++) === 10) {
ul.insertBefore(this, lis[pos + 1]);
break;
}
lis[pos].style.display = "";
}
}
readmore.onclick.call(readmore);
答案 4 :(得分:1)
如果你想要这是纯粹的javascript我做了一个例子on jsfiddle
<强>的Javascript 强>
function showMore() {
var listData = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.shown)')).slice(0, 3);
for (var i=0; i < listData.length; i++)
{
listData[i].className = 'shown';
}
switchButtons();
}
function showLess() {
var listData = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.hidden)')).slice(-3);
for (var i=0; i < listData.length; i++)
{
listData[i].className = 'hidden';
}
switchButtons();
}
function switchButtons() {
var hiddenElements = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.shown)'));
if(hiddenElements.length == 0)
{
document.getElementById('moreButton').style.display = 'none';
}
else
{
document.getElementById('moreButton').style.display = 'block';
}
var shownElements = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.hidden)'));
if(shownElements.length == 0)
{
document.getElementById('lessButton').style.display = 'none';
}
else
{
document.getElementById('lessButton').style.display = 'block';
}
}
onload= function(){
showMore();
}
<强> HTML 强>
<ul id="dataList">
<li class="hidden">One</li>
<li class="hidden">Two</li>
<li class="hidden">Three</li>
<li class="hidden">Four</li>
<li class="hidden">Five</li>
<li class="hidden">Six</li>
<li class="hidden">Seven</li>
<li class="hidden">Eight</li>
<li class="hidden">Nine</li>
<li class="hidden">Ten</li>
<li class="hidden">Eleven</li>
</ul>
<input id="moreButton" type="button" value="More" onclick="showMore()"/>
<input id="lessButton" type="button" value="Less" onclick="showLess()"/>
<强> CSS 强>
.shown{
display:block;
}
.hidden{
display:none;
}
答案 5 :(得分:0)
如果要限制数据库中的结果数,请将LIMIT 10
(或任意数字)添加到MySQL查询中。
如果你想真正隐藏列表,但保留它们,你需要CSS来初始隐藏它们,而Javascript / Jquery要取消隐藏它们。 (CSS3可能会让你在没有Javascript / Jquery的情况下取消隐藏它们,但它并不是完全支持它。)
假设所有列表项都具有相同的CSS class
,则可以使用如下的javascript循环:
function unhide(number) {
var items = document.getElementsByClassName('tagnamehere');
var shown=0;
for (var i=0; shown<number && i<items.length; i++) {
if (items[i].style.display=="" || items[i].style.display=="none") {
items[i].style.display="list-item";
shown+=1;
}
}
}
在CSS中,您需要添加的只是.tagnamehere {display:none;}
随意替换您自己的标签。