结构

首先是一个静态页面，设置好表头，然后通过JS文件，调用接口，返回JSON串，最后显示到前端。

<div class="mt-20">
		<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
			<thead>
				<tr class="text-c">
					<th width="40">ID</th>
					<th width="40">姓名</th>
					<th width="20">性别</th>
					<th width="120">身份证</th>
					<th width="80">手机号</th>
					<th width="40">婚否</th>
					<th width="60">部门</th>
					<th width="60">职位</th>
					<th width="20">权限</th>
					<th width="120">入职时间</th>
					<th width="120">操作</th>
				</tr>
			</thead>
			<tbody id="userinfo-list-table">
				
			</tbody>
		</table>
	</div>

JS 调用接口

$(function(){
	//项目工程名称
	var pjname='/hrsys';
	//
	var getUserInfoListAllUrl=pjname+'/adcusers/getuserslistall';
	//
	var userInfoListObj={};
	//
	var viewHTML='';
	//同步
	$.ajaxSetup({async: false});
	$.ajax({
		url : getUserInfoListAllUrl,
		type : 'GET',
		success : function(data) {
			userInfoListObj=data.userInfoList;
			var userGender='';
			var userIsMarried='';
			var counta=1;
			userInfoListObj.map(function(item,data){
				userGender=item.gender>0?'男':'女';
				userIsMarried=item.isMarried>0?'已婚':'未婚';
				var tmpHTML=returnTableViewString(item.id,item.name,userGender,item.idCard,userIsMarried,item.priority,item.phone,item.entryTime,item.jobDepartment.name,item.jobPosition.name,counta);
				viewHTML=viewHTML+tmpHTML;
				counta++;
			});
			$('#userinfo-list-table').html(viewHTML);
			$('#count-tableitems').html(data.userInfoListCount);
		}
	});
	
	//响应搜索按钮
	$('#search-submit').click(function(){
		searchOperation();
	});
	$('#search-input').keyup(function(event){
		if(event.keyCode ==13){
			searchOperation();
		  }
	});
	function searchOperation(){
		var inputString=$('#search-input').val();
		if(inputString==null||inputString==''){
			if(userInfoListObj!=null&&userInfoListObj!={}){
				var countb=1;
				userInfoListObj.map(function(item,data){
					userGender=item.gender>0?'男':'女';
					userIsMarried=item.isMarried>0?'已婚':'未婚';
					var tmpHTML=returnTableViewString(item.id,item.name,userGender,item.idCard,userIsMarried,item.priority,item.phone,item.entryTime,item.jobDepartment.name,item.jobPosition.name,countb);
					viewHTML=viewHTML+tmpHTML;
					countb++;
				});
				$('#userinfo-list-table').html(viewHTML);
				$('#count-tableitems').html(userInfoListObj.length);
			}
			
		}else{
			if(userInfoListObj!=null&&userInfoListObj!={}){
				var viewHTML1='';
				var count1=0;
				userInfoListObj.map(function(item,data){
					var userGender1='';
					var userIsMarried1='';
					var countc=1;
					if(item.name.indexOf(inputString)>-1){
						//用户模糊匹配
						userGender1=item.gender>0?'男':'女';
						userIsMarried1=item.isMarried>0?'已婚':'未婚';
						viewHTML1=viewHTML1+returnTableViewString(item.id,item.name,userGender1,item.idCard,userIsMarried1,item.priority,item.phone,item.entryTime,item.jobDepartment.name,item.jobPosition.name,countc);
						count1++;
					}else
					if(item.idCard.indexOf(inputString)>-1){
						//用户模糊匹配
						userGender1=item.gender>0?'男':'女';
						userIsMarried1=item.isMarried>0?'已婚':'未婚';
						viewHTML1=viewHTML1+returnTableViewString(item.id,item.name,userGender1,item.idCard,userIsMarried1,item.priority,item.phone,item.entryTime,item.jobDepartment.name,item.jobPosition.name,countc);
						count1++;
					}else
					if(item.jobDepartment.name.indexOf(inputString)>-1){
						//用户模糊匹配
						userGender1=item.gender>0?'男':'女';
						userIsMarried1=item.isMarried>0?'已婚':'未婚';
						viewHTML1=viewHTML1+returnTableViewString(item.id,item.name,userGender1,item.idCard,userIsMarried1,item.priority,item.phone,item.entryTime,item.jobDepartment.name,item.jobPosition.name,countc);
						count1++;
					}
					countc++;
				});
				$('#userinfo-list-table').html(viewHTML1);
				$('#count-tableitems').html(count1);
			}
		}
	}
	function returnTableViewString(userId,userName,userGender,userIdCard,userIsMarried,userPriority,userPhone,userEntryTime,userDepartment,userPosition,countNum){
		var result='<tr class="text-c"><td>'+countNum+
					'</td><td class="text-l"><u style="cursor:pointer"class="text-primary" onClick="" title="查看">'+userName+
					'</u></td><td>'+userGender+
					'</td><td>'+userIdCard+
					'</td><td>'+userPhone+
					'</td><td>'+userIsMarried+
					'</td><td>'+userDepartment+
					'</td><td>'+userPosition+
					'</td><td class="td-status"><span class="label label-success radius">'+userPriority+
					'</span></td><td>'+userEntryTime+'</td><td class="f-14 td-manage"><a style="text-decoration:none" target="_Blank" class="ml-5" href="javascript:;" onclick="member_add(\'编辑\',\'/hrsys/adcadmin/gotomodifyuserinfobyidpage?userId='+userId+'\',\'\',\'610\')" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a> <a style="text-decoration:none" class="ml-5" onclick="return confirm(\'请确认删除\');" href="/hrsys/adcadmin/deleteuserinfobyid?userId='+userId+'" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a></td></tr>';
		return result;
	}
})

接口函数

package com.advancedc.hrsys.web.users;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.advancedc.hrsys.entity.UserInfo;
import com.advancedc.hrsys.service.UserInfoService;



@Controller
@RequestMapping("/adcusers")
public class ShowUsersListController {
	@Autowired
	private UserInfoService userInfoService;
	
	@RequestMapping(value="/getuserslistall",method=RequestMethod.GET)
	@ResponseBody
	private Map<String,Object> getAboutAll(HttpServletRequest request){
		Map<String,Object> modelMap=new HashMap<String,Object>();
		List<UserInfo> userInfoList=userInfoService.getUserInfoAll();
		modelMap.put("userInfoList", userInfoList);
		modelMap.put("userInfoListCount", userInfoList.size());
		return modelMap;
	}
}