Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

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, 3576 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 ..
Neuester Wissensbeitrag
Humor (lol)

Linkliste für Adventskalender

(3)

Information von nikoatit zum Thema Humor (lol) ...

Ähnliche Inhalte
VB for Applications
Mehrere Spalten Durchsuchen und Ergebnisse in neuer Tabelle Ausgeben (3)

Frage von Mr.Green zum Thema VB for Applications ...

VB for Applications
Bestimmte Daten aus eine CSV-Datei in eine Excel-Tabelle importieren (2)

Frage von MariaElena zum Thema VB for Applications ...

JavaScript
gelöst Dropdownfeld auslesen und mit AJAX und JS an PHP senden (7)

Frage von ITFlori zum Thema JavaScript ...

PHP
gelöst HTML Dropdownmenü auslesen und in PHP als Variable übergeben (35)

Frage von ITFlori zum Thema PHP ...

Heiß diskutierte Inhalte
Router & Routing
gelöst Ipv4 mieten (22)

Frage von homermg zum Thema Router & Routing ...

Windows Server
DHCP Server switchen (20)

Frage von M.Marz zum Thema Windows Server ...

Exchange Server
gelöst Exchange 2010 Berechtigungen wiederherstellen (20)

Frage von semperf1delis zum Thema Exchange Server ...

Hardware
gelöst Negative Erfahrungen LAN-Karten (19)

Frage von MegaGiga zum Thema Hardware ...