一、DataTables.jsとは
HTMLのtable タグで作った表に改ページやソートや検索機能を追加するためのjQueryライブラリーの一つである。
イメージは以下の通りです。
今回は主に改ページや検索機能に関するの使い方を説明します。
二、使用準備
DataTables.jsを使うには、最低限のjQueryが必要です。こちで
必要なパッケージをダウンロード可能です。
- jquery-3.3.1.min.js
- datatables.min.js
- datatables.min.css
三、HTML側の書き方
まずは、必要なライブラリーを導入して、table タグを作ろう。
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- ライブラリーを導入 -->
<script src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.min.css">
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.min.js"></script>
<!-- 自分が作ったJavaScriptファイル -->
<script type="text/javascript" charset="utf8" src="myTable.js"></script>
</head>
<body>
<!-- tableのタブ -->
<table id="myTable">
</table>
</body>
</html>
四、Java側の準備
jsonのオブジェクトとrestApiの実装を以下のようにします。ご参考お願い致します。
DataTableDto.java
/** Dtoクラス. */
public class DataTableDto {
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPosition() {
return position;
}
public void setPosition(String position) {
this.position = position;
}
public String getOffice() {
return office;
}
public void setOffice(String office) {
this.office = office;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public String getStartdate() {
return startdate;
}
public void setStartdate(String startdate) {
this.startdate = startdate;
}
private String name;
private String position;
private String office;
private String age;
private String startdate;
}
myTable.java
/**
* ページを指定し、データ一覧を取得する
* @param loginUser
* @param auth
* @param model
* @return
*/
@RequestMapping(value="/getTableData", method = RequestMethod.POST, consumes=MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity<Map<String, Object>> getErrorWarnInfoByPage(@RequestBody InfoSelForm[] param,HttpServletRequest req){
try {
// 画面から取得したパラメータをHashMapに変換
Map<String,Object> paramMap = new HashMap<String,Object>();
Arrays.asList(param).forEach(
t ->
paramMap.put(t.getName(), t.getValue())
);
// 戻り値
List<DataTableDto> rtnList = new ArrayList<>();
Map<String, Object> result = new HashMap<String, Object>();
// 対象データの全件数
long targetAllDataCnt = 0;
// 画面対象データの全件数
long targetDspAllDataCnt = 0;
List<DataTableDto> dataTableDtoList = null;
if (param != null && param.length > 0) {
// 初回表示時は、発生日時順に表示
String listSortCondition = "";
if ("1".equals(paramMap.get("sEcho").toString()) == true) {
listSortCondition = "at_time desc";
}else {
// ソート条件取得
listSortCondition = super.getListSortCondition(paramMap);
if ("".equals(listSortCondition) == true) {
// ソート条件が指定されていない場合
listSortCondition = "at_time desc";
}
}
// ページ取得OPTION指定
SelectOptions options = super.getSelectOptions(paramMap);
// 検索文字取得
String strSearch = "";
if(paramMap.get("sSearch") != null) {
strSearch = paramMap.get("sSearch").toString();
}
// dataTableDtoList = ...(ここでＤＢからデータを取得する)
// 該当条件の全データを取得
targetDspAllDataCnt = options.getCount();
if (dataTableDtoList != null && dataTableDtoList .size() > 0) {
for (DataTableDto dataTableDto: dataTableDtoList ) {
rtnList.add(dataTableDto);
}
// 対象の全データ件数を取得
targetAllDataCnt = dataTableDtoList.size();
}
}
// 画面トータル件数
result.put("iTotalRecords", targetAllDataCnt);
// 画面に送信するデータ件数
result.put("iTotalDisplayRecords", targetDspAllDataCnt);
// データ部分 rootName設定
result.put("responseData", rtnList);
return new ResponseEntity<Map<String, Object>>(result, HttpStatus.OK);
}catch (Exception ex) {
super.printExceptionLog(ex,logger);
throw ex;
}
}
五、JavaScript側の書き方
javascriptの実装を以下の通りです。 コメントを見れば、分かることになります。
myTable.js
$(document).ready( function () {
// テーブルの高さを指定する
var h = $(window).height();
// 初期表示件数を設定する(一ページずつ10件を表示する)
var pageLen =10;
$('#myTable').DataTable(
{
destroy: true,
// TODO 画面表示データ(mData)とjsonの各項目をマッピングします。
aoColumns: [
{ mData: "name", sDefaultContent: "" },
{ mData: "position", sDefaultContent: "" },
{ mData: "office", sDefaultContent: "" },
{ mData: "age", sDefaultContent: "" },
{ mData: "startdate", sDefaultContent: "" },
],
rowCallback: function( row, data, dataIndex ) {
// ここで設定する可能です
},
// 表示の指定
columnDefs: [
{
// 対象列指定(開始位置0)
targets: [0,1,2,3,4],
// カラムの名前を設定する
//title: "Name",
// テーブル表示時にフォーマットする。
render: function ( data, type, row ) {
return '<p style="white-space: nowrap;">' +
$('<div>').text(data).html() +
'</p>';
}
},
// visibleをfalseに設定すると、該当カラムが表示しない
//{ visible: false, "targets": [ 0,2 ] }
],
// サーバーに送信するパラメータを設定する
// fnServerParams: function (aoData) {
// aoData.push({"name": "name1", "value": "value1"});
// aoData.push({"name": "name2", "value": "value2"});
// ...
// },
// 取得JSONのルート文字列を設定します。
// TODO 省略した場合のデフォルト値は「aaData」です。restApiを呼び出す後の戻り値
sAjaxDataProp: "responseData",
// Ajax 呼び出し中に処理中の表示
bProcessing: true,
// サーバーと通信が発生するか否か
bServerSide: true,
// trueにするとAjax通信を非同期で行います。
bDeferRender: false,
// ページング機能
paging: true,
// 検索機能
searching: true,
// TODO URL、restApiを呼び出し、データを取得する
sAjaxSource: "/getTableData",
// Ajax呼出関数
fnServerData: function (sSource, aoData, fnCallback, oSettings) {
execDataTableAjax(sSource, aoData, fnCallback, oSettings);
},
// 件数切替機能 無効
lengthChange: false,
// ソート機能 無効
ordering: false,
//初期表示件数
pageLength: pageLen,
// 横スクロールバーを有効にする (scrollXはtrueかfalseで有効無効を切り替えます)
scrollX: true,
// 縦スクロールバーを有効にする (scrollYは200, "200px"など「最大の高さ」を指定します)
scrollY: h - 230,
language: {
sProcessing: '処理中...',
sLengthMenu: '_MENU_ 件表示',
sZeroRecords: 'データはありません。',
sInfo: ' _TOTAL_ 件中 _START_ から _END_ まで表示',
sInfoEmpty: ' 0 件中 0 から 0 まで表示',
sInfoFiltered: '（全 _MAX_ 件より抽出）',
sInfoPostFix: '',
sUrl: '',
oPaginate: {
sPrevious: '<',
sNext: '>',
sSearch: '検索'
},
// 検索ボックスを追加する
search: '検索'
},
}
);
} );
六、結果
結果としてのイメージをは以下の通りです。
検索ボックスを入力したら、検索することができます。
改ページを選択したら、改ページとなります。
七、最後に
最後まで読んでいただき、ありがとうございます。