[DATATABLE - JQUERY - MYSQL - SERVLET - JAVA BEAN] popolare la tabella dinamicamente

[evil_stefano]

Ciao,

qualcuno ha mai provato a popolare una datatable (https://datatables.net) da mysql?

non riesco a farlo.. ho provato a creare una servlet che restituisce un GSON, ma non funziona.
Sinceramente è la prima volta che uso i json, e a debuggare non son bravo.. non riesco a verificare che la tabella faccia l'ajax call verso la servlet..

qualcuno conosce un esempio funzionante?
mi basterebbe che l'esempio prenda i dati da un db mysql (anche in php) per iniziare a capire qualcosa..


vi posto il codice che ho usato.

JSP

<div id="main_content_table">
	<table id="mytable">
		<thead>
			<tr>
				<th>id</th>
				<th>desc</th>
				<th>model</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>	
					</div>	


<script type="text/javascript">
	$(document).ready(function() {
	    $("#mytable").dataTable( {
	        "bProcessing": false,
	        "bServerSide": false,
	        "sAjaxSource": "./PopulateTableDevice",
	        "bJQueryUI": true,
	        "aoColumns": [
					{ "mData": "id" },
					{ "mData": "desc" },
					{ "mData": "model" }	            
	        ]
	    } ); 
	} );		
</script>

Servlet PopulateTableDevice

@WebServlet("/PopulateTableDevice")
public class PopulateTableDevice extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public PopulateTableDevice() {
    }

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("application/json");
		PrintWriter out = response.getWriter();
		List<DeviceBean> deviceList = DeviceDaoBean.getAllDevice();
		
		DataTableDevice dtd = new DataTableDevice();
		dtd.setAaData(deviceList);
		
		Gson gson = new GsonBuilder().setPrettyPrinting().create();
		String json = gson.toJson(dtd);
		out.print(json);
	}
}

DeviceBean

public class DeviceBean {

	private Integer id;
	private String  desc;
	private String  model;
	
... getter and setter...

DeviceDaoBean

public class DeviceDaoBean {

	static Connection currentCon = null;
	static ResultSet rs = null;
	
    public static ArrayList<DeviceBean> getAllDevice() {
    	Statement stmt = null;
		
    	String searchQuery = "select * from DEVICE";
		ArrayList<DeviceBean> deviceList = new ArrayList<DeviceBean>();
		
		try {
			currentCon = ConnectionManager.getConnection();
			stmt = currentCon.createStatement();
						
			rs = stmt.executeQuery(searchQuery);
			
		    while(rs.next()) { 
		    	DeviceBean device = new DeviceBean();
		    	device.setDesc(rs.getString("DESC"));
		    	device.setId(rs.getInt("ID"));
		    	device.setModel(rs.getInt("MODEL"));		    	
		    	deviceList.add(device);
		    }
		    
		    ConnectionManager.closeConnection(currentCon, stmt);
		    rs.close();
		    
		} catch (SQLException e) {
		    e.printStackTrace();
		    return null;
		}
		return deviceList;
    }
}

MySQL table

CREATE TABLE DEVICE
(
  ID                    INT NOT NULL AUTO_INCREMENT,
  DESC               CHAR(255) CHARACTER SET utf8,
  MODEL            CHAR(255) CHARACTER SET utf8,
     PRIMARY KEY (ID)
);

Grazie.

[Daniels118]

Anche questa l'ho fatta con php+mysql
L'esempio ufficiale in php è molto più complesso del codice che hai tu, perché è predisposto per gestire filtri, ordinamento e paginazione.

Perché non provi a tradurre il codice php in java?

In ogni caso, se utilizzi gli strumenti giusti sul browser riesci facilmente a capire cosa non funziona. Se potessi pubblicare la tabella su un server potrei guidarti più facilmente.

[evil_stefano]

Originariamente inviato da Daniels118

Anche questa l'ho fatta con php+mysql
L'esempio ufficiale in php è molto più complesso del codice che hai tu, perché è predisposto per gestire filtri, ordinamento e paginazione.

Perché non provi a tradurre il codice php in java?

In ogni caso, se utilizzi gli strumenti giusti sul browser riesci facilmente a capire cosa non funziona. Se potessi pubblicare la tabella su un server potrei guidarti più facilmente.

ciao,

molto probabilmente il mio problema è che non riesco a usare gli strumenti di debug per vedere cosa non va.. con firebug quando carica la datatable non riesco a vedere se effettua la call ajax, e se controllo da eclipse in visuale debug sembra che non entri mai nella servlet (dove ho messo il breackpoint).

cosa dovrei usare per debuggare?

il mio ultimo tentativo sarà di provare a tradurre il php, o in alternativa di passare a php..

nel caso dove posso trovare un portale in cui pubblicare la tabella mysql?
conosco solo http://jsfiddle.net/ ma nn ho mai visto una parte dove mettere la tabella.



Grazie !

[Daniels118]

E' da diversi anni che debuggo solo con chrome, ho usato firebug in passato ma non ricordo quasi nulla, non che sia tanto diverso dal debugger di chrome, ma non saprei guidarti con precisione, se puoi usare chrome risulta certamente più semplice.
Comunque rivedendo il codice html/js mi sono accorto che stai "datatablizzando" un oggetto con classe jqueryDataTable, ma non esistono oggetti del genere nella tua pagina. Dovresti usare il selettore "#mytable".

Per quanto riguarda la pubblicazione hai due opzioni:
1) pubblicare sul tuo pc e fornirci la tripletta IP/porta/percorso per poter visualizzare la pagina;
2) pubblicare su un servizio di hosting, magari gratuito (es. altervista ha php+mysql).

La prima soluzione richiede un po' di accorgimenti, se non l'hai mai fatto prima è meglio seguire la seconda.

[evil_stefano]

Originariamente inviato da Daniels118

E' da diversi anni che debuggo solo con chrome, ho usato firebug in passato ma non ricordo quasi nulla, non che sia tanto diverso dal debugger di chrome, ma non saprei guidarti con precisione, se puoi usare chrome risulta certamente più semplice.
Comunque rivedendo il codice html/js mi sono accorto che stai "datatablizzando" un oggetto con classe jqueryDataTable, ma non esistono oggetti del genere nella tua pagina. Dovresti usare il selettore "#mytable".

Per quanto riguarda la pubblicazione hai due opzioni:
1) pubblicare sul tuo pc e fornirci la tripletta IP/porta/percorso per poter visualizzare la pagina;
2) pubblicare su un servizio di hosting, magari gratuito (es. altervista ha php+mysql).

La prima soluzione richiede un po' di accorgimenti, se non l'hai mai fatto prima è meglio seguire la seconda.

si hai ragione, nei vari copia-incolla da internet ho dimenticato di far puntare alla mia tabella.. ho sistemato ma il problema rimane, rimane in caricamento ma non vedo dati.
Dovrei provare a printare il json per vedere cosa contiene.

pubblicare la tabella sembra abbastanza complicato, appena torno a casa provo a vedere la seconda soluzione.

Grazie.

[Daniels118]

Personalmente la prima cosa che farei sarebbe quella di verificare se parte la richiesta http verso "./PopulateTableDevice".
Vedi qui: http://getfirebug.com/wiki/index.php/Net_Panel

[evil_stefano]

ho risolto, dopo aver installato tamper data (https://addons.mozilla.org/it/firefo...n/tamper-data/) per vedere le richieste get e post, ho notato che la servlet veniva chiamata in un percorso non corretto e rispondeva 404.

fixato la path a cui chiamare la servlet i dati sono stati importati al volo nella datatable.

adesso però ho notato altre cose che non capisco..
la datatable può funzionare in modalità client side per il sorting e filtering mentre solo server side per recuperare i dati?
perché durante le prove di ieri sera ho notato che viene popolata, ma appena cerco di fare sorting di una colonna compare "processing" come se si aspettasse un qualcosa dal server side.. solo che a questo punto dovrei creare una megaclasse in cui mettere ogni tipo di metodo utilizzato dal datatable (sorting, hiding, filtering...) e la cosa non è una prospettiva allettante..

attualmente la classe che uso per gestire il datatable è questa:

public class DataTableDevice {

		int 	iTotalRecords;	
		int 	iTotalDisplayRecords;
		String 	sEcho;
		String  sColumns;
		List<DeviceBean> aaData;

		public int getiTotalRecords() {
			return iTotalRecords;
		}

		public void setiTotalRecords(int iTotalRecords) {
			this.iTotalRecords = iTotalRecords;
		}

		public int getiTotalDisplayRecords() {
			return iTotalDisplayRecords;
		}

		public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
			this.iTotalDisplayRecords = iTotalDisplayRecords;
		}

		public String getsEcho() {
			return sEcho;
		}

		public void setsEcho(String sEcho) {
			this.sEcho = sEcho;
		}

		public String getsColumns() {
			return sColumns;
		}

		public void setsColumns(String sColumns) {
			this.sColumns = sColumns;
		}

		public List<DeviceBean> getAaData() {
			return aaData;
		}

		public void setAaData(List<DeviceBean> aaData) {
			this.aaData = aaData;
		}
	}

tra l'altro vorrei capire come devo dichiarare la variabile "aoColumns" per realizzare da string a json questo:

"aoColumns": [
	{ "mData": "id" },
	{ "mData": "descrizione" },
	...
]

cioè, vorrei avere una variabile aoColumns nella classe DataTableDevice che quando viene chimata dal GSON per essere convertita da string a json dia un'output uguale a quello sopra.. quindi ogni elemento compreso tra graffe e il tutto compreso da quadre..
se non ho capito male in json per fare una cosa simile devo avere in ingresso una lista di oggetti string..

non ho capito come farlo.. cioè, i nomi delle colonne li conosco e li posso ottenere dal tostring in override della classe DeviceBean, ma da lì a realezzare il json con le graffe per ogni elemento e con scritto "mData" non so proprio come fare..



codice fixato:

	        "sAjaxSource": "../PopulateTableDevice",

[Daniels118]

Si, devi implementare le funzioni di ordinamento paginazione e filtering lato server, altrimenti non avrebbe senso usare ajax, immagina di dover ordinare 1 milione di record lato client...
L'esempio in php ha già tutte queste funzionalità implementate, dagli un'occhiata.

[evil_stefano]

Originariamente inviato da Daniels118

Si, devi implementare le funzioni di ordinamento paginazione e filtering lato server, altrimenti non avrebbe senso usare ajax, immagina di dover ordinare 1 milione di record lato client...
L'esempio in php ha già tutte queste funzionalità implementate, dagli un'occhiata.

si infatti ripensandoci sarebbe opportuno.. ma visto che è un progetto dell'uni che forse verrà convertito in progetto presso il mio lavoro, attualmente non implemento nulla.. faccio semplice get dei dati json in ajax.. per farlo basta settare:

	        "bProcessing": false,
	        "bServerSide": false,

in questo modo sembra che non chiede al server i dati per riprocessare le richieste. Devo ancora testarlo.

come priorità c'è il nome delle colonne dinamico passato in json.. adesso sto cercando di capire come devo dichiarare la variabile aoColumns della classe DataTableDevice per poi farla convertire correttamente dal gson in questo:

"aoColumns": [
	{ "mData": "id" },
	{ "mData": "descrizione" },
	...
]

[evil_stefano]

mi sto perdendo un po' con queste colonne dinamiche..

da quanto ho letto bisogna usare mData e specificare con aoColumnDefs, ma continua a darmi l'errore:

DataTables warning (table id = 'mytable'): Requested unknown parameter '0' from the data source for row 0


Questo è il json di ritorno dalla ajax:

{
  "iTotalRecords": 1,
  "iTotalDisplayRecords": 1,
  "sEcho": "1",
  "sColumns": "",
  "aaData": [
    {
      "id": 1,
      "descrizione": "Border router"
    }
  ],
  "aoColumnDefs": [
    {
      "mData": "id",
      "aTargets": [
        0
      ]
    },
    {
      "mData": "descrizione",
      "aTargets": [
        1
      ]
    }
  ]
}

per avere nel campo aTargets le parentesi quadre ho dovuto dichiarlo così:

class DataColumn {
    private String mData;
    private int aTargets[] = new int[1];
...

è osceno ma non riesco a trovare altro modo.. tra l'altro facendo così il Gson quando converte l'array di interi in json va a capo dopo la parentesi quadra..
"aTargets": [
1
]

.. -.-"

[evil_stefano]

risolto..
ho creato 2 classi + 1 servlet per gestire i nomi delle colonne dal db, e nell'index.jsp faccio un ajax call in cui prendo i nomi delle colonne, se ritorna i dati in json allora li parso e creo la tabella.

se qualcuno vuole le classi per vedere come ho fatto poi le posto.

	<script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			url: "../GetTableColumnEntity",
			dataType: "text",
			success: function(data) {
				var json = $.parseJSON(data);				
				var aryJSONColTable = [];
				
				for (var i=0; i < json.length; i++ ) {
					  aryJSONColTable.push({
						  "mData": json[i].mData,
						  "sTitle": json[i].sTitle,
						  "bSearchable": json[i].bSearchable,
						  "bVisible": json[i].bVisible,
						  "aTargets": [i]
					   });
				};
				
			    $("#mytable").dataTable( {
			        "bProcessing": false,
			        "bServerSide": false,
			        "sAjaxSource": "../PopulateTableDevice",
			        "bJQueryUI": true,
			        "sServerMethod": "POST",
					"sScrollX": "100%",
					"sScrollXInner": "110%",
					"bScrollCollapse": true,
			        "aoColumns": aryJSONColTable
			    } );
			}
		});
	});
    </script>