How can I make a neat jtable using servlet?

Question

How can I resize jTable heather to fit to cell´s data in servlet-JSP. Please check this image.

The code in Java is:

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;
}

And the code in 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>

Please if someone knows how to make a neat and acceptable data in witch all columns and header fits, please let me know.

check this [link](https://stackoverflow.com/questions/443700/div-with-horizontal-scrolling-only). You will have to add horizontal scroll bar to that table. — abpatil, Oct 28 '17 at 09:50

score 0 · Answer 1 · answered Apr 10 '18 at 14:45

As per the comments above you can certainly make the jTable container div scrollable.

Another technical option would be to use the column visibility features in jTable to only show the essential data by default, and let the user select extra columns as they need.

Other fields like email address will always be quite wide, so you mail want replace the address with a mailto link, which will launch the users email application to send an email.

Looking at the image I can't tell much about the data. I do see that you have two telephone numbers. You can keep both numbers in your records, and have two columns in the jTable definition, but you can make one of them excluded from the table and display both values vertically in one td.

telephone: {
    title: 'Phone',
    display: function(data) {
        var str = "T: "+ data.record.telephone + "<br />"
                + "C: "+ data.record.cellphone;
        return str;
    }
},
cellphone: {
    list: false
}

This will display one under the other, and save one column. This strategy is very width effective for full postal addresses.

The final advice is to always consider what the user MUST see, and what they might need to see from a row of data. You may find that some of the data can be demoted to a child table and only displayed on demand.

How can I make a neat jtable using servlet?

1 Answers1