表格分页2

来源：互联网发布：c语言 gbk转unicode 编辑：程序博客网时间：2024/05/21 09:33

一、效果图

二、html页面代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>数据表格</title><script src="../js/jquery-1.8.3.min.js"></script><script src="../js/jquery-2.1.0.min.js"></script><link href="../css/table.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="../js/table.js"></script></head><body onload="teacherList()"><table id="teacherTable" class="main_table" border="1"><thead><tr><th><input type="checkbox" style="z-index: 10px;"></th><th>姓名</th><th>登录名</th><th>性别</th><th>职称</th><th>操作</th></tr></thead><tbody></tbody></table><div id="padding" style="padding-left: 5px; padding-top: 10px;padding-bottom: 40px;"></div><script>/** * 老师列表 *  * @param searchText 搜索的文本 */function teacherList(searchText) {var fun = function formatterColumn(index) {var row = getRowData(index);return "<a class='btn-but' href='javascript:openTeacherEditPage(" + row.id + ")'" + ">修改</a> \<a class='btn-but' href='javascript:resetPassword(" + row.userId + ")'" + ">重置密码</a> \<a class='btn-but' href='javascript:deleteOne(" + row.id + ")'" + ">删除</a>";};var genderFun = function formatterColumn(index) {var row = getRowData(index);if(row.gender == "Male") {return "男";} else {return "女";}};if(!searchText) {searchText = '';}var params = {"search": searchText};tableData("../json/teacher.json", params, 1, 10, "teacherTable", ["name", "loginName", "gender", "position", "action"], {"action": fun,"gender": genderFun},"id","id","desc");}</script></body></html>

三、css样式 tables.css

@CHARSET "UTF-8";* {margin: 0;padding: 0;}.main_table {border: 1px solid #0058a3;border-collapse: collapse;background-color: #eaf5ff;border-color: blue;padding: 2px;text-align: center;}.main_table caption {padding-bottom: 5px;font: bold 1.4em;text-align: left;}.main_table th {border: 1px solid #ddd;/* 行名称边框 */background-color: #fff;/* 行名称背景色 */color: #333;/* 行名称颜色 */font-weight: bold;padding-top: 10px;padding-bottom: 10px;padding-left: 12px;padding-right: 12px;text-align: center;}.main_table td {border: 1px solid #ddd;/* 单元格边框 */text-align: center;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;}.main_table tr.altrow {background-color: #c7e5ff;/* 隔行变色 */}.button_border {height: 30px;width: 30px;border: 1px solid #ddd;background-color: white;}.align_left {float: right;}.btn-but {padding: 5px 15px;border-radius: 4px;background: #d9534f;border: 0px;outline: none;cursor: pointer;color: #fff;height: 30px;text-decoration: initial;}.altroww {background: #fff;}.altroww:hover {background: #f2f2f2;}

四、js脚本 table.js

var URL;//请求地址var PARAMS;//请求条件参数var PAGENUM;//起始页var PAGESIZE;//每页显示的条数var TABLEID;//表格IDvar COLUMNS;//显示列所对应的属性字段名var TOTAL;//查询的总条数var PAGETOTAL;//总页数var COLUMNFORMAT;//显示的格式var ROWSDATA;//列表数据var IDNAME;//主键名称var SORT;//排序字段var ORDER;//排序方式/** * 分页列表 *  * @author 周化益 * @param url 请求地址 * @param params 请求条件参数 * @param pageNum 起始页 * @param pageSize 每页显示的条数 * @param tableId 表格ID * @param columns 显示列所对应的属性字段名 * @param columnFormat 字段转换函数 * @param IdName 主键ID * @param sort 排序字段 * @param order 排序方式 */function tableData(url,params,pageNum,pageSize,tableId,columns,columnFormat,IdName,sort, order) {if(url.indexOf("?") > 0) {url = url + "&";} else {url = url + "?";}URL = url; PARAMS = params; PAGENUM = pageNum; PAGESIZE = pageSize;TABLEID = tableId; COLUMNS=columns; IDNAME=IdName;COLUMNFORMAT = columnFormat;SORT = sort; ORDER = order;if(sort) {params['sort'] = sort;if(order) {params['order'] = order;}} else {params['sort'] = "id";params['order'] = "desc";}$.getJSON(url+'page='+pageNum+'&rows='+pageSize, params, function(data){var rowStr = '';var checkbox = $("#" + tableId + " thead th:first input");var ck = checkbox.attr("type") == "checkbox";if(!data) {ROWSDATA = [];TOTAL = 0;} else {ROWSDATA = data.rows ? data.rows : [];TOTAL = data.total ? data.total : 0;}var dataLength = ROWSDATA.length;if(dataLength == TOTAL) {var rowsTemp = ((pageNum - 1) * pageSize);var num = TOTAL - rowsTemp;if(num == TOTAL) {if(num > pageSize) {num = pageSize;}}var dataTemp = [];for(var i = 0; i < num; i++) {dataTemp[i] = ROWSDATA[rowsTemp + i]}ROWSDATA = dataTemp;}PAGETOTAL = parseInt(TOTAL/pageSize);if(TOTAL%pageSize > 0) {PAGETOTAL++;}$.each(ROWSDATA, function(i, n) {var row = ROWSDATA[i];if(i%2 == 0) {rowStr += '<tr class="altroww">';} else {rowStr += '<tr class="altroww">';}if(ck) {rowStr += "<td><input type='checkbox' name='ck' value="+row[IdName]+"></td>";}$.each(columns, function(j, n) {if(columnFormat[n]) {rowStr += '<td>'+columnFormat[n](i)+'</td>';} else {if(row[n] || row[n]==0) {rowStr += '<td>'+row[n]+'</td>';} else {rowStr += '<td></td>';}}});rowStr += '</tr>';});if(ck) {checkbox.click(function() {var that = this;$(this).closest('table').find('tr > td:first-child input:checkbox').each(function() {this.checked = that.checked;$(this).closest('tr').toggleClass('selected');});});}$('#' + tableId + ' tbody').html(rowStr);var padding = '<div style="float:left">\<input style="height: 30px;border: 1px solid #ddd;background-color: white;"\type="button" id="upPage" value=" << 上一页  " onclick="upPage()"/> ';var total_num = PAGETOTAL-PAGENUM;if(PAGENUM < 5 && PAGETOTAL > 8) {for (var i = 1; i < 8; i++) {padding += '<input class="button_border" type="button" id="page' + i + '" value = "' + i + '" \onclick="clickPadding(' + i + ')"/> ';}padding += '... <input class="button_border" type="button" id="page' + PAGETOTAL + '" value = "' + PAGETOTAL + '" \onclick="clickPadding(' + PAGETOTAL + ')"/> ';} else if(total_num > 4 && PAGETOTAL > 8) {padding += '<input class="button_border" type="button" id="page1" value ="1" \onclick="clickPadding(1)"/> ... ';for (var i = -3; i < 3 + 1; i++) {padding += '<input class="button_border" type="button" id="page' + (PAGENUM + i) + '" value = "' + (PAGENUM + i) + '" \onclick="clickPadding(' + (i + PAGENUM) + ')"/> ';}padding += '... <input class="button_border" type="button" id="page' + PAGETOTAL + '" value = "' + PAGETOTAL + '" \onclick="clickPadding(' + PAGETOTAL + ')"/> ';} else if(total_num <= 4 && PAGETOTAL > 8) {padding += '<input class="button_border" type="button" id="page1" value ="1" \onclick="clickPadding(1)"/> ... ';for (var i = -3; i < total_num + 1; i++) {padding += '<input class="button_border" type="button" id="page' + (PAGENUM + i) + '" value = "' + (PAGENUM + i) + '" \onclick="clickPadding(' + (i + PAGENUM) + ')"/> ';}} else {for (var i = 1; i <= PAGETOTAL; i++) {padding += '<input class="button_border" type="button" id="page' + i + '" value = "' + i + '" \onclick="clickPadding(' + i + ')"/> ';}}padding += '<input style="height: 30px;border: 1px solid #ddd;background-color: white;"\ type="button" id="nextPage" value=" 下一页 >> " onclick="nextPage()"/></div>';padding += '<div style="float:right"><span class="align_left">页码\<input type="text" class="button_border" id="inputPage" style="width:40px;height:25px;" value="'+PAGENUM+'">'+'<a href="javaScript:clickPadding($('+"'#inputPage'"+').val())" style="color:black;text-decoration: initial;">确认</a>,共'+TOTAL+'条数</span></div>';$('#padding').html(padding);$('#' + tableId).css("width","100%");$('#padding').css("width","90%");if(PAGENUM == PAGETOTAL) {$('#nextPage').attr("disabled","disabled").css("background-color","#F5F5F5").css("border","1px solid gray");}if(PAGENUM == 1){$('#upPage').attr("disabled","disabled").css("background-color","#F5F5F5").css("border","1px solid gray");}$("#page"+PAGENUM).attr("disabled","disabled").css({"background-color":"#d9534f","color":"#fff"}); /*JQuery 限制文本框只能输入数字*/    $("#inputPage").keyup(function(event) {    $(this).val($(this).val().replace(/[^0-9.]/g,''));if(event.keyCode == 13){    var pageNum = $("#inputPage").val() > PAGETOTAL ? PAGETOTAL : $("#inputPage").val();    pageNum = pageNum == 0 ? 1 : pageNum;    tableData(URL, PARAMS, pageNum, PAGESIZE, TABLEID, COLUMNS,COLUMNFORMAT,IDNAME, SORT, ORDER);    }    }).bind("paste",function(){  //CTR+V事件处理            $(this).val($(this).val().replace(/[^0-9.]/g,''));         }).css("ime-mode", "disabled"); //CSS设置输入法不可用 }, "json");}/** * 下一页 */function nextPage() {PAGENUM = PAGENUM + 1;tableData(URL, PARAMS, PAGENUM, PAGESIZE, TABLEID, COLUMNS,COLUMNFORMAT,IDNAME, SORT, ORDER);}/** * 上一页 */function upPage() {PAGENUM = PAGENUM - 1;tableData(URL, PARAMS, PAGENUM, PAGESIZE, TABLEID, COLUMNS,COLUMNFORMAT,IDNAME, SORT, ORDER);}/** * 单击的页数 * @param pageNum 点击的页数 */function clickPadding(pageNum) {if(pageNum > PAGETOTAL) {pageNum = PAGETOTAL;} else if (pageNum < 1) {pageNum = 1;}tableData(URL, PARAMS, pageNum, PAGESIZE, TABLEID, COLUMNS,COLUMNFORMAT,IDNAME, SORT, ORDER);}/** * 刷新表格 */function CommonRefreshTable() {tableData(URL, PARAMS, PAGENUM, PAGESIZE, TABLEID, COLUMNS,COLUMNFORMAT,IDNAME, SORT, ORDER);}/** * 获取列表数据 * @author 周化益 * @param rowsData  * @param index * @returns 列表数据 */function getRowData(index) {if(index || index == 0) {return ROWSDATA[index];} else {return ROWSDATA;}}

五、json数据 teacher.json

{    "total": 15,    "rows": [        {            "gender": "Male",            "loginName": "2222",            "name": "修改测试老师",            "id": 3940,            "position": "111",            "userId": 4673        },        {            "gender": "Male",            "loginName": "阿里弟弟",            "name": "咋了爸爸",            "id": 3939,            "position": "校园搞笑组合",            "userId": 4672        },        {            "gender": "Male",            "loginName": "方式",            "name": "的萨芬",            "id": 3938,            "position": "",            "userId": 4670        },        {            "gender": "Male",            "loginName": "啊啊啊啊",            "name": "咋了爸爸",            "id": 3937,            "position": "啊啊啊啊啊",            "userId": 4668        },        {            "gender": "Male",            "loginName": "laosiji",            "name": "吴振辉",            "id": 3935,            "position": "司机",            "userId": 4665        },        {            "gender": "Male",            "loginName": "wuwuwu",            "name": "阿虎哒哒",            "id": 3926,            "position": "老司机",            "userId": 4656        },        {            "gender": "Male",            "loginName": "罗嘉全",            "name": "罗嘉全",            "id": 3922,            "position": "金牌投顾专家",            "userId": 3923        },        {            "gender": "Male",            "loginName": "马建",            "name": "马建",            "id": 3914,            "position": "金牌投顾专家",            "userId": 3915        },        {            "gender": "Male",            "loginName": "hulangui",            "name": "胡兰贵",            "id": 274,            "position": "金牌投顾专家",            "userId": 275        },         {            "gender": "Male",            "loginName": "hulangui",            "name": "屈长江",            "id": 184,            "position": "金牌分析师",            "userId": 185        },        {            "gender": "Male",            "loginName": "houbo",            "name": "侯波",            "id": 176,            "position": "金牌投顾专家",            "userId": 177        },        {            "gender": "Male",            "loginName": "quanwei",            "name": "权卫",            "id": 168,            "position": "金牌投顾专家",            "userId": 169        },        {            "gender": "Female",            "loginName": "heyanhua",            "name": "何燕华",            "id": 160,            "position": "金牌投顾专家",            "userId": 161        },        {            "gender": "Male",            "loginName": "liqiang",            "name": "李强",            "id": 152,            "position": "金牌投顾专家",            "userId": 153        },        {            "gender": "Male",            "loginName": "quchangjiang",            "name": "屈长江",            "id": 61,            "position": "金牌投顾专家",            "userId": 62        }    ]}

到此一个简单的表格就此完成。如有写的不好之处，希望大家提提意见。谢谢！

0 0