2017-04-01 10 views
1

私はhtmlコーディングではかなり初心者だと言って次のように書いておきます。いくつかのファイルで大きなhtmlファイルを分割する

私は現在、Excelの比較的大きなデータベース(2000エントリ)を構築しており、私はそのデータベースを自分のウェブサイトで利用できるようにしたいと考えています。私がやったのは、ExcelデータをHTMLデータに変換してから、DataTables jQueryプラグインを使用して、検索可能なhtmlテーブルに変換することです。ここに私のコードは次のようになります。私はまだ定期的にデータベースを更新し、文書内のすべての時間を新しいテーブルデータをコピー&ペーストすることが午前

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

は、それが周りに10000行を表し、特に以来、迷惑です。

テーブルデータを別のファイル、たとえばb.htmlに保存し、その内容を単純に直接貼り付けるのと同じように解釈する方法があるかどうかは、テーブルのデータはここに "私の元のコードに表示されます。

jQuery​​機能を使用しようとしましたが、機能しませんでした。私はCSSの書式設定を使用しているのが問題ですか?

あなたの意見が私の問題の最善の解決策であることをお知らせください。

ありがとうございました!

+0

'.load()'を使い、 '.load()'メソッドの完全なコールバックから '.dataTable()'関数を呼び出すことはOKです。あなたが「それを働かせることができなかった」とき何が起こったのですか?データが読み込まれましたが、フォーマットされていないか、まったく読み込まれていないか、ブラウザのコンソールでエラーが発生しましたか? – nnnnnn

答えて

0

を返すことができますテーブルのデータを保持する方法がある場合別のファイル、たとえばb.htmlを読み込んで、その内容を単に「ここのテーブルデータ」が元のコードに表示されている場所に直接貼り付けるのと同じように解釈するようにインポートします。

あなたは間違いなく正しい考えを持っています。 HTML(または実際にはあらゆる種類のデータ)に対してHTTPリクエストを行うことができます。これを行うには複数の方法がありますが、今のようにjQueryの$(...).load('/...')関数を使用するのが簡単な方法です。 resultはあなたがtest.htmlのための要求を行うとid resultでdivの中に文書を入れますtest.html

これの値を移入したいのdivのIDです

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

$(...).load()は要求を非同期的に送信し、要求が完了すると要素を更新します。 URLに加えて、ロードコールが終了した後にコードを実行するためのコールバックも提供する必要があります。したがって、のhtmlが読み込まれた後にDataTable()と呼ぶことができます。

// 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>


私はあなたが私の問題に対する最善の解決策だと思うものを知ってみましょう。

あなたは巨大なスプレッドシートを持っている場合は、おそらくCSVとしてそれを保存し、HTMLの行に、テーブル内の各行を変換するためにa CSV parserを使用することができます。これには、次

  1. HTMLの行にそれを変換し、最終的に
  2. 、文書に追加するアレイに
  3. それを解析CSV
  4. としてデータのためのjQuery(又はfetch)とのAJAXリクエストを

DataTables()を呼び出すしかし、あなたのデータベースが比較的大きい場合は、サーバーコード(nodejs、PHP、Java(登録商標)など)なしでは困難であるダイナミックページネーションのために行くみてください。

+0

ありがとうございました。私はあなたの助けを借りて最後に働いています。問題の一部は、 '.load()'をまったく動かすことができず、私がクロムを使っていたために終わったということでした。どうにか私は何もインポートされていないかのように空白のページを取得します。 Firefox上でうまく動作します。誰もがそれを知っていますか? – ZetaOrionis

+0

クロムの開発者コンソール(F12)を開き、エラーがある場合にお知らせください –

+0

クロムのエラーメッセージは次のとおりです。 XMLHttpRequestはfile:/// [...] /test.htmlをロードできません。 Cross originリクエストは、http、data、chrome、chrome-extension、httpsのプロトコルスキームでのみサポートされています。 – ZetaOrionis

1

あなたは、importに設定rel属性を持つ<link>要素を使用しlink要素の.importプロパティを使用してデータを取得し、私が思っていた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>

関連する問題