[jQuery-dataTables] jQuery dataTable erstellen mit DB-Einträgen @ tutorials.de: Tutorials, Forum & Hilfe

Bexx · 22.07.10 14:15

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.07.10 14:28

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.07.10 14:32

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.07.10 14:41

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.07.10 14:56

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 :

1	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.07.10 15:06

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.07.10 15:14

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

Code 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 ...

rd4eva · 22.07.10 15:17

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.07.10 15:35

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>

Bexx · 22.07.10 15:51

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/translate...pt.html&anno=2

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

jQuery: Response direkt anzeigen bzw. auf Response warten bzw. jQuery und Servlet

Formularverarbeitung im Hintergrund +File Upload / jquery /jquery.valitation

[jQuery] - Selektor Prinzip bzw. Struktur von jQuery nachbilden

jQuery noConflict Mode & jQuery Plugins?

jQuery: jQuery auf AJAX Response anwenden

E-Mail:

Abonnieren Abbestellen