如何调整jTable石楠的大小以适应servlet-JSP中的单元格数据。请查看此image。
Java中的代码是：
public class DaoEmpleado {
private Connection conexionBd;
private PreparedStatement pStmt;
public DaoEmpleado() throws ClassNotFoundException, SQLException {
conexionBd = OracleUtileriasConexion.getOracleConnection();
}
public List<Empleado> obtenerTodosLosEmpleados(int inicioPaginaIndice, int registrosEnPagina) {
List<Empleado> empleados = new ArrayList<Empleado>();
String consulta = "SELECT * from (Select M.*, Rownum R From TABLA_EMPLEADO M) where r > " + inicioPaginaIndice +" and r <= "+registrosEnPagina;
System.out.println(consulta);
System.out.println("ñañañaña " );
try
{
Statement stmt = conexionBd.createStatement();
ResultSet rs = stmt.executeQuery(consulta);
while (rs.next())
{
System.out.println("estoy entrando " );
Empleado empleado = new Empleado();
empleado.setID_EMPLEADO(rs.getInt("ID_EMPLEADO"));
empleado.setAPELLIDO_MATERNO(rs.getString("APELLIDO_MATERNO"));
empleado.setAPELLIDO_PATERNO(rs.getString("APELLIDO_PATERNO"));
empleado.setNOMBRE(rs.getString("NOMBRE"));
empleado.setID_PUESTO_EMPLEADO(rs.getInt("ID_PUESTO_EMPLEADO"));
empleado.setDIRECCION(rs.getString("DIRECCION"));
empleado.setCOLONIA(rs.getString("COLONIA"));
empleado.setCP(rs.getString("CP"));
empleado.setPAIS(rs.getString("PAIS"));
empleado.setESTADO(rs.getString("ESTADO"));
empleado.setCIUDAD(rs.getString("CIUDAD"));
empleado.setCELULAR(rs.getString("CELULAR"));
empleado.setNO_SEGURO_SOCIAL(rs.getString("NO_SEGURO_SOCIAL"));
empleado.setNSS_ARCHIVO(rs.getString("NSS_ARCHIVO"));
empleado.setRFC(rs.getString("RFC"));
empleados.add(empleado);
}
}
catch (SQLException e)
{
System.err.println(e.getMessage());
}
return empleados;
}
JSP中的代码：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib prefix ="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var = "contextRoot" value = "${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Catálog de empleados</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Include one of jTable styles. -->
<link href="tabla/css/metro/blue/jtable.css" rel="stylesheet" type="text/css" />
<link href="tabla/css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap Core CSS -->
<link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="${pageContext.request.contextPath}/assets/css/formato.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Include jTable script file. -->
<script src="tabla/js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="tabla/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="tabla/js/jquery.jtable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabla_emp').jtable({
title : 'Registros encontrados',
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
actions: {
listAction: 'ControladorEmpleado?accion=lista',
},
fields : {
ID_EMPLEADO : {
title : 'Id',
sort :true,
width : '4%',
key : true,
list : true,
create : false
},
APELLIDO_PATERNO : {
title : 'Ap. paterno',
width : '4%',
},
APELLIDO_MATERNO : {
title : 'Ap. materno',
width : '4%',
},
NOMBRE : {
title : 'Nombre',
width : '4%',
},
ID_PUESTO_EMPLEADO : {
title : 'Id pto emp',
width : '4%',
},
DIRECCION : {
title : 'Direccion',
width : '4%',
},
COLONIA : {
title : 'Col.',
width : '4%',
},
CP : {
title : 'CP',
width : '4%',
},
PAIS : {
title : 'Pais',
width : '4%',
},
ESTADO : {
title : 'Edo',
width : '4%',
},
CIUDAD : {
title : 'Cd',
width : '4%',
},
CELULAR : {
title : 'Cel',
width : '4%',
},
TELEFONO : {
title : 'Tel',
width : '4%',
},
CORREO_ELECTRONICO: {
title : 'Correo',
width : '4%',
},
CONTACTO_EMERGENCIA : {
title : 'Contacto emerg',
width : '4%',
},
NO_SEGURO_SOCIAL : {
title : 'no SS',
width : '4%',
},
NSS_ARCHIVO : {
title : 'nss archivo',
width : '4%',
},
NO_LICENCIA_ARCHIVO : {
title : 'no licencia archivo',
width : '4%',
},
RFC:{
title : 'rfc',
width : '4%',
},
FECHA_VENCIMIENTO_LICENCIA:{
title : 'fecha vencimiento licencia',
width : '4%',
},
FECHA_CONTRATACION:{
title : 'fecha contratacion',
width : '4%',
},
EMP_USU_ULT_MOD : {
title : 'Usu ult mod',
width : '4%',
create: false
},
EMP_FEC_ULT_MOD : {
title : 'Ult mod',
width : '4%',
create: false
}
}
});
$('#tabla_emp').jtable('load');
});
</script>
<style type="text/css">
.lb-sm {
font-size: 12px;
}
.lb-md {
font-size: 16px;
}
.lb-lg {
font-size: 20px;
}
</style>
</head>
<body>
<jsp:include page="../GENERAL/_header.jsp"></jsp:include>
<div class="container">
<h2><span class="label label-primary">Puestos de Empleados</span></h2>
</div>
<div
style="width: 80%; margin-right: 10%; margin-left: 10%; text-align: left;">
<h4></h4>
<br></br>
<div id="tabla_emp"></div>
</div>
<jsp:include page="../GENERAL/_footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
window.onload=function () {
$('#Administracion').addClass('active');
};
</script>
</html>
如果有人知道如何在所有列和标题适合的情况下制作一个整洁且可接受的数据，请告诉我。
答案 0 :(得分：0)
根据上面的评论，你当然可以使jTable容器div可滚动。
另一个技术选项是使用column visibility features in jTable默认显示基本数据，并让用户根据需要选择额外的列。
电子邮件地址等其他字段总是很宽，所以您要邮寄想要用mailto链接替换地址，这将启动用户电子邮件应用程序发送电子邮件。
观察图像，我无法详细说明数据。我确实看到你有两个电话号码。您可以在记录中保留这两个数字，并在jTable定义中包含两列，但您可以从表中排除其中一列，并在一个td中垂直显示这两个值。
telephone: {
title: 'Phone',
display: function(data) {
var str = "T: "+ data.record.telephone + "<br />"
+ "C: "+ data.record.cellphone;
return str;
}
},
cellphone: {
list: false
}
这将在另一个下方显示一个，并保存一列。这种策略对于完整的邮政地址非常有效。
最后的建议是始终考虑用户必须看到的内容，以及他们可能需要从一行数据中看到的内容。您可能会发现某些数据可以降级为子表，并且只能按需显示。