iOSの基本的なアニメーション、キーフレームアニメーション、エイリアシス関数を使用して物理アニメーション効果を実現する+SpringMVCに基づく+Bootstrap

前書き

iOSの基本的なアニメーション、キーフレームアニメーション、エイリアシス関数を使用して物理アニメーション効果を実現する+SpringMVCに基づく+DataTablesでデータテーブルのサーバーサイドページング、あいまい検索（DataTable Searchではありません）、ページの非同期リフレッシュを実現します。

説明：sp:messageタグはSpringMVCの国際化を使用しています

効果

DataTableテーブル

キーワード検索

カスタムキーワード検索、DataTable Searchではありません

コード

HTMLコード

検索条件コード

<!-- 検索、追加、一括削除、エクスポート、リフレッシュ -->
<div class="row-fluid">
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm" id="btn-add">
<i class="fa fa-plus"></i> <sp:message code="sys.add"/>
</button>
<button type="button" class="btn btn-primary btn-sm" id="btn-delAll">
<i class="fa fa-remove"></i> <sp:message code="sys.delAll"/>
</button>
<button type="button" class="btn btn-primary btn-sm" id="btn-export">
<i class="fa fa-sign-in"></i> <sp:message code="sys.export"/>
</button>
<button type="button" class="btn btn-primary btn-sm" id="btn-re">
<i class="fa fa-refresh"></i> <sp:message code="sys.refresh"/>
</button>
</div>
</div>
<div class="row">
<form id="queryForm" action="<%=path%>/goodsType/list" method="post">
<div class="col"}-xs-2">
<input type="text" id="keyword" name="keyword" class="form-control input-sm"
placeholder="<sp:message code="sys.keyword"/">"
</div>
<button type="button" class="btn btn-primary btn-sm" id="btn-query">
<i class="fa fa-search"></i> <sp:message code="sys.query"/>
</button>
</form>
</div>
</div>

データテーブルのコード

<table id="dataTable" class="table table-striped table-bordered table-hover table-condensed" align="center">
<thead>
<tr class="info">
<td><input type="checkbox" id="checkAll"></td>
<th><sp:message code="sys.no"/></th>
<th><sp:message code="goods.type.name.cn"/></th>
<th><sp:message code="goods.type.name.en"/></th>
<th><sp:message code="sys.create.time"/></th>
<th><sp:message code="sys.update.time"/></th>
<th><sp:message code="sys.oper"/></th>
</tr>
</thead>
</table>

JSコード

DataTablesの初期化、サーバー側データのリクエスト、クエリ条件のエンキャスメント

<!-- ページスクリプト -->
<script>
$(function () {
//追加、修正のアシンクリン提出先URL
var url = "";
var tables = $("#dataTable").dataTable({
serverSide: true,//ページネーション、データの取得などはすべてサーバー側に行う
processing: true,//データをロードする際に「ロード中」を表示するかどうか
pageLength: 10, //初回ロードのデータ行数
ordering: false, //ソート操作はサーバーサイドで行うため、無効にできます
pagingType: "full_numbers",
autoWidth: false,
stateSave: true,//ページング状態を維持し、comTable.fnDraw(false);と組み合わせて使用します
searching: false,//datatablesの検索を無効にする
ajax: { 

url: "<%=path%>/goodsType/getData",
dataSrc: "data",
data: function (d) {
var param = {};
param.draw = d.draw;
param.start = d.start;
param.length = d.length;
var formData = $("#queryForm").serializeArray();//form内のデータを配列にシリアライズする
formData.forEach(function (e) {
param[e.name] = e.value;
});
return param;//自定義で渡す必要のあるパラメータ。
},
},
columns: [//対応するthead内のシリアル
{"data": null,"width":"10px"},
{"data": null},
{"data": 'typeNameCn' },
{"data": 'typeNameEn' },
{"data": 'createTime', 
"render":function(data,type,full,callback) {
return data.substr(0,19) 
}
},
{"data": 'updateTime', defaultContent: "", 
"render":function(data,type,full,callback) {
if(data != null && data != ""){
return data.substr(0,19) 
}
return data;
}
}
},
{"data": null,"width":"60px"}
],
//操作按钮
columnDefs: [
{
targets: 0,
defaultContent: "<input type='checkbox' name='checkList'>"
},
{
targets: -1,
defaultContent: "<div class='btn-group'>"+
""+
""+
"