當前位置：
首頁 >
SpringBoot+Thymeleaf+DataTables实现数据的查询与显示
發布時間：2025/3/19
36
豆豆
生活随笔
收集整理的這篇文章主要介紹了
SpringBoot+Thymeleaf+DataTables实现数据的查询与显示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果：
DataTables官網：
http://www.datatables.club/
在你的項目中使用 DataTables，只需要引入三個文件即可，jQuery庫，一個DT的核心js文件和一個DT的css文件。
這里使用的Thymeleaf模板，juqery是在foot中引用下面展示content部分。
實現
編寫模板并引入js
首先在模板文件html中編寫要顯示的字段信息
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"th:replace="layout/layout(title='收貨單數據',cssPaths='/public/css/plugins/dataTables/datatables.min.css,/public/css/plugins/daterangepicker/daterangepicker-bs3.css,/public/css/plugins/jsTree/style.min.css',jsPaths='/public/js/plugins/dataTables/datatables.min.js,/public/js/plugins/dataTables/dataTables.bootstrap4.min.js,/public/js/plugins/fullcalendar/moment.min.js,/public/js/plugins/jsTree/jstree.min.js,/public/js/plugins/sweetalert/sweetalert2.all.min.js,/public/js/plugins/ladda/spin.min.js,/public/js/plugins/ladda/ladda.min.js,/public/js/plugins/ladda/ladda.jquery.min.js,/public/js/plugins/select2/select2.full.min.js,/public/js/plugins/dropzone/dropzone.js,/public/js/plugins/switchery/switchery.js,/public/js/plugins/daterangepicker/daterangepicker.js,/public/js/plugins/datapicker/bootstrap-datepicker.js,/public/js/plugins/validate/jquery.validate.min.js,/public/js/plugins/validate/validate_zh.js,/modular/utils.js,/modular/receiveOrder/wmsReceiveOrder.js')"><!-- layout文件路徑--> <div th:fragment="content"><div class="ibox float-e-margins"><div class="ibox-content"><div class="table-responsive"><P><shiro:hasPermission name="roleAdd"> </shiro:hasPermission><button id="detailBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 查看</button><button id="submitBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 提交</button><button id="importBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 導入</button><button id="printBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 打印</button><button id="dowloadBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 模板下載</button><button id="InOrderBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 生成入庫單數據</button><button id="refreshBt" class="btn btn-info " type="button"><i class="fa fa-refresh"></i> 刷新</button></P><p></p><table id="wmsReceiveOrder_table_id" class="table table-striped table-bordered hover" style="width:100%"><thead><tr><th>序號</th><th>收貨單號</th><th>收貨日期</th><th>收貨人</th><th>供應商編號</th><th>供應商名稱</th><th>總托數</th><th>總件數</th><th>送貨單號</th><th>創建人</th><th>創建日期</th><th>狀態</th></tr></thead><tbody></tbody></table></div></div></div></div></html>通過上面的引入js文件將js文件引入
其中wmsReceiveOrder.js是自己編寫的js文件。
初始化DataTables
在wmsReceiveOrder.js中?
/ DataTable初始化var t = dataTableInit();//---------------------------點擊事件區域-------------------------//DataTable 行點擊事件，用來設置樣式點擊事件$('#wmsReceiveOrder_table_id tbody').on('click', 'tr', function () {if (!$(this).hasClass('selected') ) {t.$('tr.selected').removeClass('selected');$(this).addClass('selected');}} );//DataTable重新渲染時序號一欄重新進行編號點擊事件t.on( 'draw.dt', function () {var PageInfo = $('#wmsReceiveOrder_table_id').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 );});//模板下載按鈕點擊事件$("#dowloadBtn").click(function () {templateDowload()});//導入按鈕點擊事件$("#importBtn").click(function () {importExcel();});//打印按鈕點擊事件$("#printBtn").click(function () {var data = t.rows(['.selected']).data()[0];debuggerif(undefined===data){debuggerswal({type: 'warning',title: '提示:',text: '請首先選擇一行數據！',confirmButtonColor: "#1ab394",})}else if(data.status.trim()==="1") {debuggerswal({type: 'warning',title: '提示:',text: '請先提交！',confirmButtonColor: "#1ab394",})}elseprintCode(data.id);});//生成入庫單數據按鈕點擊事件$("#InOrderBtn").click(function () {var data = t.rows(['.selected']).data()[0];debuggerif(undefined===data){swal({type: 'warning',title: '提示:',text: '請首先選擇一行數據！',confirmButtonColor: "#1ab394",})}else if((data.status.trim()==="4")) {swal({type: 'warning',title: '提示:',text: '已經生成了入庫單數據！',confirmButtonColor: "#1ab394",})}elseif(data.status.trim()==="1"||data.status.trim()==="2") {debuggerswal({type: 'warning',title: '提示:',text: '打印后才能生成入庫單數據！',confirmButtonColor: "#1ab394",})}elsesubmitInOrder(data.id);});//提交按鈕點擊事件$("#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") {debuggerswal({type: 'warning',title: '提示:',text: '已打印不能再提交！',confirmButtonColor: "#1ab394",})}else if(data.status.trim()==="4") {debuggerswal({type: 'warning',title: '提示:',text: '已入庫不能再提交！',confirmButtonColor: "#1ab394",})}else if(data.status.trim()==="2") {debuggerswal({type: 'warning',title: '提示:',text: '該訂單狀態已提交！',confirmButtonColor: "#1ab394",})}else{submitPrint(data.id);}});function dataTableInit(){return $('#wmsReceiveOrder_table_id').DataTable({"language": {"processing": "處理中...","lengthMenu": "顯示 _MENU_ 項結果","zeroRecords": "沒有匹配結果","info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項","infoEmpty": "顯示第 0 至 0 項結果，共 0 項","infoFiltered": "(由 _MAX_ 項結果過濾)","infoPostFix": "","search": "搜索:","searchPlaceholder": "搜索...","url": "","emptyTable": "表中數據為空","loadingRecords": "載入中...","infoThousands": ",","paginate": {"first": "首頁","previous": "上頁","next": "下頁","last": "末頁"},"aria": {paginate: {first: '首頁',previous: '上頁',next: '下頁',last: '末頁'},"sortAscending": ": 以升序排列此列","sortDescending": ": 以降序排列此列"},"decimal": "-","thousands": "."},"processing": true,"searching" : false,"serverSide": true,"stateSave": true,"pageLength": 5,"lengthMenu": [ 5,10, 25, 50, 75, 100 ],"dom": '<"top">rt<"bottom"flpi><"clear">',"columnDefs": [ {"searchable": false,"orderable": false,"targets": 0}],columns: [{ data: 'id' },{ data: 'purchaseCode' },{ data: 'deliveryTime',render: function (data, type, full, meta ) {return moment(data).format("YYYY-MM-DD ");} },{ data: 'createrName' },{ data: 'supplierCode' },{ data: 'supplierName' },{ data: 'totalTray' },{ data: 'totalNum' },{ data: 'deliveryCode' },{ data: 'createrName' },{ data: 'gmtCreat',render: function (data, type, full, meta ) {return moment(data).format("YYYY-MM-DD HH:mm:ss");} },{ data: 'status',render: function (data, type, full, meta ) {if(data.trim()=="1"){return '未提交'}else if(data.trim()=="2"){return '已提交'}else if(data.trim()=="3"){return '已打印'}else if(data.trim()=="4"){return '已入庫'}else{return '未知狀態'}}? },],"ajax": function (data, callback, setting) {$.each(data.columns,function (index,value) {//匹配所有input$("#searchCondition").find('input[type="text"]').each(function () {if(value.data === $(this).attr('id')){value.search.value = $(this).val();}});//匹配所有selectdebugger$("#searchCondition select").each(function () {debuggerif(value.data === $(this).attr('id')){value.search.value = $(this).val();}});})$.ajax({type: 'POST',url: "/wmsReceiveOrder/doPageForReceiveOrderTable",cache: false,? //禁用緩存data: JSON.stringify(data),? //傳入組裝的參數contentType: "application/json",dataType: "json",success: function (result) {debuggercallback(result);}})}})}?
在js中先進行dataTables初始化，然后國際化配置，然后進行數據填充，最后進行ajax請求數據。
后臺返回數據
在后臺Controller中
@Description("獲取數據接口")@ResponseBody@RequestMapping(value = "/doPageForReceiveOrderTable")public DataTablesResultJsonVO doPageForMaterielTable(@RequestBody DataTablesJsonVO vo) {DataTablesResultJsonVO dataTablesResultJsonVO = new DataTablesResultJsonVO();try {String keyHump = vo.getColumns().get(vo.getOrder().get(0).getColumn().intValue()).getData();String keyLine = StringUtil.humpToLine(keyHump);String sortStr = vo.getOrder().get(0).getDir();Page<WmsReceiveOrderVO> pageEntity = new Page<>(vo.getStart()/vo.getLength()+1, vo.getLength());IPage<WmsReceiveOrderVO> page = receiveOrderService.pageTray(pageEntity, vo);dataTablesResultJsonVO.setData(page.getRecords());dataTablesResultJsonVO.setDraw(vo.getDraw());dataTablesResultJsonVO.setError("error");dataTablesResultJsonVO.setRecordsFiltered(page.getTotal());dataTablesResultJsonVO.setRecordsTotal(page.getSize());Log.getInst(this).debug("doPageForRoleTable test:" + vo.getColumns().get(0).getSearch());return dataTablesResultJsonVO;} catch (Exception ex) {Log.getInst().debug("獲取數據接口:",ex);dataTablesResultJsonVO.setData(new ArrayList<WmsReceiveOrderVO>());dataTablesResultJsonVO.setDraw(vo.getDraw());dataTablesResultJsonVO.setError("error");dataTablesResultJsonVO.setRecordsFiltered(0L);dataTablesResultJsonVO.setRecordsTotal(0L);Log.getInst(this).debug("doPageForRoleTable test:" + vo.getColumns().get(0).getSearch());return dataTablesResultJsonVO;}}使用封裝的DataTablesJsonVO請求對象
import lombok.Data;import java.io.Serializable; import java.util.List; @Data public class DataTablesJsonVO implements Serializable{private Long draw;private List<DataTablesColumnsJsonVO> columns;private List<DataTablesOrderJsobVO> order;private Long start;private Long length;private DataTablesOrderJsobVO search; }
其中DataTablesColumnsJsonVO
DataTablesOrderJsobVO
import lombok.Data;import java.io.Serializable;@Data public class DataTablesOrderJsobVO implements Serializable {private Long column;private String dir; }使用了封裝的響應DataTablesResultJsonVO
import lombok.Data;import java.io.Serializable; import java.util.List;@Data public class DataTablesResultJsonVO<T> implements Serializable {private Long draw;private Long recordsTotal;private Long recordsFiltered;private List<T> data;private String error; }要顯示的數據通過receiveOrderService.pageTray(pageEntity, vo);
查詢獲取。
總結
以上是生活随笔為你收集整理的SpringBoot+Thymeleaf+DataTables实现数据的查询与显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MyBatisPlus中删除方法dele
- 下一篇： SpringBoot加itext实现PD