java前後端分離,springboot後臺,PageHelper+dataTable分頁
阿新 • • 發佈:2019-01-06
java 後臺用springboot,後臺PageHelper 分頁 ,前端下載的模板做dutyTable分頁,模糊查詢可用
後臺返回json 資料
dao,我這裡用的是mybatis 註解的寫法 用xml的 改一下 就好了,PageHelper 分頁會自動加上 LIMIT,總數也回自動加上count(*)
外掛分頁
後臺就寫完了,sevice 就調一下就可以了, springmvc的配置分頁可能要多一點,springboot 只匯入包就可以了。
前端的話,隨便去上網下載一個模板,有list的列表頁面就可以了,然後不需要吧專案的頁面 js等什麼匯入到專案裡面去什麼的
直接用寫js的工具 開啟list的 html 寫js 呼叫後臺的介面。
這裡會出現跨域問題, 有很多種解決方式,前端後臺都可以處理,百度自己查
在html 列表頁面 加入dataTable的兩個包, jquery的包也要
然後找到頁面上的列表頁面 改一下 吧靜態的td 等資料 全刪了,留頭 然後加上我標記的
然後告訴
var dutyTable; $(document).ready(function() { dutyTable = $("#dutyListTable").dataTable({ "destroy" : true, //銷燬表格物件 "aLengthMenu":false, //使用者可自選每頁展示數量 5條或10條 "searching":false,//禁用搜索(搜尋框) "lengthChange":true, "paging": true,//開啟表格分頁 "bProcessing" : true, "bServerSide" : true, "bAutoWidth" : false, // "sort" : "position", "deferRender":true,//延遲渲染 // "bStateSave" : false, //在第三頁重新整理頁面,會自動到第一頁 // "retrieve" : true, //類似單例模式,重複利用以存在物件。 "iDisplayLength" : 5, "iDisplayStart" : 0, "select": { style: 'os', selector: 'td:first-child' }, "ordering": false,//全域性禁用排序 "ajax": { //ajax方式向後臺傳送請求 "type": "POST", "url":"http://localhost:8080/userlist", "data":{"extra_search": function(){ var level1 = $('#level1').val(); return level1; }},//傳遞的資料 "dataType" : "json" }, "columns" : [//對接收到的json格式資料進行處理,data為json中對應的key {"data":"userId"}, {"data" : "userName"} , {"data" : "userPwd"}, {"data" : "createDate",render : function(obj) { return (getMyDate(obj)); } }, {"data": "userId",render: function (obj) { return '<a onclick="del_graph(\''+obj+'\')">刪除</a>' +' ' +'<a onclick="eti_graph(\''+obj+'\')">修改</a>'; } } ], //渲染 /*"columnDefs": [ { "render": function ( data, type, row ) { return "<input type='radio' name='onDutyToId' value='" + data + "'>"; }, "targets": 0 //指定渲染列:第一列(渲染第一列為單選框,data自動匹配為 {"data":"id"}中資料) }, ],*/ "oLanguage" : { // 國際化配置 "sProcessing" : "正在獲取資料,請稍後...", "sLengthMenu" : " ", "sZeroRecords" : "沒有找到資料", "sInfo" : "從 _START_ 到 _END_ 條記錄 總記錄數為 _TOTAL_ 條", "sInfoEmpty" : "記錄數為0", "sInfoFiltered" : "(全部記錄數 _MAX_ 條)", "sInfoPostFix" : "", "sSearch" : "查詢", "sUrl" : "", "oPaginate" : { "sFirst" : "第一頁", "sPrevious" : "上一頁", "sNext" : "下一頁", "sLast" : "最後一頁" } }, // initComplete:initComplete, }); // dutyTable.fnDraw();//重繪 }); function search1(){ dutyTable.fnDraw(); };
改的地方 url 和傳的 條件查詢,沒有條件 的不加 data
點查詢 就回重新整理js 傳條件過去,
這裡是是後臺傳的json 也就是列表資料,自己改
標記的地方 是我有個時間欄位 是data 需要格式化
格式化程式碼
function getMyDate(time){ if(typeof(time)=="undefined"){ return ""; } var oDate = new Date(time), oYear = oDate.getFullYear(), oMonth = oDate.getMonth()+1, oDay = oDate.getDate(), /* oHour = oDate.getHours(), oMin = oDate.getMinutes(), oSen = oDate.getSeconds(), */ oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay);//最後拼接時間 // +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen) return oTime; }; //補0操作,當時間資料小於10的時候,給該資料前面加一個0 function getzf(num){ if(parseInt(num) < 10){ num = '0'+num; } return num; }
ok了 搞定了 後臺直接返回json 頁面直接呼叫, 不需要吧頁面放到專案中去, 涉及到跨域 處理
需要下載專案的 https://download.csdn.net/download/m0_37946870/10405378