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

Bexx

Bexx

Verrückte Erfinderin bei Daniel Düsentrieb
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...
 
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.
 
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 :confused:

Für einzelne values würde ich getElementByID('myID').value verwenden, aber wie sieht das bei Listen aus?
 
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 ;)
 
Aaaaaalso ;) :

meine File sieht bisher einfach nur so aus:


Code: 
<?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
Code: 
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?
 
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 ?!
 
Die Java Source im Bean sähe so aus (existiert noch nicht)

Java: 
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 ...
 
Zuletzt bearbeitet:
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.
 
Jetzt aber : ;)


Code: 
<?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>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück