jquery.pagination.jsでページネーションを付けたい

前提・実現したいこと

jquery.pagination.jsを使用してページネーションを
実現したいと考えております。ここを参照しています。
JavaScriptで動的にHTMLを生成して出力させるのですが
うまくページネーションが動いてくれません。

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

HTMLについては出力されているのですがページネーション部分が
うまく動いていない模様です。
どうすればいいか途方に暮れています。何とかお力をお貸しいただけないでしょうか。

該当のソースコード

HTML
1<!-- 実際のHTML -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6	<script type="text/javascript" src="js/jquery.pagination.js">
7</script>
8	<script type="text/javascript" src="js/search.js"></script>
9	<link href="css/design.css" rel="stylesheet" type="text/css">
10	<link href="css/pagination.css" rel="stylesheet" media="all" type="text/css" />
11	<title>サンプル</title>
12</head>
13<body>
14  <div class="Pagination pagination clearfix"><!-- ここにページネーションを表示 --></div>
15  <br>
16  <div id = "SearchResult"></div>
17  <br>
18  <div id = "debugger"></div>
19</body>
20</html>

出力されているHTML

HTML
1<div class="search_result">
2  <ul class="result_title">
3    <li id="disp_1">商品名</li>
4    <li id="disp_2">価格</li>
5    <li id="disp_3">数量</li>
6    <li id="disp_4">メーカー名</li>
7  </ul>
8  <div id="ResultContent"></div>
9  <div id="hiddenresult" style="display: none;">
10    <div class="result">
11      <ul class="result" id="result_1">
12        <li id="result1_1">ティッシュケース1</li>
13        <li id="result1_2">50</li>
14        <li id="result1_3">1</li>
15        <li id="result1_4">メーカー1</li>
16      </ul>
17    </div>
18    <div class="result">
19      <ul class="result" id="result_2">
20        <li id="result2_1">ティッシュケース2</li>
21        <li id="result2_2">100</li>
22        <li id="result2_3">2</li>
23        <li id="result2_4">メーカー2</li>
24      </ul>
25    </div>
26    <div class="result">
27      <ul class="result" id="result_3">
28        <li id="result3_1">ティッシュケース3</li>
29        <li id="result3_2">60</li>
30        <li id="result3_3">18</li>
31        <li id="result3_4">メーカー3</li>
32      </ul>
33    </div>
34    <div class="result">
35      <ul class="result" id="result_4">
36        <li id="result4_1">ティッシュケース4</li>
37        <li id="result4_2">50</li>
38        <li id="result4_3">21</li>
39        <li id="result4_4">メーカー4</li>
40      </ul>
41    </div>
42    <div class="result">
43      <ul class="result" id="result_5">
44        <li id="result5_1">ティッシュケース5</li>
45        <li id="result5_2">30</li>
46        <li id="result5_3">40</li>
47        <li id="result5_4">メーカー</li>
48      </ul>
49    </div>
50  </div>

search.jsから関連する箇所だけ切り出しています。

JavaScript
1function resultReder(paramJson){
2		var rt = JSON.parse(paramJson);
3		var elm = document.getElementById("SearchResult");
4		var ohtml='<div class="search_result">';
5			// 検索結果データ
6			ohtml = ohtml + '<div id="ResultContent"></div><div id="hiddenresult" style="display: none;">';
7			for(var i = 1, len = rt.length;i<len;i++){
8				var targetData = rt[i];
9				ohtml = ohtml + '<div class="result"><ul id="result_' + i + '" class="result">';
10				for(var key in targetData){
11						rowNo.push('<br>');
12				}
13				for(var k=0;k<colNo.length;k++){
14				
15					ohtml = ohtml + '<li id = "result' + i + '_' + k + '">' +rowNo[k] +'</li>'
16				}
17				rowNo=[];
18				ohtml = ohtml + '</ul></div>';
19			}
20		}
21		elm.innerHTML = ohtml + '</div>';
22	alert("resultRender");
23}
24
25//ページネーション
26function pageselectCallback(page_index, jq){
27	var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
28	$('#ResultContent').empty().append(new_content);
29	return false;
30  }
31  function initPagination() {
32	  var num_entries = jQuery('#hiddenresult div.result').length;
33	  $(".Pagination").pagination(num_entries, {
34		  callback: pageselectCallback,
35		  items_per_page:1,
36	  });
37  }
38  $(document).ready(function(){
39	  initPagination();
40  });

試したこと

jsの読込順を変えましたが結果は変わりませんでした。
ページ番号1だけはページ表示されますが、その他の
ページ番号は表示されません。
多分軽微な間違いとか漏れとかだと思うのですが
それをどうやって調べていいのかも見当がつきません。

補足情報（FW/ツールのバージョンなど）

Windows10/64bit
InterNetExplorer11
JavaScript
jquery.pagination.js

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

回答2件

ソースが提示されていない部分があるので推測になりますが、resultReder()が呼ばれる前にinitPagination()が呼ばれているのでは？

投稿2018/03/30 11:48

Lhankor_Mhy

総合スコア37409

Otazoman

2018/04/02 00:33

失礼いたしました。search.jsの下記のfunction内でresultReder()の後に呼出すように設定しております。呼出タイミングに問題があるということでしょうか。 function mainSearch(param){ //受取った検索パラメータを配列に分解 var sKey = buildSearchkey(param); //検索キーを元にSQL組立 var searchSql = varSqlmaker(sKey); var resultJson = sResultData(searchSql); //検索結果描画　 resultReder(resultJson); 　　 pageselectCallback('result', jq) } すいませんがよろしくお願いいたします。

Lhankor_Mhy

2018/04/02 00:37

ご提示のソースではmainSearch() が呼ばれるタイミング（イコール resultReder() が呼ばれるタイミング）がわかりませんが、やはり initPagination() が呼ばれるより遅いことが原因では。

Otazoman

2018/04/02 08:14

すいません初歩的ミスでした。うまく動くようになりました。ありがとうございます。

Otazoman

2018/04/02 08:18

すいません。ベストアンサー付け忘れちゃいました。

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

自己解決

以下の通りで解消しました。
やはりタイミングが問題でした。ありがとうございます。

JavaScript
1function resultReder(paramJson){
2        var rt = JSON.parse(paramJson);
3        var elm = document.getElementById("SearchResult");
4        var ohtml='<div class="search_result">';
5            // 検索結果データ
6            ohtml = ohtml + '<div id="ResultContent"></div><div id="hiddenresult" style="display: none;">';
7            for(var i = 1, len = rt.length;i<len;i++){
8                var targetData = rt[i];
9                ohtml = ohtml + '<div class="result"><ul id="result_' + i + '" class="result">';
10                for(var key in targetData){
11                        rowNo.push('<br>');
12                }
13                for(var k=0;k<colNo.length;k++){
14
15                    ohtml = ohtml + '<li id = "result' + i + '_' + k + '">' +rowNo[k] +'</li>'
16                }
17                rowNo=[];
18                ohtml = ohtml + '</ul></div>';
19            }
20        }
21        elm.innerHTML = ohtml + '</div>';
22    alert("resultRender");
23}
24
25// ページネーション
26function makePagenation() {
27	function pageselectCallback(page_index, jq){
28	   var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
29	   $('#ResultContent').empty().append(new_content);
30	   return false;
31	}
32	function initPagination() {
33	   var num_entries = $('#hiddenresult div.result').length;
34	   // Create pagination element
35	   $(".Pagination").pagination(num_entries, {
36			next_text:"次へ",
37			prev_text:"前へ",
38			num_display_entries:5,
39			num_edge_entries:1,
40			ellipse_text:"・・",
41		  　callback: pageselectCallback,
42		  　items_per_page:1
43	   });
44	}
45	$(function(){
46	   initPagination();
47	});
48 }
49
50function mainSearch(param){
51//受取った検索パラメータを配列に分解
52        var sKey = buildSearchkey(param);
53//検索キーを元にSQL組立
54        var searchSql = varSqlmaker(sKey);
55        var resultJson = sResultData(searchSql);
56//検索結果描画
57　      resultReder(resultJson);
58　　    makePagenation();
59}
60
61