実現したいこと
詳細ボタンを表示、動作できるようにしたいです。
発生している問題・分からないこと
Jqueryでテーブルリストをソート、ページング処理できるように実装した結果、「詳細」ボタンが表示されなくなってしまいました。
エラーメッセージ
error
1エラーメッセージは表示されていないです。
該当のソースコード
HTML(thymeleaf)
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" th:href="@{/css/bootstrap.css}" type="text/css"/> 6 <link rel="stylesheet" href="/css/bootstrap.css" type="text/css"/> 7 <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" /> 8 <link rel="stylesheet" type="text/css" href="/css/style.css" /> 9 10 <!-- jQuery・bootstrapライブラリ読み込み --> 11 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 12 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 13 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 14 <!-- /jQuery・bootstrapライブラリ読み込み --> 15 16 <!-- 独自ライブラリ読み込み --> 17 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css" /> 18 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js" ></script> 19 <!-- /独自ライブラリ読み込み --> 20 <title>未収情報一覧</title> 21 </head> 22 <body class="admin-body"> 23 <header> 24 <div class="header-area"> 25 <h2 align="left">QLC債権管理システム</h2> 26 27 <table class="bill-table"> 28 <tr> 29 <th>利用者負担額合計</th> 30 <th>国保連請求額合計</th> 31 <th>未収金額合計</th> 32 </tr> 33 <tr> 34 <td><p th:text="${T(java.lang.String).format('%,d', userBills)}"></p></td> 35 <td><p th:text="${T(java.lang.String).format('%,d',insuranceBills)}"></p></td> 36 <td><p th:text="${T(java.lang.String).format('%,d',uncollectedBill)}"></p></td> 37 </tr> 38 </table> 39 40 <form th:action="@{/print-uncollected-info}" method="post"> 41 <button type="submit" class="btn btn-print">エクセル出力</button> 42 </form> 43 44 </div> 45 <div th:if="${#lists.isEmpty(uncollectedInfoList)}"> 46 <p class="message alert alert-warning">※指定した条件に当てはまるデータは見つかりません</p> 47 </div> 48 <div th:if="!${#lists.isEmpty(uncollectedInfoList)}"> 49 <div > 50 <table id="fav-table" class="table info-list-table"> 51 <thead class="info-table-thead"> 52 <tr class="table-head"> 53 <th data-column-id="sYm">提供年月</th> 54 <th data-column-id="office">事業所</th> 55 <th data-column-id="gov">市町村</th> 56 <th data-column-id="govBill">自治体公費</th> 57 <th data-column-id="usCode" >利用者コード</th> 58 <th data-column-id="name">氏名</th> 59 <th data-column-id="sD">区分</th> 60 <th data-column-id="cs">回収状況</th> 61 <th data-column-id="usBill" >利用者負担額</th> 62 <th data-column-id="usState">回収</th> 63 <th data-column-id="insuBill" >国保連請求額</th> 64 <th data-column-id="NatlState">回収</th> 65 <th data-column-id="note">備考有無</th> 66 <th></th> 67 </tr> 68 </thead> 69 <tbody class="info-table-tbody list"> 70 <tr th:each="info : ${uncollectedInfoList}"> 71 <td> 72 <p th:text="${info.getServiceOfferYm()}"></p> 73 </td> 74 <td > 75 <p th:text="${info.getOffice()}"></p> 76 </td> 77 <td > 78 <p th:text="${info.getGovernment()}"></p> 79 </td> 80 <td> 81 <p th:text="${T(java.lang.String).format('%,d',info.getGovermentPublicLoadBill())}"></p> 82 </td> 83 <td> 84 <p th:text="${info.getUserCode()}"></p> 85 </td> 86 <td> 87 <p th:text="${info.getName()}"></p> 88 </td> 89 <td> 90 <p th:text="${info.getServiceDivision()}"></p> 91 </td> 92 <td> 93 <p th:text="${info.getCollectState()}"></p> 94 </td> 95 <td> 96 <p th:text="${T(java.lang.String).format('%,d',info.getUserAmount())}"></p> 97 </td> 98 <td> 99 <p th:text="${info.getUserAmountCollectState()}"></p> 100 </td> 101 <td > 102 <p th:text="${T(java.lang.String).format('%,d',info.getInsuranceBill())}"></p> 103 </td> 104 <td> 105 <p th:text="${info.getNatlHlthInsCollectState()}"></p> 106 </td> 107 <td> 108 <p th:text="${info.getNote()}"></p> 109 </td> 110 <td> 111 <form th:action="@{/uncollected-info}" method="post"> 112 <input type="hidden" th:name="id" th:value="${info.getId()}"/> 113 <button type="submit" class="btn btn-print">詳細</button> 114 </form> 115 </td> 116 </tr> 117 </tbody> 118 </table> 119 </div> 120 121 <script> 122 $(function() { 123 $("#fav-table").bootgrid({ 124 labels: { 125 noResults: "検索結果 0件", 126 infos: "全 {{ctx.total}}件中 / {{ctx.start}}～{{ctx.end}}まで表示" 127 128 } 129 130 } ); 131 }); 132 </script> 133 <script> 134 $('tr[data-href]').click(function (e) { 135 if (!$(e.target).is('a')) { 136 window.location = $(e.target).data('th:href'); 137 }; 138 }); 139</script> 140 141 </div> 142 </main> 143 <footer> 144 <div class="footer"> 145 <p class="copyright"> 146 © PALGLAD CORP. ALL RIGHTS RESERVED. 147 </p> 148 </div> 149 </footer> 150 </body> 151</html>
試したこと・調べたこと
上記の詳細・結果
tr行全体にリンクを付けられるようになど試したがうまくいきませんでした。
補足
特になし
0 コメント