【问题标题】:jQuery pagination with <p> tag displays all pages in a single page if it has some other tag inside带有 <p> 标签的 jQuery 分页在单个页面中显示所有页面,如果它里面有其他标签
【发布时间】:2015-01-29 01:33:31
【问题描述】:

我正在使用 jquery 分页,但如果里面有其他标签,它就不起作用。

这是我的代码:

    <head>
    <link href="simplePagination.css" type="text/css" rel="stylesheet"/>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.simplePagination.js"></script>
    <script>
    jQuery(function($) {
    var items = $(".content");
    var numItems = items.length;
    var perPage = 1;
    items.slice(perPage).hide();
    $("#pagination").pagination({
    items: numItems,
    itemsOnPage: perPage,
    cssStyle: "light-theme",
    onPageClick: function(pageNumber) {
    var showFrom = perPage * (pageNumber - 1);
    var showTo = showFrom + perPage;
    items.hide();
    items.slice(showFrom, showTo).show();
    }
    });
    });
    </script>
    </head>
    <body>
    <div id="pagination"></div>
    <p class="content">
    <table><tr>Window0</tr></table></p> //this code is working 
if it doesn't have the table and 
div tag inside, but in my original its mandatory for me to have this table tag and div tag
    <p class="content"><div>Window1</div></p>
    <p class="content">Window2</p>
    <p class="content">Window3</p>
    <p class="content">Window4</p>
    </body>

分页的所有插件都在这里。https://github.com/flaviusmatis/simplePagination.js

查看我在代码中给出的注释行,有问题。帮我解决这个问题。

【问题讨论】:

  • 你想在你的分页div中有一个table吗?还是table里面的分页div
  • @HugoSousa 我想在分页 div 中有表格

标签: javascript jquery html pagination


【解决方案1】:

您需要修复您的标记。 p 标签并不意味着像你正在做的那样包含其他块级元素,but only "phrasing" elements。使用div 作为.content 元素,然后在其中适当嵌套,一切正常。 (DEMO)

<div id="pagination"></div>
<div class="content"><table><tr><td>Window0</td></tr></table></div>
<div class="content"><div>Window1</div></div>
<div class="content">Window2</div>
<div class="content">Window3</div>
<div class="content">Window4</div>

同样在未来,指定您实际看到的行为会有所帮助,而不是“不工作”——这无助于任何人进行故障排除。

【讨论】:

  • 非常感谢...它工作正常...并且会记住指定标题。也感谢您的建议... :-)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-04-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多