楽天books ajax

前提・実現したいこと

検索し、そのまま再び検索ボタンを押すと次の20件の商品を上に積み上げていく形で表示させたいのです。

発生している問題・エラーメッセージ

$('.lists').prepend(template);
検索をした際に１〜２０件、同じワードで検索した際に２１〜４０件目が上に表示されるようにしたいのですが
２０〜１件、その上に４０〜２１件目が表示されてしまう。

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>jQuery</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="../../common/css/base.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrap">
  <div class="container">
    <div class="header">
      <p class="header__title">Search Books!</p>
    </div>
    <div class="search">
      <div class="search__text">
        <input type="text" id="js-search-word" class="search__text__input" placeholder="検索する" >
      </div>
      <button id="js-search-button" class="search__btn">検索する</button>
    </div>
    <ul class="lists"></ul>
  </div>
</div>
<script src="../../common/js/jquery.js"></script>
<script>

  $(function() {
    //グローバル変数
    var pageNum = 0;
    var searchword = '';
    var prevword = '';//前のワードの空の変数
    $('#js-search-button').on('click', function() {//クリックされた時に実行される
     searchword = searchButton();
     pageNum = countUp();
    // console.log(pageNums);
    console.log(searchword);
    console.log(prevword);
    execAjax();//execAjaxの実行

    function countUp() {
      pageNum = pageNum + 1;
      return pageNum;//+になった値が上に返る
    }

    function searchButton() {
// '#js-search-button'がクリックされたとき,検索した名前の取得の処理がここに書かれている
      var search = $('#js-search-word').val();
    // console.log(searchword);
      return search
    }

    if(prevword !== searchword) {//一致しなかった場合の処理
        $('ul').empty(); // 違うワードが検索された時にulの中身を空にする
        pageNum = 1;
        prevword = searchword;//検索された前の値を取得
      }
      });

    function execAjax () {//検索したワードに関連した本のデータを取得する処理
      console.log(searchword);
      console.log(pageNum);
        $.ajax({
          url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',//楽天APIにアクセス
          type: 'GET',//取得
          datatype: 'json',//形式
          data: {
            // 「区分:サービス固有パラメーター」を確認して、必要な情報をdata内に入れましょう。
            applicationId: '',
            booksGenreId: '001',
            hits: 20,
            page: pageNum,//変数になる
            keyword: searchword
          },
  }).done(function(data) {
    console.log(data.Items);
    console.log(data.page);
        $.each(data.Items, function(i,item) {
            var template = '<li class='+'lists__item'+'>'+
                           '<div class='+'lists__item__inner'+'>'+
                           '<a href='+' class='+'lists__item__link'+' target='+'_blank'+'>'+
                           '<img src='+ item.Item.mediumImageUrl +' class='+'lists__item__img'+' alt='+'>'+
                           '<p class='+'lists__item__detail'+'>作品名：'+ data.Items[i].Item.title +'</p>'+
                           '<p class='+'lists__item__detail'+'>作者　：'+ data.Items[i].Item.author +'</p>'+
                           '<p class='+'lists__item__detail'+'>出版社：'+ data.Items[i].Item.publisherName +'</p>'+
                           '</a>'+'</div>'+'</li>';
            $('.lists').prepend(template);//prepend先頭へ挿入する
    });
         });
    }
});
</script>
</body>
</html>

試したこと

もともとはapend()を使っていましたが、検索した情報を上に積みかさねたいのでprepend()を使いました。
結果上に積み重なったのですが、１〜２０件ではなく２０〜１件の順に表示されてしまいます。
初心者なので間違えているところが多いと思いますが、ヒントなど頂けるとありがたいです。

補足情報（CSS）

.clearfix:after {
  display: block;
  clear: both;
  content: '';
}
.wrapper {
  padding: 20px;
}
.container {
}
.header {
  width: 100%;
  background-color: #43cee0;
}
.header__title {
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  color: #fff;
}
.search {
  overflow: hidden;
  margin-bottom: 50px;
  background: #fff;
  box-shadow: 0 1px 5px #ccc;
}
.search__text {
  width: 100%;
}
.search__text__input {
  -webkit-box-sizing: border-box;
      box-sizing: border-box;
  width: 100%;
  margin-bottom: 20px;
  padding: 0 10px;
  line-height: 3em;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #eee;
  font-size: 20px;
}
.search__btn {
  display: block;
  margin: 0 auto 20px;
  padding: 0 20px;
  line-height: 40px;
  border: none;
  font-size: 18px;
  color: #fff;
  background-color: #43cee0;
}
.search__btn:hover {
  background-color: #1eabbd;
}
.lists {
  overflow: hidden;
  margin-left: 20px;
  
}
.lists__item {
  -webkit-box-sizing: border-box;
      box-sizing: border-box;
  display: inline-block;
  width: 25%;
  padding: 0 20px 20px 0;
  vertical-align: top;
  text-align: center;
}
.lists__item__inner {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}
.lists__item__link {
  display: block;
  text-decoration: none;
}
.lists__item__img {
  margin-bottom: 20px;
  width: 100%;
  max-width: 150px;
  -webkit-box-shadow: 0 1px 5px #ccc;
      box-shadow: 0 1px 5px #ccc;
}
.lists__item__detail {
  margin-bottom: 10px;
  padding-left: 5em;
  text-indent: -5em;
  line-height: 1.5em;
  text-align: left;
  font-size: 12px;
}
.message {
  margin-bottom: 50px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .lists__item {
    width: 33.33%;
  }
}

@media screen and (max-width: 479px) {
  .lists__item {
    width: 50%;
  }
}

x_x

2019/05/22 08:41

21,22,23,...39,40,1,2,3,...19,20という順に並べたいということですか？これであってますか？

biginnnerrrr

2019/05/22 08:59

あっています！質問わかりづらくて申し訳ございません...

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことでしょうか。

js
1        var template = '';
2        $.each(data.Items, function(i,item) {
3            template += '<li class='+'lists__item'+'>'+
4                           '<div class='+'lists__item__inner'+'>'+
5                           '<a href='+' class='+'lists__item__link'+' target='+'_blank'+'>'+
6                           '<img src='+ item.Item.mediumImageUrl +' class='+'lists__item__img'+' alt='+'>'+
7                           '<p class='+'lists__item__detail'+'>作品名：'+ data.Items[i].Item.title +'</p>'+
8                           '<p class='+'lists__item__detail'+'>作者　：'+ data.Items[i].Item.author +'</p>'+
9                           '<p class='+'lists__item__detail'+'>出版社：'+ data.Items[i].Item.publisherName +'</p>'+
10                           '</a>'+'</div>'+'</li>';
11        });
12        $('.lists').prepend(template);//prepend先頭へ挿入する