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