Question

我想要包含一个＆＃34;分页＆＃34;用jquery或javascript到我的网站。

因此，我创建了以下简单的html代码：

int read() {
    std::ifstream file("file.dat");
    int s;
    int p;

    if (!file) {
        std::cout<<"File cant´t be open"<<std::endl;
        return 0;
    }else {
    while(file>>s && file>>p) {

        std::cout<<"["<<s<<":"<<p<<"]";
    }
    /*  for(int i=0; i<count; i++) { 
            std::cout<<"["s[i]<<":"<<p[i]<<"]";
*/

file.close(); 
}
return 0;

}

我是网络开发中的新手，我不知道如何写一个简单的 javascript或jquery代码来进行分页工作。在搜索互联网后，我找不到任何简单的解决方案。

因此，如果你能告诉我一个jquery或javascirpt代码我可以应用于这个HTML代码，我将非常感激。

感谢您的帮助： - ）

Answer 1

使用jQuery：

<a href="#" id="prev">Prev page</a>
<a href="#" id="next">Next page</a>
<div class="pagination">
    <div class="post" id="page1"> <!-- I gave every "page" an ID. -->
        <h3> head1 </h3>
        <p> Test1 </p>
    </div>

    <div class="post" id="page2">
        <h3> head2 </h3>
        <p> Test2 </p>
    </div>

    <div class="post" id="page3">
        <h3> head3 </h3>
        <p> Test3 </p>
    </div>

    <div class="post" id="page4">
        <h3> head4 </h3>
        <p> Test4 </p>
    </div>

    <div class="post" id="page5">
        <h3> head5 </h3>
        <p> Test5 </p>
    </div>

    <div class="post" id="page6">
        <h3> head6 </h3>
        <p> Test6 </p>
    </div>
</div>

在这种情况下您需要做的就是动态隐藏除了您想要查看的页面之外的每个页面：

function showPage(page) {
    $('.pagination .post:not(#page'+page+')').hide();
    $('.pagination .post#page'+page).show();
}

如果您想要下一个和上一个按钮，您可以轻松地这样做：

function prevPage() {
    if (page == 1) {
        page = $('.pagination .post').length;
    } else {
        page--;
    }
    showPage(page);
}

function nextPage() {
    if (page == $('.pagination .post').length) {
        page = 1;
    } else {
        page++;
    }
    showPage(page);
}

请注意，如果您想要下一个和上一个按钮，则需要存储页面编号（我在示例中使用了page）。

Example Fiddle

使用jquery或javascript进行简单的分页

1 个答案: