console 命令行工具 X clear

console

function sortChange(name) {

    $("i").attr("class", $("i").attr("class").replace("icon",""));//情况所有列表的排序图标

    var iconClass = sortSerial ? "'mini sort up icon " + name +"'" : "'mini sort down icon " + name + "'";

    $("." + name + "").attr("class", iconClass);
    sortName = name;
    sortSerial = !sortSerial;
   // divPageFunction(1);
}

function SelectChange(){
    alert($(".ui.search.dropdown option:selected").val());
}

function sortDepartment(name) {
        $("#DepartmentId").attr("class", "");
        $("#Department").attr("class", "");
        var sortClass = sortSerial? "mini sort up icon" : "mini sort down icon";
        $("#" + name).attr("class", sortClass);
        sortSerial = !sortSerial;
    }

$(function(){


$(".ui.search.dropdown").html("<option value='SC0001'>SC0001</option><option value='123'>123</option><option value='123456'>123456</option><option value='1234567'>1234567</option><option value='12345678'>12345678</option><option value='12345678'>12345678</option><option value='12345678'>12345678</option><option value='12345678'>12345678</option><option value='321'>321</option><option value='321'>321</option>");



    $(".ui.dropdown").dropdown();
//    var htmlStr = ""; 
//    htmlStr += "<thead><tr>";
//    htmlStr += "<th>id</th><th>UserName</th><th>Name</th><th>sex</th><th>age</th>";
//    htmlStr += "</tr></thead>";
//    htmlStr += "<tbody>";
//    var evalJson = eval("("+jsonStr+")");

//    for(var j in evalJson)
//    {
//        htmlStr += "<tr><td>"+evalJson[j].Id+"</td><td>"+evalJson[j].UserName+"</td><td>"+evalJson[j].Name+"</td><td>"+evalJson[j].sex+"</td><td>"+evalJson[j].age+"</td></tr>"
//    }

//    htmlStr += "</tbody>";
  //  alert(htmlStr);
//    $("#showTable").html(htmlStr);

//调用分页
divPageFunction(1);

  });



var jsonStr = "[  { 'Id': 1, 'UserCode': '321', 'RoleCode': '123','UserName': 'admin', 'Password': '21232f297a57a5a743894a0e4a801fc3',    'Name': '付书云',    'cdt': '2021-06-24T00:00:00',    'sex': '男',    'age': 34,    'Email': '13266660714@163.com',    'photo': '21232f297a57a5a743894a0e4a801fc3.jpg',    'Address': '深圳',    'PhoneNum': '13266660714',    'Permission': 'administrator',    'Birthday': '1987-12-01T00:00:00',    'urlRecords': null,    'records': [{'name':'aaa'},{'name':'bbb'}]  },  {    'Id': 2,    'UserCode': '321',    'RoleCode': '123',    'UserName': 'ff',    'Password': '633de4b0c14ca52ea2432a3c8a5c4c31',    'Name': 'null',    'cdt': '0001-01-01T00:00:00',    'sex': 'null',    'age': 5,    'Email': 'null',    'photo': '633de4b0c14ca52ea2432a3c8a5c4c31.jpg',    'Address': 'null',    'PhoneNum': 'null',    'Permission': 'administrator',    'Birthday': '2016-07-30T00:00:00',    'urlRecords': null,    'records': null  },  {    'Id': 62,    'UserCode': 'null',    'RoleCode': 'null',    'UserName': 'ss',    'Password': '3691308f2a4c2f6983f2880d32e29c84',    'Name': 'null',    'cdt': '2021-10-26T17:59:40.7534001',    'sex': '男',    'age': 5,    'Email': 'null',    'photo': '3691308f2a4c2f6983f2880d32e29c84.jpg',    'Address': '深圳南山',    'PhoneNum': 'null',    'Permission': 'user',    'Birthday': '2016-07-30T00:00:00',    'urlRecords': null,    'records': null  },  {    'Id': 63,    'UserCode': null,    'RoleCode': null,    'UserName': 'yy',    'Password': '2fb1c5cf58867b5bbc9a1b145a86f3a0',    'Name': null,    'cdt': '2021-10-26T18:00:39.0284001',    'sex': null,    'age': 0,    'Email': null,    'photo': null,    'Address': null,    'PhoneNum': null,    'Permission': 'administrator',    'Birthday': '0001-01-01T00:00:00',    'urlRecords': null,    'records': null  },  {    'Id': 64,    'UserCode': null,    'RoleCode': null,    'UserName': 'fsy',    'Password': '1dde3c8cab4eb67ab637b63b9c49b90a',    'Name': null,    'cdt': '2021-11-01T19:56:25.0764001',    'sex': null,    'age': 0,    'Email': null,    'photo': null,    'Address': null,    'PhoneNum': null,    'Permission': 'user',    'Birthday': '0001-01-01T00:00:00',    'urlRecords': null,    'records': null  }]";


//以下是处理分页显示
        var sortName = "";
        var sortSerial = false;
        var htmlStr = "";
        var currentPage = 1;
        var userList;
        var userJsonList;
        var urlJsonList;
        var TotalCount;
        var numPerPage = 2;
        var shownum = 5;//页标中显示的按钮个数
        var TotalUrlPage;
        var JsonAfterFilter;//过滤后的JSON数据
        var JsonFilterStr = "";//过滤关键字
        var showDataType = "***";//"manageUser" "..."
        var showDataList;
//分页入口 这里分配需要显示的list内容给showDateList ,在过滤给JSONAfterFilter
    function divPageFunction(pageNow) 
    {
            switch (showDataType) {
                case "urlConfig": showDataList = urlJsonList; break;
                case "manageUser": showDataList = userJsonList; break;
                case "***": showDataList = eval("(" + jsonStr + ")"); break;
            }
            //1、过滤数据
                if (JsonFilterStr != "")
                    JsonAfterFilter = u.search(showDataList, JsonFilterStr,"",0);
                else
                    JsonAfterFilter = showDataList;
            //2、计算总页数
                TotalCount = JsonAfterFilter == null ? 0 : JsonAfterFilter.length;
                TotalUrlPage = parseInt((TotalCount - 1) / numPerPage + 1);
                currentPage = pageNow;
            //分页标签显示
                htmlStr = "<div class='ui mini pagination menu'>";
                htmlStr += "<a class='item' href='#' onclick='divPageFunction(1)'> 首页</a>";
            //获取标签上需要显示的page num 如1，2，3，4，5；
                var vIndexs = getShowPageIndexs(pageNow, TotalUrlPage, shownum);
            //显示的第一个是2时，就加一个1
                if (vIndexs[0]==2)
                    htmlStr += "<a class='item' href='#' onclick='divPageFunction(1)'>1</a>"
            //显示的第一个比2大时，就加一个1和一个...
                if (vIndexs[0] > 2) {
                        htmlStr += "<a class='item' href='#' onclick='divPageFunction(1)'>1</a>"
                        htmlStr += "<a class='disabled item' href='#'>...</a>";
                    }
            //显示中间的page num
                for (var i = 0; i < vIndexs.length; i++) {
                        if (vIndexs[i] == pageNow)
                            htmlStr += "<a class='active item' href='#' onclick='divPageFunction(" + vIndexs[i] + ")'>" + vIndexs[i] + "</a>"
                        else
                            htmlStr += "<a class='item' href='#' onclick='divPageFunction(" + vIndexs[i] + ")'>" + vIndexs[i] + "</a>"
                    }
            //显示的最后一个是倒数第二个以上的，就在后面加一个...和一个max
                if (TotalUrlPage > vIndexs[vIndexs.length - 1] + 1) {
                        htmlStr += "<a class='disabled item' href='#'>...</a>";
                        htmlStr += "<a class='item' href='#' onclick='divPageFunction(" + TotalUrlPage+ ")'>"+TotalUrlPage+"</a>";
                    }
            //显示的最后一个是倒数第二个时，就在后面加一个max
                else if (TotalUrlPage == vIndexs[vIndexs.length - 1] + 1) {
                        htmlStr += "<a class='item' href='#' onclick='divPageFunction(" + TotalUrlPage+ ")'>"+TotalUrlPage+"</a>";
                    }
            //显示末页
                htmlStr += "<a class='item' href='#' onclick='divPageFunction(" + TotalUrlPage+ ")'>末页</a>";
                htmlStr += "</div>";
                $("#divPages").html(htmlStr);
            //显示table信息
                divTableFunction(pageNow);
    }

 //根据数据量获取标签上需要显示的页号
        function getShowPageIndexs(pageNow,totalPage,showNum) {
                var ListIndexs = [];
                var count = 1;
                var step = 1;
                ListIndexs.push(pageNow);
                while (count < showNum && step < showNum * 2) {
                    if (pageNow - step > 0 && count < showNum) { ListIndexs.splice(0, 0, pageNow - step); count++; }
                    if (pageNow + step <= totalPage && count < showNum) { ListIndexs.splice(ListIndexs.length, 0, pageNow + step); count++; }
                    step++;
                }
                return ListIndexs;
            }


//处理表格中显示的分页内容 根据不同的页面，排序JSONAfterFilter，再显示对应页面的内容
        function divTableFunction(pageNow) {
            htmlStr = "";
            var index = 1;
            //通过字符串过滤数据
            if (sortName!="")
                JsonAfterFilter.sort(sortBy(sortName, sortSerial, String));
            //显示过滤后的数据JsonAfterFilter
            if (showDataType == "***")
            {
                htmlStr += "<thead><tr>";
                htmlStr += "<th><a herf='#'>id<i class='mini sort up icon'></i></a></th><th>UserName</th><th>Name</th><th>sex</th><th>age</th>";
                htmlStr += "</tr></thead>";
                htmlStr += "<tbody>";
                for (var j in JsonAfterFilter) {
                    if (index > (pageNow - 1) * numPerPage && index <= pageNow * numPerPage) {
                       // alert(index);
                        var jsonStr1 = JSON.stringify(JsonAfterFilter[j]).replace(/\"/g, "&quot;");//引号转义，传给表格中的连接
                        
                        htmlStr += "<tr><td>"+ JsonAfterFilter[j].records   +"</td><td>"+JsonAfterFilter[j].UserName+"</td><td>"+JsonAfterFilter[j].Name+"</td><td>"+JsonAfterFilter[j].sex+"</td><td>"+JsonAfterFilter[j].age+"</td></tr>"

                        htmlStr += "</tbody>";
                    }
                    index++;
                }
            }
                $("#showTable").html(htmlStr);
        }

//排序方法
    var sortBy = function (filed, rev, primer) {
            rev = (rev) ? -1 : 1;
            return function (a, b) {
                a = a[filed];
                b = b[filed];
                if (typeof (primer) != 'undefined') {
                    a = primer(a);
                    b = primer(b);
                }
                if (a < b) { return rev * -1; }
                if (a > b) { return rev * 1; }
                return 1;
            }
        };

//查找功能函数
        u.isArray = function (o) {
            return typeof o == 'object' && Object.prototype.toString.call(o).slice(8, -1).toLowerCase() == 'array';
        };
        //fullStringCheck:0-部分查找；1-全部查找
        //array查找list对象
        //value需要查找的值
        //attrName查找的参数名
        u.search = function (array, value, attrName,fullStringCheck) {
            if (!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
            var arr = [];
            arr = array.filter(function (a) {
                if (fullStringCheck == 1 && attrName.length>0) //某个字段完全匹配
                {
                    return a[attrName].toString() == value;
                }
                else if (fullStringCheck == 0 && attrName.length == 0)  //所有字段部分匹配
                {
                    return JSON.stringify(a).indexOf(value) != -1;
                }
                else if (fullStringCheck == 0 && attrName.length>0)    //某个字段部分匹配
                {
                    return a[attrName].toString().indexOf(value) != -1;
                }
            });
            return arr;
        };





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

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

function delFCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getFCookie(name);
    if (cval != null)
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

<html>
    <head>
    </head>
<body>

<input />

<table style="width:100%">
    <tr>
        <td>
            <div class="ui grid" style="height:55px;">
                <div class="eight wide column" align="left">
                    <div id="divPages"></div>
                </div>
                <div class="eight wide column" align="right">
                    <div class="ui mini right action left icon input" style="height:30px;">
                        <i class="search icon"></i>
                        <input type="text" placeholder="搜索" id="searchBox">
                        <div class="ui basic floating dropdown button">
                            <div class="text" id="searchAttr" style="width:50px;">全部</div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item">全部</div>
                                <div class="item">PCB ID</div>
                                <div class="item">SN</div>
                                <div class="item">组装临时标</div>
                                <div class="item">Fanvil SN</div>
                                <div class="item">MAC号</div>
                                <div class="item">创建时间</div>
                                <div class="item">维修记录</div>
                                <div class="item">其他信息</div>
                                <div class="item">用户名</div>
                            </div>
                        </div>
                    </div>
                    <button class="ui mini blue button" onclick="addOrder()"><i class="plus icon"></i>新增</button>
                </div>
            </div>
            <table class="ui selectable striped table">
                <thead>
                    <tr>
                        <td align='center' valign='middle' class='hover' style="width:5%;"><a onclick='sortOrder("PCBId")'>ID<i class="" id="OrderId"></i></a></td>
                        <td align='center' valign='middle' class='hover' style="width:8%;"><a onclick='sortOrder("PCBSN")'>SN<i class="" id="OrderNO"></i></a></td>
                        <td align='center' valign='middle' class='hover' style="width:5%;"><a onclick='sortOrder("TempSN")'>组装临时标<i class="" id="Model"></i></a></td>
                        <td align='center' valign='middle' class='hover' style="width:5%;"><a onclick='sortOrder("Fanvil SN")'>Fanvil SN<i class="" id="Custom"></i></a></td>
                        <td align='center' valign='middle' class='hover' style="width:5%;"><a onclick='sortOrder("MAC号")'>MAC号<i class="" id="Amount"></i></a></td>
                        <td align='center' valign='middle' class='hover' style="width:6%;"><a onclick='sortOrder("创建时间")'>创建时间<i class="" id="StartSN"></i></a></td>
                        <td align='center' valign='middle' class='hover' style="width:6%;"><a onclick='sortOrder("维修记录")'>维修记录<i class="" id="EndSN"></i></a></td>
                        <td align='center' valign='middle' class='hover' style="width:5%;"><a onclick='sortOrder("其他信息")'>其他信息<i class="" id="Type"></i></a></td>
                        <td align='center' valign='middle' class='hover' style="width:17%;"><a onclick='sortOrder("UserName")'>用户名<i class="" id="Time"></i></a></td>
                        <td align='center' valign='middle' class='hover' style="width:13%;">操作</td>
                    </tr>
                </thead>
                <tbody id="showTable">
                </tbody>
            </table>
        </td>
    </tr>
</table>








<select class="ui search dropdown"  onchange="SelectChange()">
    <option value="0">请选择订单</option>
    <option value="0">请选择订单</option>
    <option value="0">请选择订单</option>
    </select>

<table class="ui striped table">
<tr>
<td class='hover'><a onclick='sortDepartment("DepartmentId")'>部门Id<i id="DepartmentId"></i></a></td>"
<td class='hover'><a onclick='sortDepartment("Department")'>部门名<i id="Department"></i></a></td>"
<td class='hover'>部门人数</td>"
<td class='hover'>操作</td>"
</tr><tr>
<td class='hover'><a onclick='sortDepartment("DepartmentId")'>部门Id<i id="DepartmentId"></i></a></td>"
<td class='hover'><a onclick='sortDepartment("Department")'>部门名<i id="Department"></i></a></td>"
<td class='hover'>部门人数</td>"
<td class='hover'>操作</td>"
</tr><tr>
<td class='hover'><a onclick='sortDepartment("DepartmentId")'>部门Id<i id="DepartmentId"></i></a></td>"
<td class='hover'><a onclick='sortDepartment("Department")'>部门名<i id="Department"></i></a></td>"
<td class='hover'>部门人数</td>"
<td class='hover'>操作</td>"
</tr><tr>
<td class='hover'><a onclick='sortDepartment("DepartmentId")'>部门Id<i id="DepartmentId"></i></a></td>"
<td class='hover'><a onclick='sortDepartment("Department")'>部门名<i id="Department"></i></a></td>"
<td class='hover'>部门人数</td>"
<td class='hover'>操作</td>"
</tr><tr>
<td class='hover'><a onclick='sortDepartment("DepartmentId")'>部门Id<i id="DepartmentId"></i></a></td>"
<td class='hover'><a onclick='sortDepartment("Department")'>部门名<i id="Department"></i></a></td>"
<td class='hover'>部门人数</td>"
<td class='hover'>操作</td>"
</tr><tr>
<td class='hover'><a onclick='sortDepartment("DepartmentId")'>部门Id<i id="DepartmentId"></i></a></td>"
<td class='hover'><a onclick='sortDepartment("Department")'>部门名<i id="Department"></i></a></td>"
<td class='hover'>部门人数</td>"
<td class='hover'>操作</td>"
</tr><tr>
<td class='hover'><a onclick='sortDepartment("DepartmentId")'>部门Id<i id="DepartmentId"></i></a></td>"
<td class='hover'><a onclick='sortDepartment("Department")'>部门名<i id="Department"></i></a></td>"
<td class='hover'>部门人数</td>"
<td class='hover'>操作</td>"
</tr>
</table>



<table>
    <tr><td>
    <div class="flu">
        <div class="fluItem"><label>订单:</label><div class="ui input"> <input type="text" ></div></div>
        <div class="fluItem"><label>订单:</label><div class="ui input"> <input type="text" ></div></div>
        <div class="fluItem"><label>订单:</label><div class="ui input"> <input type="text" ></div></div>
        <div class="fluItem"><label>订单:</label><div class="ui input"> <input type="text" ></div></div>
        <div class="fluItem"><label>订单:</label><div class="ui input"> <input type="text" ></div></div>
        <div class="fluItem"><label>订单:</label><div class="ui input"> <input type="text" ></div></div>
        <div class="fluItem"><label>订单:</label><div class="ui input"> <input type="text" ></div></div>
    </div>
</td></tr>
<tr><td>
<div class="ui grid" style="height:55px;" >
                <div class="eight wide column" align="left">
                    <div id="divPages"></div>
                </div>
                <div class="eight wide column" align="right">
                        
<div class="ui mini right action left icon input" style="height:30px;">
  <i class="search icon"></i>
  <input type="text" placeholder="搜索" id="searchBox">
  <div class="ui basic floating dropdown button">
    <div class="text" id="searchAttr">本页面</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">本组织</div>
      <div class="item">整个页面</div>
    </div>
  </div>
</div>

                        <button class="ui mini blue button" onclick="addUrlModal()"><i class="plus icon"></i>新增</button>
                    </div>
                </div>
            <table class="ui striped table" id="showTable">
            </table>
<table class="ui selectable striped inverted table" id="showTable">
  <thead>
    <tr><th>Name</th>
    <th>年龄</th>
    <th>Job</th>
  </tr></thead>
  <tbody>
    <tr>
      <td data-label="Name">James</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">吉尔</td>
      <td data-label="Age">26</td>
      <td data-label="Job">Engineer</td>
    </tr>
    <tr>
      <td data-label="Name">Elyse</td>
      <td data-label="Age">24</td>
      <td data-label="Job">Designer</td>
    </tr>
  </tbody>
</table>
</td></tr>
</body>
</html>

/*流式布局*/



.flu .fluItem{
    margin:10px;
    float: left;
}
.flu label,input{
    margin:5px;
    float: left;
}

.flu div{
    float: left;
}


table a {
    cursor: pointer;
}

tr{
    height: 12px;
}

SOURCE

本项目引用的自定义外部资源