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

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.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        

        <meta name="viewport" content="width = 320" />  
        <title>Songbook</title>
        <LINK REL="SHORTCUT ICON" HREF="favicon.ico" />  
        <link rel="stylesheet" type="text/css" href="style.css" media="all and (min-width:750px)"/>  
        <link rel="stylesheet" type="text/css" href="style_mobile.css" media="all and (max-width: 750px)"/>  
        <script>
        
        
        
        
        
            function checkEntries(page){
                var xmlhttp;
                if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                } else {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
                }

                xmlhttp.onreadystatechange=function(){
                    if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        document.getElementById("songList").innerHTML=xmlhttp.responseText;  
                    }
                }
                
    query="title=" + document.getElementById("title").value + "&artist=" + escape(document.getElementById("artist").value) + "&lang="+ escape(document.getElementById("lang").value) + "&page=" + page;  
                xmlhttp.open("POST","ajax_song_result.php",true);  
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
                xmlhttp.send(query);
                fade();
            }
            function searchArtist(artist){
                document.getElementById("artist").value=artist;  
                document.getElementById("title").value='';  
                document.getElementById("lang").selectedIndex=0;  
                checkEntries(1);
            }
            function reset(obj) {
                document.getElementById(obj).value='';  
                checkEntries(1);
            }
            function fade(){
                var objs = document.getElementById("results").style;  
                objs.opacity = (0.1);
                objs.MozOpacity = (0.1);
                objs.KhtmlOpacity = (0.1);
                objs.filter = "alpha(opacity=100)";  
            }
        </script>
        
        
        
        
    	<style type="text/css">  
.auto-style1 {
	font-size: large;
}
.auto-style2 {
	font-size: x-large;
}
.auto-style3 {
	font-size: xx-large;
}
.auto-style4 {
	margin-top: 12px;
}
		.auto-style7 {
			font-size: 36pt;
		}
		.auto-style8 {
			margin-top: 0px;
		}
		.auto-style10 {
			margin-left: 1px;
		}
		.auto-style11 {
			margin-left: 2px;
		}
		.auto-style12 {
			margin-top: 57px;
		}
		</style>
    </head>
    <body onload="javascript:checkEntries(1)" style="background-color: #009900">  
<div class="bg">  
<div class="auto-style8" style="height: 87px">  
	<strong><span class="auto-style3">&nbsp;</span><div id="layer1" style="position: absolute; width: 239px; height: 59px; z-index: 1; left: 12px; top: 21px">  
		<strong>
<span class="auto-style7">Songbook<br><br></span></strong></div>  
	</strong><div class="auto-style12" style="height: 93px">  
		<span class="auto-style2">  
		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">  
<option selected value="All">All</option">  
<option value="German">german</option>  
<option value="English">english</option>  
<option value="Italian">italian</option>  

</select>&nbsp;&nbsp;&nbsp;<span class="auto-style1">&nbsp;&nbsp;  
	</span><span class="auto-style2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
		<br>Artist</span><span class="auto-style1">&nbsp;  
	</span>
		<input type="text" onkeyup="checkEntries()" id="artist" style="height: 23px">  
	<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;   
		<br>Title&nbsp; &nbsp;</span><input type="text" onkeyup="checkEntries()" id="title" style="height: 24px" class="auto-style11">  
	<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;  
	</span></strong></div>
	<div id="songList">  
		<h2 class="auto-style4">&nbsp;</h2>  
		<h2 class="auto-style4">Start typing...</h2></div>  
</div>
</div>    
</body>
</html>

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 203831

Url: https://administrator.de/forum/mit-php-csv-auslesen-und-als-tabelle-ausgeben-mit-blaettern-und-suchfunktion-203831.html

Ausgedruckt am: 04.04.2025 um 12:04 Uhr

7 Kommentare

Neuester Kommentar

Hallo,

dataTables ist ein jquery Plugin und kann was du willst.

Gruß

Man könnte das auch in eine SqLite DB importieren (wenn keine andere zur Verfügung steht) und dann mit SQL arbeiten.

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.

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>

Das laden der Scripts ist akzeptabel aber der Ladevorgang der vielen XML Daten hängt sich bei Mobiles auf.

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.

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.

Frage PHP Entwicklung

Heiß diskutiert