2017-04-01 5 views
1

Ich möchte das folgende vorstellen, indem ich sage, dass ich ziemlich Neuling bei HTML-Codierung bin.Splitting große HTML-Datei in mehreren Dateien

Ich baue gerade eine relativ große Datenbank (2000 Einträge) in Excel und möchte diese Datenbank auf meiner Website zur Verfügung stellen. Was ich angefangen habe, ist die Konvertierung der Excel-Daten in HTML-Daten, und dann mit dem DataTables jQuery-Plugin, um es in eine schöne durchsuchbare HTML-Tabelle zu konvertieren. Hier ist, was mein Code wie folgt aussieht:

<html> 
<head> 

<link rel="stylesheet" type="text/css" href="DataTables-1.10.13/datatables.min.css"/> 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/fh-3.1.2/datatables.min.js"></script> 

<style> 
    some style options 
</style> 

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
    $('#booklist').dataTable({ 
    }); 
    }); 
</script> 
</head> 

<body> 
<table id="booklist" class="display"> 
Table data here 
</table> 
</body> 
</html> 

Ich bin immer noch in regelmäßigen Abständen die Datenbank aktualisiert, und mit kopieren und die neuen Tabellendaten in das Dokument einfügen, jedes Mal ärgerlich, vor allem, da es rund 10000 Zeilen darstellt.

Ich frage mich, ob es eine Möglichkeit gibt, die Tabellendaten in einer separaten Datei zu speichern, etwa b.html, und sie so zu importieren, dass sie genauso interpretiert wird, wie den Inhalt direkt dort einzufügen, wo " Tabellendaten hier "erscheint in meinem ursprünglichen Code.

Ich versuchte mit jQuery .load() Funktion, aber konnte es nicht zur Arbeit. Ist es problematisch, dass ich CSS-Formatierung verwende?

Lassen Sie mich wissen, was Sie denken, ist die beste Lösung für mein Problem.

Vielen Dank!

+0

Die Verwendung von '.load()' und dann Aufruf der '.dataTable()' -Funktion innerhalb der '.load()' Methode vollständigen Rückruf sollte in Ordnung sein. Was ist passiert, als Sie "es nicht zur Arbeit bringen konnten"? Wurden die Daten geladen, aber nicht formatiert oder überhaupt nicht geladen, oder ist in der Browserkonsole ein Fehler aufgetreten, oder ...? – nnnnnn

Antwort

0

ich wenn es eine Möglichkeit gibt, die Tabellendaten beizubehalten eine separate Datei, etwa b.html, und sie so zu importieren, dass sie genauso interpretiert wird, als würde man den Inhalt direkt dort einfügen, wo "Tabellendaten hier" in meinem ursprünglichen Code erscheinen.

Sie haben definitiv die richtige Idee. Sie können eine HTTP-Anfrage für HTML (oder Daten jeglicher Art) erstellen. Es gibt mehrere Möglichkeiten, dies zu tun, aber eine einfache Möglichkeit ist die Verwendung der $(...).load('/...')-Funktion von jQuery, so wie Sie es gerade tun.

$("#result").load("test.html"); 

wo result ist die ID des div Sie mit dem Wert auffüllen möchten von test.html

Dies wird einen Antrag auf test.html und legte in dem Dokument in einem div mit der ID result machen.

Unter der Haube sendet $(...).load() eine Anfrage asynchron und aktualisiert das Element, wenn die Anfrage abgeschlossen ist. Zusätzlich zu der URL sollten Sie auch einen Rückruf zum Ausführen von Code bereitstellen, nachdem der Ladeaufruf beendet wurde. Daher können wir DataTable()nach die HTML-Lasten aufrufen.

// this URL would be an http://... in actual use 
 
// table taken from w3schools 
 
let url = "data:text/html,%3Ctable%20id%3D%22my-table%22%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Cth%3ECompany%3C%2Fth%3E%0A%20%20%20%20%3Cth%3EContact%3C%2Fth%3E%0A%20%20%20%20%3Cth%3ECountry%3C%2Fth%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EAlfreds%20Futterkiste%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EMaria%20Anders%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EGermany%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3ECentro%20comercial%20Moctezuma%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EFrancisco%20Chang%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EMexico%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EErnst%20Handel%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3ERoland%20Mendel%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EAustria%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EIsland%20Trading%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EHelen%20Bennett%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EUK%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3ELaughing%20Bacchus%20Winecellars%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EYoshi%20Tannamuri%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3ECanada%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3EMagazzini%20Alimentari%20Riuniti%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EGiovanni%20Rovelli%3C%2Ftd%3E%0A%20%20%20%20%3Ctd%3EItaly%3C%2Ftd%3E%0A%20%20%3C%2Ftr%3E%0A%3C%2Ftable%3E"; 
 

 
// need to give `load` a callback so we can run code *after* the HTML loads 
 
$('#result').load(url, function() { 
 
    $('#my-table').DataTable(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 

 
<div> 
 
    <div>result get populated below:</div> 
 
    <div id="result"> 
 
    </div> 
 
</div>


mich denken, was Sie wissen Lassen Sie die beste Lösung für mein Problem ist.

Wenn Sie eine riesige Tabelle haben, könnten Sie wahrscheinlich, dass als CSV speichern und verwenden a CSV parser jede Zeile in der Tabelle in HTML zu einer Reihe zu verwandeln. Dies beinhaltet:

  1. eine ajax Anfrage mit jquery (oder fetch) für die Daten als CSV
  2. es in Arrays
  3. dass Reihen von HTML Transformation Parsen und Addieren derselben zu dem Dokument
  4. dann schließlich Aufruf DataTables()

Aber wenn Ihre Datenbank relativ groß ist, dann sollten Sie versuchen, für die dynamische Paginierung gehen, die ohne Server-Code ist schwer (NodeJS, pHP, Java, etc.).

+0

Vielen Dank. Ich habe es dank Ihrer Hilfe endlich funktioniert. Ich denke, ein Teil des Problems, das ich hatte, war, dass ich '.load()' überhaupt nicht verwenden konnte, und es endete damit, dass ich Chrome verwendete. Irgendwie bekomme ich nur eine leere Seite, als ob nichts importiert würde. Es funktioniert gut mit Firefox. Wer weiß, was los ist? – ZetaOrionis

+0

Öffnen Sie die Entwicklerkonsole (F12) in Chrom und lassen Sie mich wissen, ob es Fehler gibt –

+0

Hier ist die Fehlermeldung für Chrome. 'XMLHttpRequest kann Datei: /// [...] /test.html nicht laden. Cross-Ursprungsanforderungen werden nur für Protokollschemata unterstützt: http, data, chrome, chrome-extension, https. Nicht sicher, was es bedeutet. – ZetaOrionis

1

Sie <link> Element mit rel Attribut auf import verwenden können, Daten .import Eigenschaft link Element erhalten, das eine Verfeinerung document

<link rel="import" type="text/html" href="b.html" /> 

<head> 
 
<link id="data" 
 
     rel="import" 
 
     type="text/html" 
 
     href='data:text/html,{"abc":123, "def":[4,5,6]}' /> 
 
</head> 
 
<body> 
 
    <script> 
 
    const data = document.getElementById("data"); 
 
    let entries = JSON.parse(data.import.body.textContent); 
 

 
    console.log(entries); 
 
    /* 
 
    $(document).ready(function() { 
 
     $('#booklist').dataTable({ 
 
     // populate `.dataTable()` with selected `entries` 
 
     }) 
 
    }); 
 
    */ 
 

 
    </script> 
 
</body>
fragen, kehrt