<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>顧客検索</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<link rel="stylesheet" href="./css/common.css" type="text/css">
<link th:href="@{css/jquery.dataTables.min.css}" href="./css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="./js/jquery.dataTables.min.js"></script>
<script th:inline="javascript">
// function to(){
// alert('aaa');
// }
$().ready(function() {
var a = $("#gyorenStatus").val();
if(a == 0){ //データを取れない
$('#err').append(" 該当するデータがありません。");
$('#result').css('display', 'none');
$('#err1').css('display', 'block');
}else{
$('#result').css('display', 'block');
$('#err1').css('display', 'none');
}
var t = dataTableInit();
});
$(function(){
// DataTables初期化
var t = dataTableInit();
// イベントエリア
// DataTale 行選択イベント
$('kokyakuListTbl').on('click', 'tr', function() {
if(!$(this).hasClass(selected)) {
t.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
// DataTable
t.on('draw.dt', function() {
var pageInfo = $('kokyakuListTbl').DataTable.page.info();
t.column(0, {page: 'current'}).nodes().each(function(cell,i){
cell.innerHTML = i + 1 + PageInfo.start;
})
});
// リフレッシュ新ボタンイベント
$("refreshBt").click(function(){
t.ajax.reload(null, false);
});
// ボタンクリックイベント
$("#submitBtn").click(function(){
var data = t.rows(['.selected']).data()[0];
if(undefined === data){
swal({
type: 'warning',
title: '提示：',
text: '一行を選択してください！',
confirmButtonColor: "#1ab394",
})
} else if(data.status.trim()==="3"){
debugger
swal({
type: 'warning',
title: '提示：',
text: ''
})
}
});
function dataTableInit(){
return $('#kokyakuListTbl').DataTable({
language: {
"sProcessing": "処理中...",
"sLengthMenu": "_MENU_ 件表示",
"sZeroRecords": "データはありません。",
"sInfo": " _TOTAL_ 件中 _START_ 件から _END_ 件まで表示",
"sInfoEmpty": " 0 件中 0 から 0 まで表示",
"sInfoFiltered": "（全 _MAX_ 件中）",
"sInfoPostFix": "",
"sSearch": "検索:",
"sUrl": "",
"oPaginate": {
"sFirst": "先頭",
"sPrevious": "前へ",
"sNext": "次へ",
"sLast": "最終"
},
"paginate": {
first: "先頭",
previous: "前へ",
next: "次へ",
last: "最終"
},
}
// 表示対象件数は25件固定（非表示）
,"lengthChange": true
,"displayLength": 16
// フィルタ（絞り込み）機能不要
,"searching": false
// 初期表示時は都道府県番号の降順
,"order": [
[ 0, "desc" ]
],
"aoColumnDefs": [ { "bSearchable": false, "bVisible": false, "aTargets": [ 2 ]}],
});
}
})
</script>
</head>
<body>
<form method="get" th:action="@{/kokyakuSearch}" th:object="${kokyakuForm}">
<span class="fontTitle">顧客検索</span>
<hr class="hrPopup1">
<div id="err" class="fontError"></div>
<hr id="err1" class="hrPopup1">
<input id="gyorenStatus" type="hidden" th:value="${size}">
<fieldset class="windowWidth1x1">
<legend>検索条件</legend>
<table>
<tr>
<td><div class="item1 itemWidth0">顧客名</div></td>
<td colspan="2"><input type="text" class="input1 inputWidth4" style="width: 270px" name="kokyakuNm" th:value="*{kokyakuNm}" th:field="*{kokyakuNm}"></td>
</tr>
<tr>
<td><div class="item1 itemWidth0">顧客コード</div></td>
<td>
<input type="text" class="input1 inputWidth0" name="kokyakuCdFrom" th:value="*{kokyakuCdFrom}" th:field="*{kokyakuCdFrom}">
～
<input type="text" class="input1 inputWidth0" name="kokyakuCdTo" th:value="*{kokyakuCdTo}" th:field="*{kokyakuCdTo}">
</td>
<td><button class="button btnWidth2">検索(<span class="accessLetter">S</span>)</button></td>
</tr>
</table>
</fieldset>
<br>
<div id="result">
<fieldset class="windowWidth1x1" style="height:522px;">
<legend>検索結果</legend>
<div class="popupShowCnt">検索件数 <a id="size" th:text=${size}></a> 件</div>
<table id="kokyakuListTbl" class="listViewTable" cellspacing="2">
<thead>
<tr>
<th class="item2" style="width:90px;"><u>顧客コード</u></th>
<th class="item2" style="width:517px;"><u>顧客名</u></th>
</tr>
</thead>
<tbody>
<tr th:each="list : ${kokyaku}" onclick="to()">
<td style="width:90px;" nowrap th:text="${list.kokyakuCd}"></td>
<td style="width:490px;" nowrap th:text="${list.kokyakuNm}"></td>
</tr>
</tbody>
</table>
<!-- <div class="scrollOnY" style="height:462px;"> -->
<!-- <table class="listViewTable windowWidth1"> -->
<!-- <tr th:each="list : ${kokyaku}" onclick="to()"> -->
<!-- <td style="width:90px;" nowrap th:text="${list.kokyakuCd}"></td> -->
<!-- <td style="width:490px;" nowrap th:text="${list.kokyakuNm}"></td> -->
<!-- </tr> -->
<!-- </table> -->
<!-- </div> -->
</fieldset>
</div>
<br>
<div class="windowWidth1x1 alignRight">
<button class="button btnWidth2" onclick="window.close();">閉じる (<span class=accessLetter>E</span>)</button>
</div>
</form>
</body>
</html>
双击表单内容时， 获取当前行数据 ，并转跳到原始画面。