目录

​​介绍 ​​

​​后台接口api参数​​

​​后台接口返回数据​​

​​先上公共包代码​​

​​public  ajax回调服务​​

​​cookie操作​​

​​分页uitll js代码​​

​​接下来就是核心的调用 pageUitl 和 回调ajax的 地方了​​

​​获取服务并且使用下一次操作的回调方法出现表格，和再次启用回调出下一页分页操作的js​​

​​代码介绍​​

​​调用代码位置​​

​​html代码核心代码​​

​​代码思路介绍​​

​​css对应的代码​​

​​思路介绍​​

​​css 表格样式 加 出发事件，这是奇数行 偶数行 和悬浮事件，省去到js中设置​​

​​再献上一个批量修改页面表格中 tr td div 中 或 tr td 中的值，判断值超过几位数后变成 添加一个title字段，另外展示改成 几位数加...展示​​

​​ 加送个便于迁移的css ,直接用这个​​

介绍 

之前介绍过一款博客，这次在这基础上进行升级更加细化，更加容易嵌入各类型系统，方便调用

再下边有js调用的思路介绍

还有css 和页面的思路介绍 

持续更新 

后台接口api参数

后台接口返回数据

先上公共包代码

public  ajax回调服务

/**
 * 获取数据服务 
 * 示例
   var params = {
            url:"/spccService/sendCheckCode",
            data:{phoneNum:document.getElementById("phoneNum").value},
            callback: function(){alert(data=='success'?'发送成功':'发送失败');}
        };
        getService(params);
 * 
 * @param {*} params  参数
 */
var getService = function(params) {
    params.data.serviceToken = getCookie("serviceToken");
    params.data.time = getCookie("time");
    params.data.userid = getCookie("userid");
    params.data.serverToken = getCookie("serverToken");
    $.ajax({
        type: "POST",
        url: ServerUrl + params.url,
        data: params.data,
        async: true,
        //crossDomain: true,
        // xhrFields: {withCredentials: true},
        success: function(data) {
            if (data == "illegal token") {
                alert("非法请求");
                delCookie("time");
                delCookie("userid");
                delCookie("type");

                window.location = nowHtmlAddressorigin + "/index.html?login=false"
                return;
            }
            params.callback(data);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            // 状态码
            console.log(XMLHttpRequest.status);
            // 状态
            console.log(XMLHttpRequest.readyState);
            //错误信息   
            console.log(textStatus);
            alert("异常");
            delCookie("time");
            delCookie("userid");
            delCookie("type");
           

            window.location = nowHtmlAddressorigin + "/index.html?login=false"
            return;
        }
    });
}

cookie操作

//设置cookie：
function setCookie(name, value) {
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString();
}

//读取cookie：
function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) {
        return unescape(arr[2]);
    } else {
        return null;
    }
}

//删除cookie：
//cookie没有提供删除cookie的方法，我们可以设置cookie的参数manAge=0让cookie过期，来达到删除cookie的效果。
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null)
        document.cookie = name + "=" + cval + ";path=/;expires=" + exp.toGMTString();
}

分页uitll js代码

//公共数据
var superdata = {
    //分页使用
    pageUtil:' <label id="pagingUitl">'
                    +' <span>首页</span>'
                    +' <span>上一页</span>'
                    +' 第：<input type="text" id="numPage" style="width:30px;" value="1"/>'
                    +' 共:<label id="maxpage">1</label>页'
                    +' <span>跳至页</span>'
                    +' <span>下一页</span>'
                    +' <span>尾页</span>'
                    +' 当前页：<label id="nowLineNum">1</label>条'
                    +' 共:<label id="totalNum">1</label>条'
              +'</label>',
              
};

/**
 * 添加分页公共分页
 * 
 * test 调用示例
 * 
 *   var pageParams ={
        pageNum:pageNum //当前页数
        ,pageCount:pageCount //一页展示条数
        ,totalNum:totalNum //总条数
        ,id:"#infobody1 .pageUitl" //展示位置
        ,callbackFun:"getUserTask(params.pageNum,params.pageCount);"//回调方法
    }
    addPagingUitl(pageParams);
 * 
 * 
 * @param { 
    *   pageNum :页数
    *   ,pageCount: 一页条数
    *   ,totalNum :总条数
    *   ,id 展示位置
    *   callbackFun:回调方法
    *  } params 
 * 
 *
 */
var addPagingUitl = function(params){
   
    //------------------------------------------1.获取参数---------------------  

    //当前页(必传)
    var pageNum = params.pageNum==null?0:params.pageNum;
    //每页展示条数(必传)
    var nowPageConet = params.pageCount==null?10:params.pageCount;
    //总条数(必传)
    var totalNum = params.totalNum==null?16:params.totalNum;

    //------------------------------------------2.渲染分页页面---------------------  
    //渲染页面 页数 一页条数 总条数  总页数 
    $(params.id).empty().append(superdata.pageUtil);
    
    //------------------------------------------3.添加分页值---------------------  
    //添加分页参数值
    $(params.id+' #pagingUitl #numPage').attr("value",pageNum);//当前页
    $(params.id+' #pagingUitl #maxpage').text(Math.ceil(totalNum/nowPageConet));//总页数
    $(params.id+' #pagingUitl #nowLineNum').text(nowPageConet);//一页展示条数
    $(params.id+' #pagingUitl #totalNum').text(totalNum);//总条数
    
    //------------------------------------------4.设置样式---------------------  
    //设置分页样式 居中
    $(params.id+" #pagingUitl").css("margin-left",((nowbodyWidth-550)/2)+"px")

    //------------------------------------------5.设置样式---------------------  
    //按钮事件 
    $(params.id+" #pagingUitl span").click(function(){
        var nowText = $(this).text();
        var pageNum = parseInt($(params.id+" #pagingUitl #numPage").val());//当前页
        var maxpage = parseInt($(params.id+" #pagingUitl #maxpage").text());//总页数

        if(nowText == "首页"){
            params.pageNum = 1;

        }else if(nowText == "上一页"){
            if(pageNum == 1){
                alert("已经是第一页了！");
                return;
            }
            params.pageNum = pageNum-1;

        }else if(nowText == "下一页"){
            if(pageNum == maxpage){
                alert("已经是最后一页了！");
                return;
            }
            params.pageNum = pageNum+1;

        }else if(nowText == "尾页"){
            params.pageNum = maxpage;

        }else if(nowText=="跳至页"){
            if(pageNum>maxpage || pageNum==0){
                alert("请输入正确页数！");
                return;
            }
            params.pageNum = pageNum;
        }
        eval（params.callbackFun);//执行后回调方法
    });
   

}

接下来就是核心的调用 pageUitl 和 回调ajax的 地方了

获取服务并且使用下一次操作的回调方法出现表格，和再次启用回调出下一页分页操作的js

var nowOnlyQueryUserid = "";//当前操作对应用户
var getUserTask1 = function(pageNum,pageCount) {
    var params = {
        url: "/deptService/qyglservice/adminQueryUserData",
        data: {
            pageNum: pageNum
            ,pageCount: pageCount
            ,userPhone  :$("#userPhone").val()
            ,userName  :$("#userName").val()
            ,queryid  :$("#queryid1").val()
        },
        callback: function(data) {  getUserTaskCallback1(data,pageNum,pageCount); }
    };
    getService(params);
}

var getUserTaskCallback1 = function(data,pageNum,pageCount) { //展示表格
    var params = {
            element: "#body2 .infoIn",
            data: data.data,
            totalNum: data.totalCount,
            thead: ["编号", "名称"     , "手机号" , "创建时间"   , "标签", "备注","密录失败","验证败    ","操作"],
            tbody: ["id"  , "name", "phone", "create_time", "label", "remarks","passwornumber","phonlogin_number"],
            callback: function() { console.log(data) }
        }
        // public.tableUitl(params);
        //需要特别操作的写单独内容
    var element = params.element,
        data = params.data,
        thead = params.thead,
        totalNum=params.totalNum,
        tbody = params.tbody;
    // callback=params.callback;

    //表格内容info    
    var htmlTheadVal = "";
    var htmlTbodyVal = "";
    for (let i = 0; i < thead.length; i++) { //写入表格头
        htmlTheadVal += '<th>' + thead[i] + '</th>';
    }
    for (let i = 0; i < data.length; i++) { //写入表格体
        htmlTbodyVal += '<tr>';
        for (let j = 0; j < tbody.length; j++) {
            var nowHtml = "";
            if (tbody[j].indexOf('time') != -1) {
                nowHtml = formatDateTime(data[i][tbody[j]]);
            }else if(tbody[j]=="phone"){
                nowHtml = data[i][tbody[j]]+"****";
            }else{
                nowHtml = data[i][tbody[j]] == null ? " " : data[i][tbody[j]];
            }
            htmlTbodyVal += '<td><div>' + nowHtml + '</div></td>';
            if (j == tbody.length - 1) {
                nowHtml = '<span idkey="' + data[i]["id"] + '">查看权限</span>';
                htmlTbodyVal += '<td><div>' + nowHtml + '</div></td>';
            }
        }
        htmlTbodyVal += '</tr>';
    }
    var htmlThead = "<thead><tr>" + htmlTheadVal + "</tr></thead>";
    var htmlTbody = "<tbody>" + htmlTbodyVal + "</tbody>";
    var htmlTable = "<table>" + htmlThead + htmlTbody + "</table>";

    $(element).empty().append(htmlTable);
    
    $(element + ' span').click(function() {
        var idkey = $(this).attr("idkey");
        nowOnlyQueryUserid = idkey;
        var params = { //查看版本具体数据
            url: "/deptService/qyglservice/queryUserAllDept",
            data: {
                pageNum: 1,
                pageCount: 200,
                queryid: idkey
            },
            callback: function(data) {
                //展示权限页面
                clearAllBodyOpenOnly("#onlyUserAlldept");
                getUserTaskDeptCallback1(data);
            }
        };
        getService(params);
    });

    //加载分页
    var pageParams ={
        pageNum:pageNum
        ,pageCount:pageCount
        ,totalNum:totalNum
        ,id:"#body2 .pageUitl"
        ,callbackFun:"getUserTask1(params.pageNum,params.pageCount);"
    }
    addPagingUitl(pageParams);

}

代码介绍

1.最上边显示走了一个js的ajax回调，

2.传入值的时候要带上页面中查询的参数，直接放入ajax的参数中

3.带上分页参数，这个在后边的分页回调中会使用上

4.返回的数据通过调用回调展示到表格中，表格通过js 字符串拼接出来

5.在页面加载完毕后加载调用分页回调，只有最好加载，的才能调用之前页面js document中的内容

6.所以这里后调用的都要在  $(element).empty().append(htmlTable);之后写

7.这里还有表格中的点击事件，如果还有其他事件都可以在这里添加，回调中可以写任意东西

8.也可以在回调的位置直接写内容，不用回调方法

9.各种写法都方便扩展，可随意扩展

10.使用的时候，直接先吧前几个js拷贝，然后吧上边这个js直接拷贝使用即可

11.这里使用到了 公共变量 nowOnlyQueryUserid  这个是可以自定义的，不推荐使用可以使用回调代值

12. ok总的思路就是这些，有需要沟通的随时沟通

调用代码位置

//公共js包中方这个
var globalNowPage={pageNum:1,pageCount:10}
//单独页面中设置这个
globalNowPage.pageNum=1;
globalNowPage.pageCount=10;  
//调用上边的方法，要传入分页，第一页和对应的每页展示条数
$("#body2 .search #submit").click(function(){//用户管理搜索
        getUserTask1(globalNowPage.pageNum,globalNowPage.pageCount);
    });
//除搜索调用外还有，初始点击页面的时候加载，页调用getUserTask1即可

html代码核心代码

 <!-- 在线用户管理模块 -->
    <div class="infobody" id="body1">
        <!-- 标题 -->
        <div class="title"><label>在线用户管理</label></div>
        <!-- 搜索 -->
        <div class="search">
            用户id：<input type="text" id="user_id">
            访问ip：<input type="text" id="requestip">
            用户名：<input type="text" id="username">
            在线状态：<select id="onlineType">
                <option value="">全部</option>
                <option value="1">在线</option>
                <option value="0">离线</option>
            </select>
            在线id:<input type="text" id="queryid">
            <input type="button" id="submit" value="搜索" />
        </div>
        <!-- 内容 -->
        <div class="infoIn"></div>
        <!-- 分页 -->
        <div class="pageUitl"></div>
    </div>

代码思路介绍

1.这写代码中第一个div  class="infobody" id="body1"  

2. class=infobody 在css设置样式  进行统一化，id=body1  进行单独化

3.js中加载或操作的时候使用id进行加载加事件 点击悬浮等等

4.让这个代码随意嵌入任何位置，可从infobody 这个css进行修改，宽度嵌入到对应的页面中

5.或通过iframe的方式进行加载 infobody 设置最大宽度即可，然后嵌入页面的设置宽高大小即可

6. 使用 iframe的优势及是 在写项目大后便于多人开发，没人一个单独的代码文件，嵌入到总的iframe的服务中去

7. 总页面iframe 进行对应的按钮绑定对应的页面地址，加载，这样会很方便加载宽度页会很方便的自动适应起来 ok

css对应的代码

.infobody{
    background:#000;
}
.infobody .title{
    height:30px;
    line-height:30px;
    background:rgb(197, 194, 194);
    padding-left:10px;
}
.infobody .search{
    line-height:30px;
    background:rgb(216, 211, 211);
    /* padding-left:10px;   */
      float: left;
    width: 100%;
}
.infobody .search input{
   width:100px;
}
.infobody .infoIn{
    float: left;
    width: 100%;
    background:rgb(216, 211, 211);
}
.infobody .pageUitl{ float: left;
    width: 100%;
    height:50px; line-height:50px;
    background:rgb(167, 163, 163);
}
table{
    width:100%;
    text-align:center;
    line-height:30px;
}

思路介绍

这是一些基础代码，可再进行扩展代码，

总的思路是 宽度定义好即可

css 表格样式 加 出发事件，这是奇数行 偶数行 和悬浮事件，省去到js中设置

/* 奇数行 */
table tbody tr:nth-child(odd){
    background: #ffffff;
}
/* 偶数行 */
table tbody tr:nth-child(even){
    background: #EBF5FF;
    /* transform:background 0.6s ; */
    /* transition:background 1s ; */
}
/* 悬浮事件 */
#tableajzx1GRWQZ table tbody tr:hover{
    /* background:#def4ff; */
    background:#cfefff;
}  

再献上一个批量修改页面表格中 tr td div 中 或 tr td 中的值，判断值超过几位数后变成 添加一个title字段，另外展示改成 几位数加...展示

//遍历全文tr td  超过字数的后边用... 当前tr添加 title 
/**
 * 遍历全文tr td  超过字数的后边用... 当前tr添加 title 
 * 
 * updateTableTbodyTrTdInfo("table tbody tr td",7);
 * @param {*} ele tbody元素
 * @param {*} num 字数
 */
var updateTableTbodyTrTdInfo = function(ele,num){
    console.log(ele)
    $.each($(ele),function(k,y){
        var nowRest = $(this);
        if(nowRest.text().length>num){
            nowRest.attr("title",nowRest.text());
            nowRest.text(nowRest.text().substr(0,num)+"...");
        }else{
            //不做任何操作
        }
       
    });
}

这个再这里好像没用，这个使用方法也如上边说的一样

加载放到js最后调用即可，快速批量更新页面表格内容

 加送个便于迁移的css ,直接用这个

.search input,select{
    width:100px;
    height:26px;
    line-height:26px;
    margin:10px auto;
}
.search {
    padding-left:10px;
    text-align: left;
}
.search #submit{
    background-color: #2C8CF0;
    color:#fff; 
    cursor:pointer;
}

极限升级 更方便的调用方式js

var getDataToTabeleTask1 = function(pageNum,pageCount) {
    globalNowPage.pageNum=pageNum;
    globalNowPage.pageCount=pageCount;
    var params = {
        url: "/Service/query?zp_wqr_type=sxs",
        data: {
            pageNum:  globalNowPage.pageNum
            ,pageCount: globalNowPage.pageCount
            ,zp_name  :$("#queryName").val()
            ,queryid  :$("#queryId").val()
            ,zp_zuozhe  :$("#queryAuthor").val()
        },
        callback: function(data) {  
            //表格加载数据
            addTableGrewqrYXBGV2(data);

            //字数多得简字+...
            updateTableTbodyTrTdInfo(" #tableajzx1GRWQZ table tbody tr td div",7);
            //加载分页
            var pageParams ={
                pageNum: globalNowPage.pageNum
                ,pageCount:globalNowPage.pageCount
                ,totalNum:data.totalCount
                ,id:".index3 .pageUitl"//新模块修改位置
                ,callbackFun:"getDataToTabeleTask1(params.pageNum,params.pageCount);"//新模块修改位置
            }
            addPagingUitl(pageParams);
        }
    };
    getService(params);
}
//搜索
$(".index3 #submit").click(function(){
    getDataToTabeleTask1(globalNowPage.pageNum,globalNowPage.pageCount);
});

success  ok

持续更新