2017-11-21 3 views
0

jqueryを使用して小さなページネーションシステムを作成しようとしています。後続のコードはすでに順方向のページ番号を生成していますが、逆方向のページ数については同じことをしなければなりません。以下のコードをお読みください。私はコードでコメントしました。ご質問があればお尋ねください。事前バックワード逆番号ループ

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</head> 
<body> 


<ul class="pagination"></ul> 

<script type="text/javascript"> 
function paginate(pagestart, pageNumber) { 
       for (var i = pagestart; i < (pagestart + pageNumber); i++) { 
        $(".pagination").append("<li><a href=\"index?page=" + i + "\">" + i + "</a></li>"); 
        if(i > pageNumber){ 
         //when "pageNumber" more then "i" it will display reverse back page number until hit -> "pageNumber" 
        } 
       } 
      } 

      paginate(1, 5); 


</script> 
</body> 
</html> 
+0

のおかげで、より良い質問理解のためのフィドルを作成してみてください。 –

+0

要件は不明です。コメントの "> pageNumber"とは何ですか? –

答えて

3

追加=>前に付加ソリューションが低い

function paginate(pagestart, pageNumber) { 
 
    for (var i = pagestart; i < (pagestart + pageNumber); i++) { 
 
    $(".pagination.sol").append("<li><a href=\"index?page=" + i + "\">" + i + "</a></li>"); 
 
    if (i > pageNumber) { 
 
     //when "pageNumber" more then "i" it will display reverse back page number until hit -> "pageNumber" 
 
    } 
 
    } 
 
} 
 

 
paginate(1, 5); 
 

 
function Rpaginate(pagestart, pageNumber) { 
 
    for (var i = pagestart; i < (pagestart + pageNumber); i++) { 
 
    $(".pagination.rev").prepend("<li><a href=\"index?page=" + i + "\">" + i + "</a></li>"); 
 
    } 
 
} 
 

 
Rpaginate(1, 5);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<ul class="pagination sol"></ul> 
 
<br> 
 
<ul class="pagination rev"></ul>