JS前端分页的具体例子

琪公子呀

已于 2022-03-23 10:20:27 修改

阅读量387

点赞数

分类专栏： JavaScript 文章标签： vue.js javascript 前端开发语言 html

于 2022-03-22 21:22:34 首次发布

本文链接：https://blog.csdn.net/Benxiaohai_311/article/details/123671596

版权

JavaScript 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

login.js ------> 登录页面

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="TTX-AFU">
    <meta name="Copyright" content="Babelstar">
    <meta name="Description" content="">
    <meta name="Keywords" content="">
    <meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
    <title>登录页面</title>
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <script src="pro/protobuf.min.js"></script>
    <script src="pro/common.js"></script>
    <script src="js/md5.js"></script>
    <!-- 我添加的表格的样式 -->
    <style>
        #listData button{
            width: 120px;
            height: 30px;
            background-color: rgb(114, 165, 73);
            color: white;
            font-size: 14px;
            border: 1px solid rgb(114, 165, 73);
            border-radius: 5px;
        }
        #sortTime button{
            width: 200px;
            height: 30px;
            background-color: rgb(114, 165, 73);
            color: white;
            font-size: 14px;
            border: 1px solid rgb(114, 165, 73);
            border-radius: 5px;
        }
        #sortTime span {
            font-size: 18px;
        }
        #sortTime input{
            width: 250px;
            height: 30px;
            border-radius: 20px;
            border: 1px solid #c7c4c4;
        }
        #page button{
            width: 70px;
            height: 30px;
            background-color: rgb(114, 165, 73);
            color: white;
            font-size: 14px;
            border: 1px solid rgb(114, 165, 73);
            border-radius: 5px;
        }
        #page input{
            width: 100px;
            height: 30px;
            border-radius: 20px;
            border: 1px solid #c7c4c4;
            text-align: center;
        }
        #page span{
            font-size: 16px;
        }
        #page span button{
            margin: 0 2px;
        }
        #showTable table tr th {
            background-color:rgb(114, 165, 73);
            color: white;
            font-weight: bold;
        }
        #showTable table tr td{
            text-align: center;
        }
    </style>
    <!-- 登录的样式 -->
    <style>
        #modLoginWrap {
            position: absolute;
            margin: 0 auto;
        }
        #loginAccount,
        #loginPassword,
        #phraseLogin{
            width: 250px;
            height: 30px;
            border-radius: 10px;
            border: 1px solid #c7c4c4;
        }
        .login-wrap {
            width: 100%;
            left:0;
            top: 0;
        }
        .login-wrap .username,
        .login-wrap #phraseLoginwarp{
            margin-bottom:15px;
        }
        #loginSubmit {
            width: 70px;
            height: 30px;
            background-color: rgb(114, 165, 73);
            color: white;
            font-size: 14px;
            border: 1px solid rgb(114, 165, 73);
            border-radius: 5px;
            margin-left: 150px;
        }
    </style>
</head>

<body>
    <div style="display:inline;" id="loginPanel" class="login-panel">
        <div id="login">
            <div id="modLoginWrap" class="mod-qiuser-pop">
                <div style="display: none;" class="login-error login-error-msg">
                    <span id="spanLoginErrorTip"></span>
                </div>
                <dl class="login-wrap">
                    <dt><span id="loginTitle"></span></dt>
                    <dd class="username">
                        <div class="quc-clearfix login-item">
                            <label for="loginAccount">账号：</label>
                            <span class="input-bg">
                                <input type="text" value="pqy" placeholder="用户名" tabindex="1" id="loginAccount" name="loginAccount"
                                    autocomplete="off" maxlength="32" class="ipt tipinput1">
                            </span>
                        </div>
                    </dd>
                    <dd class="password">
                        <div class="quc-clearfix login-item">
                            <label for="loginPassword">密码：</label>
                            <span class="input-bg">
                                <input type="text" value="pqy123456" placeholder="请输入您的密码" tabindex="2" id="loginPassword"
                                    name="loginPassword" maxlength="20" autocomplete="off" class="ipt tipinput2">
                            </span>
                            <img class="clickPassword"/>
                        </div>
                    </dd>
                    <dd class="rem" id="phraseLoginwarp">
                        <label for="phraseLogin">
                            <span id="spanYzm">验证码</span>
                        </label>
                        <span class="verify-code">
                            <input type="text" tabindex="3" placeholder="验证码" maxlength="5" id="phraseLogin"
                                name="phrase" class="ipt1 tipinput1" autocomplete="off">
                        </span>
                        <span class="yz">
                            <img width="99" height="35" title="" id="lwm" onclick="codeLoad()">
                        </span>
                    </dd>
                    <dd class="submit">
                        <span>
                            <input type="button" onfocus="this.blur()" id="loginSubmit" value="用户登录"
                                class="btn-login quc-psp-gstat"/>
                        </span>
                    </dd>
                </dl>
                <div id="listData">
                    <button>获取列表数据</button>
                </div>
                <br/>
                <div id="sortTime"></div>
                <br/>
                <div id="showTable"></div>
                <br/>
                <div id="page">
                    <button onclick="startPage()">首页</button>
                    <button onclick="prevPage()">上一页</button>
                    <input id="input" value="1"/>
                    <button onclick="nextPage()">下一页</button>
                    <button onclick="lasterPage()">末页</button>
                    <span>共<span id="totalNumber"></span>页/共<span id="totalPage"></span>条数据</span>
                    <span id="btns"></span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(document).ready(function () {
        $("#loginSubmit").click(function () {
            var userName = $("#loginAccount").val();
            var passWord = $("#loginPassword").val();
            var code = $("#phraseLogin").val();
            if (userName == '' || passWord == '' || code == '') {
                alert("不能为空");
            } else {
                isLogin(userName, passWord, code);
            }
        });
        $('#listData').click(function () {
            var userName = $("#loginAccount").val();
            if (userName) {
                getListData(userName);
            }
        });
        $('#input').bind('keyup', function(event) {
            if (event.keyCode == "13") {
                //回车执行查询
                searchNum();
            }
        });
    });
    var objCode; // 存放验证码信息
    var ip = "http://tlcc.tl-tek.com:7080";
    function codeLoad() {
        var url = ip + "/GenerateVerificationCode";
        proPostLogin(url, "", "productMaintain.VerifyCodeMessage", null, function (code, obj) {
            if (code == 200) {
                objCode = obj;
                $("#lwm").attr("src", objCode.base64Blob);
            } else {
                alert(obj.errDes);
            }
        });
    }
    codeLoad(); // 运行验证码接口
    var objLogin; // 存放登录的信息
    // 登录
    function isLogin(name, pass, code) {
        var url = ip + "/UserLogin";
        var md5Str = md5(pass);
        objCode.verifyValue = code;
        var obj = {
            userName: name,
            userPwd: md5Str,
            platformType: 1,
            verifyMessage: objCode
        };
        proPostLogin(url, "productMaintain.UserLogInRequest", "productMaintain.UserLogInResponse", obj, function (code, obj) {
            objLogin = obj;
            if (code == 200) {
                var local = window.localStorage;
                if (!local) {
                    alert("浏览器不支持,localstorage");
                    return;
                } else {
                    alert("登录成功");
                }
            } else {
                codeLoad();
                alert("登录失败");
            }
        });
    }
    let showListData; // 存放表格数据
    let pageNum = 1; // 默认展示第一页
    let pageSize = 10; // 每页展示的条数
    let totalPageNumber; // 总页数
    // 展示表格列表数据并分页
    function getListData (name) {
        var url = ip + "/SearchUserOrder";
        var objName = { 
            userName: name,
            userGuid: objLogin.sessionId
        }
        let objArr = {
            httpUserInfo: objName
        }
        proPostLogin(url, "productMaintain.SearchCustomOrderRequest", "productMaintain.SearchCustomOrderResponse", objArr, function (code, obj) {
            if (code === 200) {
                showListData = obj.orderInfo;
                html(showListData, 1);
                // 分页栏
                totalPageNumber =  Math.ceil(showListData.length / pageSize);
                document.getElementById("totalNumber").innerHTML = totalPageNumber;
                document.getElementById("totalPage").innerHTML = showListData.length;
                getPageNumber(totalPageNumber);
                let sort = `<button onclick="reverseOrder()">orderStartTime时间倒序排序</button>
                    <button onclick="positiveSequence()">orderStartTime时间正序排序</button>
                    <span>搜索<span>
                    <input id="searchInp" placeholder="搜索productDesc关键字"/>
                    <button onclick="search()">search</button>`;
                $('#sortTime').html(sort);

            } else {
                alert('登录有误，导致数据有问题');
            }
        });
    }
    // 展示在html上的表格
    function html (showListData, k) {
        let html = ``;
        html += `<table border="1" height="500px" width="100%" cellspacing="0" cellpadding="0" style="border:1px solid #f6f6f6">
                    <tr>
                        <th>id</th>
                        <th>customId</th>
                        <th>expectedOutTime</th>
                        <th>license</th>
                        <th>materialId</th>
                        <th>modelType</th>
                        <th>number</th>
                        <th>orderId</th>
                        <th>orderStartTime</th>
                        <th>productDesc</th>
                    </tr>`;
        for (let i = 0; i < 10; i++) {
            html += `<tr><td>${k}</td>`;
            html += `<td>${showListData[i].customId}</td>`;
            html += `<td>${showListData[i].expectedOutTime}</td>`;
            html += `<td>${showListData[i].license}</td>`;
            html += `<td>${showListData[i].materialId}</td>`;
            html += `<td>${showListData[i].modelType}</td>`;
            html += `<td>${showListData[i].number}</td>`;
            html += `<td>${showListData[i].orderId}</td>`;
            html += `<td>${showListData[i].orderStartTime}</td>`;
            html += `<td>${showListData[i].productDesc}</td></tr>`;
            k++;
        }
        html += `</table>`;
        $('#showTable').html(html);
    }
    // 上一页
    function prevPage () {
        if (pageNum > 1) {
            pageNum--;
            let from = (pageNum - 1) * pageSize;
            let to = pageNum * pageSize;
            let arr = showListData.slice(from, to);
            html(arr, from + 1);
            $('#input').val(pageNum);
            getPageNumber(totalPageNumber);
        } else {
            alert('已经是第一页了');
        }
    }
    // 下一页 
    function nextPage () {
        if (totalPageNumber > pageNum) {
            pageNum++;
            let from = (pageNum - 1) * pageSize;
            let to = pageNum * pageSize;
            let arr = showListData.slice(from, to);
            html(arr, from + 1);
            $('#input').val(pageNum);
            getPageNumber(totalPageNumber);
        } else {
            alert('到底啦！！！');
        }
    }
    // 搜索框
    function searchNum () {
        let value = parseInt($('#input').val());
        let from = (value - 1) * pageSize;
        let to = value * pageSize;
        let arr = showListData.slice(from, to);
        html(arr, from + 1);
        pageNum = value;
        getPageNumber(totalPageNumber);
    }
    // 获取页码
    function getPageNumber (totalP) {
        // 点击页数
        let btns = ``;
        if (totalP <= 5) {
            for (let i = 1; i <= totalP; i++) {
                btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
            }
        } else {
            let value = parseInt($('#input').val());
            if (value <= 5) {
                for (let i = 1; i <= 5; i++) {
                    btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
                }
                if (value <= totalP - 2) {
                    //最后一页追加“...”代表省略的页
                    btns += "<span>...</span>";
                }
                for (let i = totalP - 2; i <= totalP; i++) {
                    btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
                }
            } else {
                // 前两页始终显示
                for (let i = 1; i <= 2; i++) {
                    btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
                }
                btns += "<span>...</span>";// 2页码后面用...代替部分未显示的页码
                if (value + 1 == totalP) {
                    //当前页+1等于总页码
                    for(i = value - 1; i <= totalP; i++){
                        //“...”后面跟三个页码当前页居中显示
                        btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
                    }
                }else if (value == totalP) {
                    //当前页数等于总页数则是最后一页页码显示在最后
                    for(i = value - 2; i <= totalP; i++){
                        //...后面跟三个页码当前页居中显示
                        btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
                    }
                }else{
                    //当前页小于总页数，则最后一页后面跟...
                    var large = value + 1, small = value - 1;
                    for(i = small; i <= large; i++){
                        //value + 1页后面...
                        btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
                    }
                    btns += "<span>...</span>";
                    for (let i = totalP - 2; i <= totalP; i++) {
                        btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
                    }
                }
            }
        }
        $('#btns').html(btns);
    }
    // 首页数据
    function startPage () {
        pageNum = 1;
        let from = (pageNum - 1) * pageSize;
        let to = pageNum * pageSize;
        let arr = showListData.slice(from, to);
        html(arr, from + 1);
        $('#input').val(pageNum);
        getPageNumber(totalPageNumber);
    }
    // 末页数据
    function lasterPage () {
        pageNum = totalPageNumber;
        let from = (pageNum - 1) * pageSize;
        let to = pageNum * pageSize;
        let arr = showListData.slice(from, to);
        html(arr, from + 1);
        $('#input').val(pageNum);
        getPageNumber(totalPageNumber);
    }
    // 点击页数
    function getBtnNumber (i) {
        pageNum = i;
        let from = (pageNum - 1) * pageSize;
        let to = pageNum * pageSize;
        let arr = showListData.slice(from, to);
        html(arr, from + 1);
        $('#input').val(i);
    }
    // orderStartTime时间正序排列
    function positiveSequence () {
        // 姓名按字符串编码降序排序
        // pcompare函数 第一个参数为需要排序的字段 第二个参数 false 为降序 true为升序
        showListData  = showListData.sort(pcompare("orderStartTime",true));
        html(showListData, 1);
        pageNum = 1;
        $('#input').val(1);
    }
    // orderStartTime时间倒序排列
    function reverseOrder () {
        showListData = showListData.sort(pcompare("orderStartTime",false));
        html(showListData, 1);
        pageNum = 1;
        $('#input').val(1);
    }
    // 时间排序方法
    function pcompare(prop,rev) {
        // 第二个参数没有传递，默认升序排序
        if(rev === undefined) {
            rev = 1;
        }else {
            rev = rev ? 1: -1;
        }
        return function(obj1,obj2) {
            // 方括号也是访问对象属性的一种方式，优点是可以通过变量访问。
            // 常规写法是 var val1 = obj1.prop;var val2 = obj2.prop;,但是这种不支持变量写法，所有这里不适用
            var val1 = obj1[prop], val2 = obj2[prop];
            // 若是升序排序，此时rev=1,rev*-1=-1,等价于return val1 < val2 ? -1 : 1,，即val1<val2时，val1放在val2前面，否则放后面
            // 若是降序排序，下面句子等价于return val1 < val2 ? 1 : -1，即val1<val2时，val1放在val2后面，否则放在val2前面
            return val1 < val2 ? rev*(-1) : rev*1;
        }
    }
    // 搜索文本框关键字
    function search () {
        let value = $('#searchInp').val();
        let arr = showListData.filter(item => {
            if (item.productDesc.indexOf(value) !== -1) {
                return item;
            }
        });
        html(arr, 1);
        let totalP = Math.ceil(arr.length / pageSize);
        getPageNumber(totalP);
        document.getElementById("totalNumber").innerHTML = totalP;
        document.getElementById("totalPage").innerHTML = arr.length;
    }
</script>

</html>

引入的功能类，写接口 -----> common.js


function Logger(module) {
    this.module = module;
}

Logger.prototype.log = function (line) {
    console.log("[" + this.currentTimeStr() + "][" + this.module + "]" + line);
}

Logger.prototype.logError = function (line) {
    console.log("[" + this.currentTimeStr() + "][" + this.module + "][ER] " + line);
}

Logger.prototype.logInfo = function (line) {
    console.log("[" + this.currentTimeStr() + "][" + this.module + "][IF] " + line);
}

Logger.prototype.logDebug = function (line) {
    console.log("[" + this.currentTimeStr() + "][" + this.module + "][DT] " + line);
}

Logger.prototype.currentTimeStr = function () {
    var now = new Date(Date.now());
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    var hour = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();
    var ms = now.getMilliseconds();
    return year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec + ":" + ms;
}

function Logs(obj){
	console.error(obj);
}

function LogsError(obj){
	 console.error(obj);
}

//编码
function b64Encode (str) {
	return btoa(encodeURIComponent(encodeURI(str)));
}
//解码
function b64Decode (str) {
	return decodeURI(decodeURIComponent(atob(str)));
}

function getQueryString(name) { 
	   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
	   var r = window.location.search.substr(1).match(reg);
	   if(name=='pass'){
	   	  // console.error("query-y->"+r[2])
	   	   var uri=decodeURI(r[2]);
		 //  console.error("query-de->"+uri)
	   	   var pass=b64Decode(r[2]);
		   if (r != null) return pass; return null;
	   }else{
		   if (r != null) return decodeURI(r[2]); return null;
	   }
 }

function getQueryStringOld(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	var r = window.location.search.substr(1).match(reg);
	if (r != null) return decodeURI(r[2]); return null;
}


function  getUser() {
	var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));
	if(userItem!=null){
		return userItem;
	}else{
        return null;
	}
}

function  getUserInfo() {
	var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));
	if(userItem!=null){
		return {UserName:userItem.name,UserGuid:userItem.guid};
	}else{
		return null;
	}
}

function  getUserInfo_User() {
	var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));
	if(userItem!=null){
		return {userName:userItem.name,userGuid:userItem.guid};
	}else{
		return null;
	}
}

function  getServerIp() {
	var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));
    if(userItem!=null){
		return "http://"+userItem.ip+":"+userItem.port;
	}
	return null;
}

function  getServerIp1() {
    var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));
    if(userItem!=null){
        return "http://"+userItem.ip1+":"+userItem.port1;
    }
    return null;
}

function getApplicationList(key){
	var tl_la=localStorage.getItem(key);
	var las=[];
	if(tl_la!=null && tl_la.length>0){
		var itemlas= JSON.parse(tl_la);
		for(var i=0;i<itemlas.length;i++){
			las.push(itemlas[i].value)
		}
	}
	return  las;
}

//0 预览 1历史回放 2轨迹
function  getIpPort(index) {
	var user=JSON.parse(sessionStorage.getItem("tl_login"));
	var  server="";
	if(user.serverInfoResp!=null && user.serverInfoResp.length>0){
		for(var i=0;i<user.serverInfoResp.length;i++){
				if(index==i){
					server=user.serverInfoResp[i].serverIp+":"+user.serverInfoResp[i].serverPort;
				}
		}
	}
	return server;
}

var rootProDevice=null;

function sendPro(root,xhr,sendKey,obj){
	if(obj!=null){
		console.error(obj); //js
        //sendKey  UserLogInRequest
		var WSMessage = root.lookupType(sendKey);
		var wsmessage = WSMessage.create(obj);
		var buffer = WSMessage.encode(wsmessage).finish();
		console.error(buffer);
		xhr.send(buffer);
	}else{
		xhr.send();
	}
}

function proPostLogin(url,sendKey,resultKey,body,CallResult){
	var xhr = new XMLHttpRequest();
	if(window.location.href.indexOf("https://")==0){
		url=url.replace("http://","https://");
	}
	xhr.open('POST', url, true);    // 也可以使用POST方式，根据接口
	// 设置POST请求的请求头
	//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
	xhr.setRequestHeader("Content-Type", "application/x-protobuf")
	xhr.responseType = "blob";  // 返回类型blob
	// 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
	xhr.onload = function () {
		// 请求完成
		var blob = this.response;
		if (this.status == 200) {
			if(resultKey==null){
				CallResult(200,null);
			}else{
				//resultKey 表示使用  proto  里面的 mes方法 VerifyCodeMessage
				var WSMessage = rootProDevice.lookupType(resultKey);
				var reader = new FileReader();
				reader.readAsArrayBuffer(blob);
				reader.onload = function (e) {
					var buf = new Uint8Array(reader.result);
					var responseUser = WSMessage.decode(buf);
					console.log("url->"+url)
					console.log(responseUser);
					CallResult(200,responseUser);
				}
			}
		}else{
			if(blob!=null){
				var WSMessage = rootProDevice.lookupType("productMaintain.OrderGeneralResponse");
				var reader = new FileReader();
				reader.readAsArrayBuffer(blob);
				reader.onload = function (e) {
					var buf = new Uint8Array(reader.result);
					var responseUser = WSMessage.decode(buf);
					console.error("loading--->"+sendKey+"")
					console.error(responseUser)
					console.error("loading--->"+resultKey+"")
					CallResult(500,responseUser);
				}
			}else{
				CallResult(500,"");
			}
		}
	};
	if(rootProDevice==null){
		protobuf.load("pro/order.proto?r=2.3.1&r="+Math.random(),function (err, root) {
			if (err) throw err;
			rootProDevice=root;
			sendPro(rootProDevice,xhr,sendKey,body);
		});
	}else{
		sendPro(rootProDevice,xhr,sendKey,body);
	}
}

引入的数据类，转义的 ----> order.proto

syntax = "proto3";

package productMaintain;

message SearchCustomOrderRequest{
    HttpUserInfo        httpUserInfo       = 1;
    string              customId           = 2; //Custom ID
    string              orderId            = 3; //Order ID
    string              materialId         = 4;// Material Category
    string              expectStartTime    = 5;//Expect Start Time:2020-10-20 08:00:00
    string              expectEndTime      = 6;//Expect End Time:2020-10-20 23:59:59
}

message OneOrderInfo{
    string               orderId            = 1;
    string               materialId         = 2;
    string               customId           = 3;
    string               modelType          = 4;
    string               productDesc        = 5;
    string               license            = 6;
    uint32               number             = 7;
    string               orderStartTime     = 8;
    string               expectedOutTime    = 9;
    uint32               alreadyOutNumber   = 10;
    string               remark             = 11;
}

message SearchCustomOrderResponse{
    repeated     OneOrderInfo  orderInfo    = 1;
}


enum OrderPlatformType{
    PlatformUnknown             = 0;
    WebBrowser                  = 1; //Web Browser
    Android                     = 2; //Android
    IOS                         = 3; //Ios
}

//通用回复
message OrderGeneralResponse{
    uint32         requestCmdId       = 1;
    uint32         Result             = 2;
    string         appType            = 3;
    string         errDes             = 4;
}

//错误回复
message OrderErrorRequest{
    uint32         errType            = 1;
    uint32         requestCmdId       = 2;
    string         errTime            = 3;
    string         appType            = 4;
    string         errDes             = 5;
}

//用户登录
message OrderUserLogInRequest{ //发送命令UserLogin
    string               userName    = 1;
    string               userPwd     = 2;//Use Md5 Encryption
    OrderPlatformType      platformType   = 3;//Platform Type
}


message HttpUserInfo{
    string                userName             = 1;
    string                userGuid             = 2;
}


message VerifyCodeMessage{
    string                    verifyId       = 1;//
    string                    base64Blob     = 2;//When for Verify the result, no need Write base64Blob
    string                    verifyValue    = 3;//When Request,represent user write code,When response,success or fail
}

message UserLogInRequest{
    string                   userName       = 1;
    string                   userPwd        = 2;//Use Md5 Encryption
    PlatformType             platformType      = 3;//Platform Type
    VerifyCodeMessage        verifyMessage  = 4;//Verify Code
    string                   wechatid        = 5;//wechatid
}

enum PlatformType{
    PlatformUnknown             = 0;
    WebBrowser                  = 1; //Web Browser
    Android                     = 2; //Android
    IOS                         = 3; //Ios
}

message UserLogInResponse{
    string               sessionId       = 1; //Session
    string               userPrivilege   = 2;
    uint64               servTimestamp   = 3; //timestamp:1577444840
    string               formatTimestamp = 4; //2017-03-05 00:00:00
    uint32               userRole        = 5; //User Role Type
    string               userName        = 6;
}

最后的模样：

有的功能：

可以分页，每页10条数据
可以某一字段进行搜索
可以对时间进行排序

对文章有帮助的：js实现前端分页页码管理 - W.Y - 博客园

前端实现列表排序 (时间名称升序降序)_张一西

琪公子呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS前端分页的具体例子

login.js ------>登录页面<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="author"...
复制链接

扫一扫

专栏目录