SpringMVC+Bootstrap+DataTables に基づいたテーブルサーバー側のページングとファジークエリの実装
はじめに
SpringMVC+Bootstrap+DataTables に基づいて、データ テーブルのサーバー側ページング、ファジー クエリ (非 DataTables 検索)、および非同期ページ更新が実装されています。
注: sp:message タグは SpringMVC 国際化
効果
DataTable テーブル
キーワードクエリ
カスタムキーワードクエリ、非 DataTable 検索
コード
HTML コード
クエリ条件コード
rrreええデータテーブルコード
<!-- 查询、添加、批量删除、导出、刷新 --> <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>
JSコード
DataTablesの初期化、サーバーデータリクエスト、クエリ条件のカプセル化
<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>
Javaコード
コントローラ処理メソッド。テーブルデータを必要とするページのクエリを実行し、Jsonをフォーマットして返す役割を果たします。
<!-- page script --> <script> $(function () { //添加、修改异步提交地址 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: { type: "post", 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) }else{ return data; } } }, {"data": null,"width":"60px"} ], //操作按钮 columnDefs: [ { targets: 0, defaultContent: "<input type='checkbox' name='checkList'>" }, { targets: -1, defaultContent: "<div class='btn-group'>"+ "<button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i></button>"+ "<button id='delRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-trash-o'></i></button>"+ "</div>" } ], language: { lengthMenu: "", processing: "<sp:message code='sys.load'/>", paginate: { previous: "<", next: ">", first: "<<", last: ">>" }, zeroRecords: "<sp:message code='sys.nodata'/>", info: "<sp:message code='sys.pages'/>", infoEmpty: "", infoFiltered: "", sSearch: "<sp:message code='sys.keyword'/>:", }, //在每次table被draw完后回调函数 fnDrawCallback: function(){ var api = this.api(); //获取到本页开始的条数 var startIndex= api.context[0]._iDisplayStart; api.column(1).nodes().each(function(cell, i) { cell.innerHTML = startIndex + i + 1; }); } }); //查询按钮 $("#btn-query").on("click", function () { tables.fnDraw();//查询后不需要保持分页状态,回首页 }); //添加 $("#btn-add").on("click", function () { url = "<%=path%>/goodsType/add"; $("input[name=typeId]").val(0); $("input[name=typeNameCn]").val(""); $("input[name=typeNameEn]").val(""); $("#editModal").modal("show"); }); //批量删除 $("#btn-delAll").on("click", function () { }); //导出 $("#btn-export").on("click", function () { }); //刷新 $("#btn-re").on("click", function () { tables.fnDraw(false);//刷新保持分页状态 }); //checkbox全选 $("#checkAll").on("click", function () { if ($(this).prop("checked") === true) { $("input[name='checkList']").prop("checked", $(this).prop("checked")); //$("#dataTable tbody tr").addClass('selected'); $(this).hasClass('selected') } else { $("input[name='checkList']").prop("checked", false); $("#dataTable tbody tr").removeClass('selected'); } }); //修改 $("#dataTable tbody").on("click", "#editRow", function () { var data = tables.api().row($(this).parents("tr")).data(); $("input[name=typeId]").val(data.typeIdStr); $("input[name=typeNameCn]").val(data.typeNameCn); $("input[name=typeNameEn]").val(data.typeNameEn); url = "<%=path%>/goodsType/update"; $("#editModal").modal("show"); }); $("#btn-submit").on("click", function(){ $.ajax({ cache: false, type: "POST", url: url, data:$("#editForm").serialize(), async: false, error: function(request) { showFail("Server Connection Error..."); }, success: function(data) { if(data.status == 1){ $("#editModal").modal("hide"); showSuccess("<sp:message code='sys.oper.success'/>"); tables.fnDraw(); }else{ showFail("<sp:message code='sys.oper.fail'/>"); } } }); }); //删除 $("#dataTable tbody").on("click", "#delRow", function () { var data = tables.api().row($(this).parents("tr")).data(); if(confirm("是否确认删除这条信息?")){ $.ajax({ url:'<%=path%>/goodsType/del/'+data.typeIdStr, type:'delete', dataType: "json", cache: "false", success:function(data){ if(data.status == 1){ showSuccess("<sp:message code='sys.oper.success'/>"); tables.api().row().remove().draw(false); }else{ showFail("<sp:message code='sys.oper.fail'/>"); } }, error:function(err){ showFail("Server Connection Error..."); } }); } }); }); </script>
DataTables
@RequestMapping(value="/goodsType/getData", produces = "text/json;charset=UTF-8") @ResponseBody public String getData(HttpServletRequest request, QueryCondition query) { DatatablesView<GoodsType> dataTable = goodsTypeService.getGoodsTypeByCondition(query); dataTable.setDraw(query.getDraw()); String data = JSON.toJSONString(dataTable); return data; }
Service業務処理クラスで要求される形式に従って定義されたJsonデータ形式
{ "data": [{ "createTime": "2016-10-27 09:42:28.0", "typeId": 96824775296417986, "typeIdStr": "96824775296417986", "typeNameCn": "食品", "typeNameEn": "Foods", "updateTime": "2016-10-28 13:00:24.0" }, { "createTime": "2016-10-27 09:42:27.0", "typeId": 96824775296417979, "typeIdStr": "96824775296417979", "typeNameCn": "汽车", "typeNameEn": "Cars123", "updateTime": "2016-10-27 09:51:24.0" }], "draw": 1, "recordsFiltered": 17, "recordsTotal": 17 }
DatatablesViewを返します。主にクエリ条件に基づいてレコード数をカウントし、現在のページデータリストをクエリします
public class DatatablesView<T> { private List<T> data; //data 与datatales 加载的“dataSrc"对应 private int recordsTotal; private int recordsFiltered; private int draw; public DatatablesView() { } public int getDraw() { return draw; } public void setDraw(int draw) { this.draw = draw; } public List<T> getData() { return data; } public void setData(List<T> data) { this.data = data; } public int getRecordsTotal() { return recordsTotal; } public void setRecordsTotal(int recordsTotal) { this.recordsTotal = recordsTotal; this.recordsFiltered = recordsTotal; } public int getRecordsFiltered() { return recordsFiltered; } public void setRecordsFiltered(int recordsFiltered) { this.recordsFiltered = recordsFiltered; } }
Daoレイヤーは基本的なデータベース クエリ操作です。ここでは省略します...
終了
クエリ条件はキーワード ファジー クエリのみを使用します。ビジネス ニーズに応じて、他のクエリ条件を動的に追加でき、それに応じてバックグラウンドを処理する必要があります。
上記は、編集者によって紹介された SpringMVC+Bootstrap+DataTables に基づくテーブル サーバー ページングとファジー クエリの実装です。ご質問があれば、私にメッセージを残してください。編集者が対応します。時間内に返信してください!
SpringMVC+Bootstrap+DataTables に基づくテーブル サーバー側ページングとファジー クエリに関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











この記事では、2025年の上位4つのJavaScriptフレームワーク(React、Angular、Vue、Svelte)を分析し、パフォーマンス、スケーラビリティ、将来の見通しを比較します。 強力なコミュニティと生態系のためにすべてが支配的なままですが、彼らの相対的なポップ

この記事では、リモートコードの実行を可能にする重大な欠陥であるSnakeyamlのCVE-2022-1471の脆弱性について説明します。 Snakeyaml 1.33以降のSpring Bootアプリケーションをアップグレードする方法は、このリスクを軽減する方法を詳述し、その依存関係のアップデートを強調しています

Javaのクラスロードには、ブートストラップ、拡張機能、およびアプリケーションクラスローダーを備えた階層システムを使用して、クラスの読み込み、リンク、および初期化が含まれます。親の委任モデルは、コアクラスが最初にロードされ、カスタムクラスのLOAに影響を与えることを保証します

この記事では、カフェインとグアバキャッシュを使用してJavaでマルチレベルキャッシュを実装してアプリケーションのパフォーマンスを向上させています。セットアップ、統合、パフォーマンスの利点をカバーし、構成と立ち退きポリシー管理Best Pra

node.js 20は、V8エンジンの改善、特により速いガベージコレクションとI/Oを介してパフォーマンスを大幅に向上させます。 新機能には、より良いWebセンブリのサポートと洗練されたデバッグツール、開発者の生産性とアプリケーション速度の向上が含まれます。

大規模な分析データセットのオープンテーブル形式であるIcebergは、データの湖のパフォーマンスとスケーラビリティを向上させます。 内部メタデータ管理を通じて、寄木細工/ORCの制限に対処し、効率的なスキーマの進化、タイムトラベル、同時wを可能にします

この記事では、キュウリの手順間でデータを共有する方法、シナリオコンテキスト、グローバル変数、引数の合格、およびデータ構造を比較する方法を調べます。 簡潔なコンテキストの使用、記述など、保守性のためのベストプラクティスを強調しています

この記事では、Lambda式、Streams API、メソッド参照、およびオプションを使用して、機能プログラミングをJavaに統合することを調べます。 それは、簡潔さと不変性を通じてコードの読みやすさと保守性の改善などの利点を強調しています
