Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Mit PHP CSV auslesen und als Tabelle ausgeben mit Blättern und suchfunktion

Frage Entwicklung PHP

Mitglied: BigMac121263

BigMac121263 (Level 1) - Jetzt verbinden

22.03.2013, aktualisiert 26.03.2013, 3787 Aufrufe, 7 Kommentare

Hallo

Ich habe eine HTML Seite die an sich schon funktioniert aber die Einbindung einer CSV Datei mit einer Songliste a 3 Spalten (etwa 40000 Songs) bekomme ich nicht hin. Ich kann die Daten anzeigen aber nicht blättern oder suchen. Hat jemand PHP beispiele oder einen PHP Script der die Verbindung und Darstellung zu diesem herstellt. Und wenn möglich auch "stylebar".

Der HTML Code der Seite sieht so aus und sollte funktionieren. Die Datenübernahme und Ansteuerung der PHP übernimmt hier der Javascript.

01.
<!DOCTYPE html> 
02.
<html> 
03.
    <head> 
04.
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
05.
         
06.
 
07.
        <meta name="viewport" content="width = 320" /> 
08.
        <title>Songbook</title> 
09.
        <LINK REL="SHORTCUT ICON" HREF="favicon.ico" /> 
10.
        <link rel="stylesheet" type="text/css" href="style.css" media="all and (min-width:750px)"/> 
11.
        <link rel="stylesheet" type="text/css" href="style_mobile.css" media="all and (max-width: 750px)"/> 
12.
        <script> 
13.
         
14.
         
15.
         
16.
         
17.
         
18.
            function checkEntries(page){ 
19.
                var xmlhttp; 
20.
                if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari 
21.
                    xmlhttp=new XMLHttpRequest(); 
22.
                } else {// code for IE6, IE5 
23.
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
24.
25.
 
26.
                xmlhttp.onreadystatechange=function(){ 
27.
                    if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
28.
                        document.getElementById("songList").innerHTML=xmlhttp.responseText; 
29.
30.
31.
                 
32.
    query="title=" + document.getElementById("title").value + "&artist=" + escape(document.getElementById("artist").value) + "&lang="+ escape(document.getElementById("lang").value) + "&page=" + page; 
33.
                xmlhttp.open("POST","ajax_song_result.php",true); 
34.
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
35.
                xmlhttp.send(query); 
36.
                fade(); 
37.
38.
            function searchArtist(artist){ 
39.
                document.getElementById("artist").value=artist; 
40.
                document.getElementById("title").value=''; 
41.
                document.getElementById("lang").selectedIndex=0; 
42.
                checkEntries(1); 
43.
44.
            function reset(obj) { 
45.
                document.getElementById(obj).value=''; 
46.
                checkEntries(1); 
47.
48.
            function fade(){ 
49.
                var objs = document.getElementById("results").style; 
50.
                objs.opacity = (0.1); 
51.
                objs.MozOpacity = (0.1); 
52.
                objs.KhtmlOpacity = (0.1); 
53.
                objs.filter = "alpha(opacity=100)"
54.
55.
        </script> 
56.
         
57.
         
58.
         
59.
         
60.
    	<style type="text/css"
61.
.auto-style1 { 
62.
	font-size: large; 
63.
64.
.auto-style2 { 
65.
	font-size: x-large; 
66.
67.
.auto-style3 { 
68.
	font-size: xx-large; 
69.
70.
.auto-style4 { 
71.
	margin-top: 12px; 
72.
73.
		.auto-style7 { 
74.
			font-size: 36pt; 
75.
76.
		.auto-style8 { 
77.
			margin-top: 0px; 
78.
79.
		.auto-style10 { 
80.
			margin-left: 1px; 
81.
82.
		.auto-style11 { 
83.
			margin-left: 2px; 
84.
85.
		.auto-style12 { 
86.
			margin-top: 57px; 
87.
88.
		</style> 
89.
    </head> 
90.
    <body onload="javascript:checkEntries(1)" style="background-color: #009900"
91.
<div class="bg"
92.
<div class="auto-style8" style="height: 87px"
93.
	<strong><span class="auto-style3">&nbsp;</span><div id="layer1" style="position: absolute; width: 239px; height: 59px; z-index: 1; left: 12px; top: 21px"
94.
		<strong> 
95.
<span class="auto-style7">Songbook<br><br></span></strong></div> 
96.
	</strong><div class="auto-style12" style="height: 93px"
97.
		<span class="auto-style2"
98.
		Language</span><span class="auto-style1"> </span>&nbsp;<select onchange="checkEntries()" id="lang" size="1" style="height: 23px; width: 88px;" name="D1" class="auto-style10"
99.
<option selected value="All">All</option"
100.
<option value="German">german</option> 
101.
<option value="English">english</option> 
102.
<option value="Italian">italian</option> 
103.
 
104.
</select>&nbsp;&nbsp;&nbsp;<span class="auto-style1">&nbsp;&nbsp; 
105.
	</span><span class="auto-style2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
106.
		<br>Artist</span><span class="auto-style1">&nbsp; 
107.
	</span> 
108.
		<input type="text" onkeyup="checkEntries()" id="artist" style="height: 23px"
109.
	<img src="images/pass.png" onClick="javascript:reset('artist');" height="22" width="23">&nbsp;&nbsp;<span class="auto-style1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="auto-style2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
110.
		<br>Title&nbsp; &nbsp;</span><input type="text" onkeyup="checkEntries()" id="title" style="height: 24px" class="auto-style11"
111.
	<img src="images/hover.png" onClick="javascript:reset('title');" height="23" width="21" class="auto-style10"><strong><span class="auto-style3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
112.
	</span></strong></div> 
113.
	<div id="songList"
114.
		<h2 class="auto-style4">&nbsp;</h2> 
115.
		<h2 class="auto-style4">Start typing...</h2></div> 
116.
</div> 
117.
</div>     
118.
</body> 
119.
</html>
Mitglied: Hitman4021
22.03.2013 um 23:38 Uhr
Hallo,

dataTables ist ein jquery Plugin und kann was du willst.

Gruß
Bitte warten ..
Mitglied: nxclass
23.03.2013 um 00:03 Uhr
Man könnte das auch in eine SqLite DB importieren (wenn keine andere zur Verfügung steht) und dann mit SQL arbeiten.
Bitte warten ..
Mitglied: Bierkistenschlepper
29.03.2013, aktualisiert um 14:35 Uhr
Du kannst doch ohne jede Probleme mit PHP CSV auslesen und dann z.B. als HTML abspeichern. Ich würde dir empfehlen einen Cronjob zu machen, der die Datei zweimal am Tag neu generiert. jQuery ist viel zu langsam für solche Anwendungen.

Die Datenbanklösung wäre von der Performance her am besten, lohnt aber nur bei relativ vielen Aktualisierungen.
Bitte warten ..
Mitglied: BigMac121263
29.03.2013 um 20:20 Uhr
Hallo und Danke für die Antwort.

Ich bin schon etwas weiter gekommen. Habe das mit JGWidgets realisiert bekommen, aber
die Lösung ist sehr langsam, was sich beim Aufruf mit Mobiles bemerkbar macht.
Sowie sie ist, passt das schon irgendwie, da die Aktualisierung einfach ist. Daei ersetzen
und erledigt. Aber jetzt suche ich eine Lösung wie ich das beschleunige.
Bin nicht so fit, aber lernfähig.
Die Lösung die ich habe lädt sehr viele externe JS files und Styles und die XML direkt, was bedeutet,
dass beim Aufruf erstnal ein riesen Datensatz auf den Client geladen wird.
Deshalb mein Bestreben, diese Dinge auf die Serverseite zu verlagern. Und wie man das macht phne den ganzen Code neu zu schreiben, würde ich gerne wissen.
Evtl. mit Ajax oder DOM Objekten, aber da habe ich nich keine Erfahrung. Habe es nach Anleitungen probiert,
aber ohne Erfolg. Vielleicht weiß jemand einen Codeschnipsel, den ich da einsetze, der mir die Daten Serverseitig puffert. (var url .....)

Hier der aktuelle html/PHP Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>UNSER SONGBUCH</title>

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.storage.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var theme = getDemoTheme();

var url = "data/songlist.xml";


prepare the data
var source =
{
datatype: "xml",
datafields: [
{ name: 'Interpret', map: 'interpret' },
{ name: 'Song', map: 'song' },
{ name: 'Version', map: 'sprache' }
],
root: "text_file_report",
record: "item",
id: 'Interpret',
url: url,
pager: function (pagenum, pagesize, oldpagenum) {
callback called when a page or page size is changed.
}
};



var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid(
{
width: 650,
source: source,
theme: theme,
selectionmode: 'multiplerowsextended',
sortable: true,
pageable: true,
autoheight: true,
autoloadstate: false,
autosavestate: false,
columnsresize: true,
columnsreorder: true,
showfilterrow: true,
filterable: true,
columns: [
{ text: 'Interpret', filtercondition: 'starts_with', datafield: 'Interpret', width: 250 },
{ text: 'Song', datafield: 'Song', width: 250 },
{ text: 'Version', datafield: 'Version', width: 150 }
]
});

$("#saveState").jqxButton({ theme: theme });
$("#loadState").jqxButton({ theme: theme });
var state = null;
$("#saveState").click(function () {
save the current state of jqxGrid.
state = $("#jqxgrid").jqxGrid('savestate');
})
;
$("#loadState").click(function () {
load the Grid's state.
if (state) {
$("#jqxgrid").jqxGrid('loadstate', state);
}
else {
$("#jqxgrid").jqxGrid('loadstate');
}
});
});

</script>
<style type="text/css">
.auto-style1 {
font-size: 30pt;
font-family: "Year supply of fairy cakes";
color: #008000;
}
.auto-style2 {
margin-top: 0px;
margin-bottom: 8px;
}
.auto-style3 {
color: #008000;
}
.auto-style4 {
background-color: #FDC066;
}
.auto-style5 {
font-size: 30pt;
}
.auto-style6 {
background-color: #ED7F0F;
}
.auto-style7 {
font-family: "Century Schoolbook";
}

a.menuButton, a.menuButtonActive {
display: block;
float: left;
height: 17px;
color: #bbbbbb;
text-decoration: none;
padding: 5px 6px 5px 6px;
border-right: 1px solid #000000;
}

.auto-style10 {
margin-top: 0px;
}
.auto-style11 {
background-color: #000000;
margin-top: 7px;
}
.auto-style12 {
background-color: #000000;
}
.auto-style13 {
color: #FFFFFF;
}
.auto-style15 {
font-weight: bold;
background-color: #ED7F0F;
}
</style>
</head>
<body class='default' style="background-attachment: fixed; background-color: #000000; width: 654px;">
<div id="layer3" style="position: absolute; width: 80px; height: 88px; z-index: 3; left: 566px; top: 26px">
<img alt="" height="84" src="../images/s2dsplash.jpg" width="89"></div>
<p class="auto-style2" style="height: 144px; width: 653px;">
<br class="auto-style3"></p>
<div id="layer2" class="auto-style6" style="position: absolute; width: 649px; height: 101px; z-index: 2; left: 11px; top: 19px">
<div id="layer4" style="position: absolute; width: 654px; height: 34px; z-index: 1; left: 0px; top: 106px">
<div id="menuBar" class="auto-style10" style="height: 30px; width: 652px">
<a class="menuButton" style="font-weight:bold; color: #ED7F0F; width: 84px;" href="../index2.php" onmouseover="menuTouch(event, '');">
<span lang="de">&nbsp; </span>Startseite</a><a class="menuButton" href="../ueber-uns/index.php" onmouseover="menuTouch(event, '');" style="width: 83px"><span lang="de">&nbsp;&nbsp;
</span>&Uuml;ber uns</a><a class="menuButton" href="../termine/index.php" onmouseover="menuTouch(event, '');" style="width: 82px"><span lang="de">&nbsp;&nbsp;&nbsp;
</span>Termine</a><a class="menuButton" href="index.php" onmouseover="menuTouch(event, '');" style="width: 84px"><span lang="de">&nbsp;&nbsp;&nbsp;&nbsp;
</span>Lokale</a><a class="menuButton" href="../gaestebuch/index.php" onmouseover="menuTouch(event, '');" style="width: 76px"><span lang="de">&nbsp;
</span>G&auml;stebuch</a><a class="menuButton" href="../bilder/index.php" onmouseover="menuTouch(event, '');" style="width: 66px"><span lang="de">&nbsp;&nbsp;&nbsp;
</span>Bilder</a><a class="menuButton" href="../wettkaempfe/index.php" onmouseover="menuTouch(event, 'topicmenu7');" style="width: 79px">Wettk&auml;mpfe</a></div>

</div>
<span class="auto-style5" lang="de"><br>&nbsp;<span class="auto-style7"><strong>UNSER SONGBUCH</strong></span></span></div>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left; width: 652px; height: 392px;" class="auto-style11" visible="true">
<div id="jqxgrid" class="auto-style12">
</div>
<div style="margin-top: 30px;">
<strong>
<input type="button" id="saveState" value="Status speichern" class="auto-style15" /></strong>
<input type="button" id="loadState" value="Status laden" class="auto-style15" />
<span lang="de"><br><br><span class="auto-style13">&nbsp;Suchbegriffe immer vom Anfang her
eingeben.</span><br class="auto-style13"><span class="auto-style13">&nbsp;z.B. Robbie Will.....</span></span></div>
</div>
<div id="layer1" style="position: absolute; width: 245px; height: 119px; z-index: 1; left: 478px; top: 20px; visibility: hidden;" class="auto-style4">
<span class="auto-style1" lang="de">SONGBUCH</span></div>
</body>
</html>
Bitte warten ..
Mitglied: BigMac121263
29.03.2013 um 20:24 Uhr
Das laden der Scripts ist akzeptabel aber der Ladevorgang der vielen XML Daten hängt sich bei Mobiles auf.
Testseite: http://www.kranefoer.com/songbuch/
Bitte warten ..
Mitglied: Bierkistenschlepper
30.03.2013, aktualisiert um 10:10 Uhr
Ich weiß ehrlich gesagt nicht was du willst.

Du hast eine CSV Datei mit 40000 Zeilen. Du hast gerade selbst gesagt, dass es mit Javascript langsam läuft. Lass die Finger von Ajax. Setz dich hin und code dir ein PHP Skript, welches die Ausgabe macht. Das ist ein 5-Zeiler! PHP bringt selbst Funktionen mit, die das Auslesen machen. Die Ausgabe machst du mit einer Tabelle oder mit dl.

Wenn du wenig Erfahrung hast, lasse doch bitte die Finger von Plugins oder Frameworks, deren Arbeitsweise du nicht verstehst. Da ist der Lerneffekt nämlich gering.

P.S. Inline Styles sind Mist.
Bitte warten ..
Mitglied: Bierkistenschlepper
30.03.2013 um 11:26 Uhr
Mir war allerdings nicht klar, dass du eine Suchfunktion hast. Wenn das so ist, dann wäre eine Datenbank eine erheblich bessere Lösung als ne CSV. Kannst dir ja nen Cronjob schreiben, der die Daten in der DB ggfs. aktualisiert. Wie man eine Suche mit CSV effizient realisieren könnte, wüßte ich jetzt echt nicht.

Die Suche (und nur die) machst du mit Ajax/JSON. Dann brauchst du nur ein wenig JS, welches das Suchergebnis aktualisiert. Suchen solltest du ab 3 eingetippten Zeichen.
Bitte warten ..
Ähnliche Inhalte
PHP
Mit PHP eine Telnet abfrage machen und ausgeben
Frage von helmuthelmut2000PHP1 Kommentar

Hallo, Ich möchte folgendes machen und hätte da etwas Hilfe gebraucht. Ich habe an meiner Heizung einen Optolink Adapter ...

Windows Userverwaltung
Ordnergruppenfreigaben in CSV oder HTML auslesen
gelöst Frage von JafThomasWindows Userverwaltung3 Kommentare

Hallo zusammen, ich habe eine Excelliste eines Dienstleisters erhalten die mit den folgenden Daten unserer Fileserver gefüllt werden soll: ...

Batch & Shell
Teile eines Powershell Skriptes in einer Tabelle ausgeben
gelöst Frage von ReneBueBatch & Shell3 Kommentare

Hallo, ich habe mir mit ein bisschen Hilfe ein Skript zusammengebastelt, welches bestimmte AD-Benutzer herrausfiltert und Anzeigt. Anschließend werden ...

Datenbanken
Access Tabellen vergleichen, Abweichungen ausgeben
gelöst Frage von Dr.CornwallisDatenbanken6 Kommentare

Liebe Gemeinde, ist es mit einer Access Abfrage möglich, den Unterschied zweier Tabellen auszugeben(ohne VBA Code)? Ich hätte jetzt ...

Neue Wissensbeiträge
Mac OS X

MacOS wo ist die Tilde ?

Tipp von Alchimedes vor 8 StundenMac OS X1 Kommentar

Hallo, ich hab eine MacOS qwertz Keyboard auf US Layout umgestellt da die Sonderzeichen besser erreichbar sind. Leider fehlt ...

Datenschutz

Weitere Informationen zum Sicherheitsproblem BeA

Information von Penny.Cilin vor 15 StundenDatenschutz

Im folgenden ein weiterer Bericht über die Sicherheitsprobleme von Bea. Fataler Konstruktionsfehler im besonderen elektronischen Anwaltspostfach Gruss Penny

Windows 10

Systemdienste behalten nach Win10 inplace-Upgrade nicht die ggf. modifizierte Startart bei

Tipp von DerWoWusste vor 16 StundenWindows 103 Kommentare

Stellt Euch vor, Ihr habt ein Win10 System und modifiziert dort die Startart von Systemdiensten. Zum Beispiel wollt Ihr ...

Microsoft Office

Deaktivieren von Startbildschirm und Backstage-Ansicht in Office 2016 per Batch-Datei

Anleitung von SarekHL vor 19 StundenMicrosoft Office17 Kommentare

Guten Morgen zusammen! Ich habe mir gestern (auch mit Hilfe dieses Boards) ein Script gebastelt, um in Office 2016 ...

Heiß diskutierte Inhalte
Netzwerke
NTFS-Berechtigung
Frage von Daoudi1973Netzwerke23 Kommentare

Hallo zusammen und frohes neues Jahr (Sorry, ich bin spät dran) Meine Frage: 1- Ich habe einen Ordner im ...

Batch & Shell
AD-Abfrage in Batchdatei und Ergebnis als Variable verarbeiten
gelöst Frage von Winfried-HHBatch & Shell19 Kommentare

Hallo in die Runde! Ich habe eine Ergänzungsfrage zu einem alten Thread von mir. Ausgangslage ist die Batchdatei, die ...

Windows 10
Netbook erkennt Soundkarte nicht - keinerlei Info zum Hersteller und Modell vom Netbook und Hardware bekannt
Frage von fyrb38Windows 1018 Kommentare

Guten Tag, meine Schwester reist in einigen Wochen für ein paar Monate ins Ausland und hat sich dafür ein ...

Microsoft Office
Deaktivieren von Startbildschirm und Backstage-Ansicht in Office 2016 per Batch-Datei
Anleitung von SarekHLMicrosoft Office17 Kommentare

Guten Morgen zusammen! Ich habe mir gestern (auch mit Hilfe dieses Boards) ein Script gebastelt, um in Office 2016 ...