Datatables - JQuery [Resolvido]

10 respostas
quintanilhasi

Bom dia a todos!

Alguém teria alguma solução para exibir uma datatable jquery com mais de 20.000 linhas de registro. Pois quando eu exibo a página demora muito para carregar.

Desde já agradeço.

10 Respostas

lele_vader

Você precisa usar um datatable paginado pelo server, para não carregar todos esses registros na memória.

Aqu item algo que talvez possa lhe ajudar.

http://www.datatables.net/release-datatables/examples/data_sources/server_side.html

quintanilhasi

estava retornando um vector e ai sim que preenchia o datatable, vou passar um JSon pra ver se fica melhor.

se melhorar disponibilizo aqui para voces a solução com o código fonte.

quintanilhasi

Acabei de colocar JSon mas fica lento também. O problema é que eu não entendo de php, então Server side (PHP) code eu nao entendi mt bem. Será que existe um modelo so que em java?

lele_vader

E a mesma coisa.
Você faria um servlet talvez que retornasse uma String em json.
Mas teria que retornar esses parâmetros da forma que o datatables aceita.

20000 registros de uma vez não vai dar não.

quintanilhasi

lele_vader ja estou retornando uma string em json…vc tem algum exemplo de como iria carregar o datatable aos poucos?

lele_vader

eu nunca fiz isso não, porém pelo que li você tem que retornar o json na estrutura que está naquela página que te passei.

Tem uns campos para dizer a página que se está e a quantidade de registros a se trazer.

Eu lembro que vi uma implementação com .net eu acho;

Procura por server side processing datatables.

Algo assim.

lele_vader

Acho que achei.

Dá uma olhada aqui.

http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications

quintanilhasi

vou olhar o codigo…obrigado pela ajuda!

quintanilhasi

Pessoal obrigado pela ajuda e segue abaixo o código conforme prometido.

Vraptor 3/jquery (Datatables)/jsp/hibernate/mysql tenho no banco 75.000 clientes e funciona perfeitamente.

ClienteController.java
private HttpServletRequest request;
private HttpServletResponse response;

public ClienteController(ClienteDAO cdao, Result result,	HttpServletRequest request, HttpServletResponse response) {
		this.cdao = cdao;
		this.result = result;
		this.request = request;
		this.response = response;
	}

public void search(HttpServletRequest request, HttpServletResponse response) throws IOException {
		this.request = request;
		this.response = response;
		List<Cliente> clientes = new ArrayList<Cliente>();
		JsonResponse jr = new JsonResponse();
		List rows = new ArrayList();
		
		JQueryDataTableParamModel param = DataTablesParamUtility
				.getParam(request);
			
		String sEcho = param.sEcho;	
		
		long iTotalRecords; // total number of records (unfiltered)
		int iTotalDisplayRecords; // value will be set when code filters
									// companies by keyword
		JsonArray data = new JsonArray(); // data that will be shown in the
											// table
		iTotalRecords = cdao.count();

		
		if (!param.sSearch.isEmpty() || !param.sSearch.equals("")) {
			clientes = cdao.selectLike(param.sSearch);
		}else{
			clientes = cdao.listAll();
		}
		iTotalDisplayRecords = clientes.size();
		final int sortColumnIndex = param.iSortColumnIndex;
		final int sortDirection = param.sSortDirection.equals("asc") ? -1 : 1;

		JsonResponse jresponse = new JsonResponse();
		jresponse.setsEcho(sEcho);
		jresponse.setiTotalRecords(iTotalRecords);
		jresponse.setiTotalDisplayRecords(iTotalDisplayRecords);
		
		if(clientes.size()< param.iDisplayStart + param.iDisplayLength) {
			clientes = clientes.subList(param.iDisplayStart, clientes.size());
		} else {
			clientes = clientes.subList(param.iDisplayStart, param.iDisplayStart + param.iDisplayLength);
		}
		
		
		
		if(clientes.size() < 2000){		
		for (Cliente c : clientes) {
			JsonResponseRow jrr = new JsonResponseRow();
			jrr.setId(c.getId());
			jrr.setNome(c.getNome());
			jrr.setCpf_cnpj(c.getCpf_cnpj());
			jrr.setTelefone_1(c.getTelefone_1());
			jrr.setTelefone_2(c.getTelefone_2());			
			rows.add(jrr);			
			}
		}
		//System.out.println(rows.toString());
		jr.setAaData(rows);
		jr.setsEcho(sEcho);
		jr.setiTotalRecords(iTotalRecords);
		jr.setiTotalDisplayRecords(iTotalDisplayRecords);		
		
		jresponse.setAaData(clientes.subList(0, clientes.size()));
		//System.out.println(jresponse.getAaData());
				
		result.use(json()).withoutRoot().from(jr).include("aaData").serialize();	

	}
Model JQueryDataTableParamModel.java
public class JQueryDataTableParamModel {
    public String sEcho;
    public String sSearch;
    public int iDisplayLength;
    public int iDisplayStart;
    public int iColumns;	
    public int iSortingCols;
    public int iSortColumnIndex;
    public String sSortDirection;
    public String sColumns;
}
DataTablesParamUtility.java
public class DataTablesParamUtility {	
	public static JQueryDataTableParamModel getParam(HttpServletRequest request)
	{
		if(request.getParameter("sEcho")!=null && request.getParameter("sEcho")!= "")
		{
			JQueryDataTableParamModel param = new JQueryDataTableParamModel();
			param.sEcho = request.getParameter("sEcho");
			param.sSearch = request.getParameter("sSearch");
			param.sColumns = request.getParameter("sColumns");
			param.iDisplayStart = Integer.parseInt( request.getParameter("iDisplayStart") );
			param.iDisplayLength = Integer.parseInt( request.getParameter("iDisplayLength") );
			param.iColumns = Integer.parseInt( request.getParameter("iColumns") );
			param.iSortingCols = Integer.parseInt( request.getParameter("iSortingCols") );
			param.iSortColumnIndex = Integer.parseInt(request.getParameter("iSortCol_0"));
			param.sSortDirection = request.getParameter("sSortDir_0");
			return param;
		}else
			return null;
	}
}
essa é a jsp
$('#tablecliente').dataTable({					
					"bServerSide": true,
	                "sAjaxSource": "/curinga/cliente/search",
	                "bProcessing": true,
	                "sPaginationType": "full_numbers",
	                "bJQueryUI": true,
	                "aoColumns": [
	                              { "mDataProp": "id" },
	                              { "mDataProp": "nome" },
	                              { "mDataProp": "cpf_cnpj" },
	                              { "mDataProp": "telefone_1" },
	                              { "mDataProp": "telefone_2" }	                                                       
	                          ]                
					});

<table class="display" id="tablecliente">
			<thead>
				<tr>
					<th>Id</th>
					<th>Nome</th>
					<th>Cpf/Cnpj</th>
					<th>Celular</th>
					<th>Telefone</th>
				</tr>
			</thead>
lele_vader

Valeu jovem.
Vou guardar aqui para quando precisar também.

Obrigado.

Criado 6 de fevereiro de 2013
Ultima resposta 15 de fev. de 2013
Respostas 10
Participantes 2