Question

是否有一种分页类型允许用户输入可用的页码，这与Dojo分页中的goto按钮不相似？

这是我的意思的一个例子：

在此示例中，有一个文本框，用户可以在其中指定页码，然后将其带到相应的页面。

可以这样做吗？如果是的话，请你帮我解决这个问题......提前致谢。

Answer 1

的script.js

  function paginate(){

    //create pagination buttons

    if(data.length  >= 5){
        for(var y = 0; y < data.length / 5 ; y++) { // divide by 5 to get results per page equal to 5
            var button = document.createElement("button");
            button.setAttribute("id", "pagination-button" + (y+1).toString());
            button.setAttribute("class", "pagination-button center");
            button.setAttribute("onclick", "nav(id)");
            var text = document.createTextNode((y + 1).toString());
            button.appendChild(text);
            document.body.appendChild(button);
        }
    }
}
function removeChildNodes() {
    document.getElementById("searchResults").innerHTML = "";
}
function nav(id){
    removeChildNodes()
    showPages(document.getElementById(id).innerHTML);
}
function showPages (pageNum) {
    //get upperbound reults
    pageNum = parseInt(pageNum);
    var upperBoundResults = (pageNum * 5); // gets increments of 5 per page if page 1 , 5 results
    //get lower bound results to start at 
    var lowerBoundResults = (upperBoundResults - 5); // if page 2, lower bound is 5 upper 10
    for(lowerBoundResults; lowerBoundResults<upperBoundResults; lowerBoundResults++) {
        if(data[lowerBoundResults]) {
             document.getElementById("searchResults").innerHTML += "<div class='center'>" +
             "Name: "   + data[lowerBoundResults].title      + "</div>"; 
            } else {
                break; // breaks if no longer any results that would throw an error
            }
        }
}

showPages(1);
paginate();

index.html
    <!DOCTYPE html>
    <html>

    <head> 
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body>
    <div id="searchResults"></div>

    </body>
    <script type="text/javascript" src="script.js"></script>
    </html>

这样做是每5个条目创建一个paginate按钮。因此，在数据中创建JSON对象，它应该是好的。

如何在道场中应用分页

1 个答案: