# [jQuery-dataTables] jQuery dataTable erstellen mit DB-Einträgen



## Bexx (22. Juli 2010)

Hi Foris,

folgendes Problem :

Ich muss einen jQuery - dataTable erstellen, der seine Werte aus der DB bezieht.
Wisst ihr wie ich das hinbekomme?

Meine JS - Kenntnisse beschränken sich leider auf basic-syntax und eine einfachere Anwendung zur Manipulation von
JSF-Komponenten.

Daher bin ich für eine Hilfestellung / nette Doku sehr dankbar...


----------



## rd4eva (22. Juli 2010)

Javascript besitzt keine Möglichkeiten auf Datenbanken zuzugreifen.

Javascript kann höchstens einen Request an den Server schicken, welcher dann von z.B. PHP ausgewertet wird.
Die Antwort die Javascript dann bekommt kannst du verwenden um die Datatable zu basteln.


----------



## Bexx (22. Juli 2010)

Ok, ich muss umformulieren.

Ich bekomme meine Daten von JSF durch ein ManagedBean, welches wiederum die Daten aus der DB bezieht.
Ich kann jetzt über JSF auf das ManagedBean zugreifen und habe die Daten in meiner XHTML verfügbar.

Die Frage, die ich mir nun stelle ist folegende: Wie kommt mein JavaScript an diese Daten nun ran 

Für einzelne values würde ich getElementByID('myID').value verwenden, aber wie sieht das bei Listen aus?


----------



## rd4eva (22. Juli 2010)

Da sich meine Kenntnisse der Java-Welt bei ca. 0 befinden muss ich nochmal blöd nachfragen ob ich das jetzt richtig kapiert hab.

Deine aus der Datenbank gelesenen Daten befinden sich bereits in der html datei in der du das script ausführen willst?
Falls ja kannst du ja mal ein bisl quelltext posten wie das jetzt aussieht.

Btw.Wenn du mit jQuery arbeitest brauchst du kein getElementByID('myID') mehr. $('#myID') reicht


----------



## Bexx (22. Juli 2010)

Aaaaaalso  :

meine File sieht bisher einfach nur so aus:



```
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:head>
        <script  type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" />
        <script  type="text/javascript" src="http://plugins.jquery.com/files/jquery.colorize-1.6.0.js.txt" />
        <script type="text/javascript"  src="/js/jquery.dataTables.min.js"/>
    </h:head>
    <h:body>
        <script type="text/javascript">
            jQuery(document).ready(function(){

               //HIER IWANN INITIALISIERUNG MEINES JQUERY-TABLES

            });
        </script>
    </h:body>
    <p:dataTable var="myItem" value="#{myBean.myManagedItems}" id="dataTable" rows="50" paginator="true">
        <f:facet name="MyColumn">
            <h:outputText value="myItem.name"/>
        </f:facet>
    </p:dataTable>
</html>
```

Nur als Beispiel ^ ^ 

Nun möchte ich aber an die Liste die im value Attribut angegeben ist 
	
	
	



```
value="#{myBean.myManagedItems}"
```
kommen und deren values in meinem Script verwenden....
Das Problem ist, ich weiß nicht wie ich an die Values aus einem ManagedJavaBean komme 

Vllt lieber Java EE Forum?


----------



## rd4eva (22. Juli 2010)

Ich meinte eigentlich den Quelltext der Seite und nicht der Datei, denn wenn ich das richtig verstehe wird dir <p:dataTable doch eine html tabelle auf den Bildschirm zaubern oder ?!


----------



## Bexx (22. Juli 2010)

Die Java Source im Bean sähe so aus (existiert noch nicht)


```
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 *
 * @author r.sax
 */

@SessionScoped
@Named
public class TableBean implements Serializable{
    
    private List<ManagedItems> myManagedItems = new ArrayList();


    public TableBean(){}

    public List<ManagedItems> getMyManagedItems() {
        return myManagedItems;
    }

    public void setMyManagedItems(List<ManagedItems> myManagedItems) {
        this.myManagedItems = myManagedItems;
    }
      
    
}
```

und stimmt, das p:dataTable Tag wird in JS und HTML gerendert ...


----------



## rd4eva (22. Juli 2010)

Immernoch nicht das was ich meinte .
Ich meinte genau das was dann als html am ende dabei raus kommt.
Also Datei im Browser öffnen -> rechtsklick -> Quellcode / Quelltext anzeigen.


----------



## Bexx (22. Juli 2010)

Jetzt aber : 



```
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" type="text/css" href="/jQueryTable-war/primefaces_resource/2.1.RC1/skins/sam/skin.css" />
<link rel="stylesheet" type="text/css" href="/jQueryTable-war/primefaces_resource/2.1.RC1/primefaces/paginator/paginator.css" />
<link rel="stylesheet" type="text/css" href="/jQueryTable-war/primefaces_resource/2.1.RC1/primefaces/datatable/datatable.css" />
<script type="text/javascript" src="/jQueryTable-war/primefaces_resource/2.1.RC1/jquery/jquery.js"></script>
<script type="text/javascript" src="/jQueryTable-war/primefaces_resource/2.1.RC1/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="/jQueryTable-war/primefaces_resource/2.1.RC1/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="/jQueryTable-war/primefaces_resource/2.1.RC1/primefaces/paginator/paginator.js"></script>
<script type="text/javascript" src="/jQueryTable-war/primefaces_resource/2.1.RC1/yui/datatable/datatable-min.js"></script>
<script type="text/javascript" src="/jQueryTable-war/primefaces_resource/2.1.RC1/primefaces/core/core.js"></script>

<script type="text/javascript" src="/jQueryTable-war/primefaces_resource/2.1.RC1/primefaces/datatable/datatable.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="http://plugins.jquery.com/files/jquery.colorize-1.6.0.js.txt"></script>
        <script type="text/javascript" src="/js/jquery.dataTables.min.js"></script></head><body>
        <script type="text/javascript">
            jQuery(document).ready(function(){

                

            });
        </script></body><div id="dataTable"><div id="dataTable_container"><table id="dataTable_table" style="display:none"><tbody></tbody></table></div><input type="hidden" id="dataTable_page" name="dataTable_page" value="1" /></div><script type="text/javascript">var widget_dataTable_columnDef = [{key:'rowIndex', hidden:true}];
var widget_dataTable_datasource = new YAHOO.util.DataSource(YAHOO.util.Dom.get('dataTable_table'));
widget_dataTable_datasource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
widget_dataTable_datasource.responseSchema = {fields:[{key:'rowIndex'}]};
widget_dataTable = new PrimeFaces.widget.DataTable('dataTable',widget_dataTable_columnDef,widget_dataTable_datasource, {dynamicData:false,paginator:new YAHOO.widget.Paginator({
rowsPerPage:50,totalRecords:0,initialPage:1})
});</script>
</html>
```


----------



## Bexx (22. Juli 2010)

Hab die Lösung gefunden 

Ich habe sie bisher noch nicht getestet, bzw. in mein Projekt implementiert, 
aber folgendes Dokument liefert eine wundervolle und zugleich simple Erklärung für mein Problem 

http://translate.google.de/translat...2009/05/javajspjsf-and-javascript.html&anno=2


danke natürlich für deine Mühe rd4eva


----------

