1

JavaScript でデータベースに Ajax 呼び出しを行った後、JSON 形式の 8000 行のデータをクライアント側で使用できるようになりました。これを HTML テーブルに入力して表示する必要があります。

以下のコードを実行しようとしていますが、次の問題に直面しています。大量のデータがあるため、Web インターフェイスでクエリを実行すると、データベースからデータを取得するためにいくつかの Ajax 呼び出しが行われ、同じデータが HTML ページに表示されます。

私は次の問題に直面しています：

  1. 結果が非常に大きい場合にのみページネーションが表示されます
  2. ページネーションが表示されると、ページごとに 10 または 25 ではなく、最初にすべてのデータがページに読み込まれるため、jQuery スクリプトが応答しなくなります。しかし、ページング サイズ フィルターを 10、25、50、または 100 に切り替えると、適切な数の結果が表示されます。

私が試しているコードは以下です。

HTML:

    <table id="tableprint" class="data-grid" size="50">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Profession</th>
          <th>Address</th>
          <th>Comments</th>
        </tr>
      </thead>
    </table>

ジャバスクリプト:

success: function(data) {
   $('#tableprint').dataTable({
      "aaData": jsonArrayOfjsonObjects.json, //this is a json with 8000 table rows of data
      "aoColumnsDef": [{
         "mData": "name"
      }, {
         "mData": "age"
      }, {
         "mData": "profession"
      }, {
         "mData": "address"
      }, {
         "mData": "comments",
         "defaultContent": "Empty"
      }, ],
      "bDestroy": true
   }).fnDestroy();

   $('#tableprint').dataTable({
      "bDestroy": true
   }).fnDestroy();
}

参考までに、「DataTableを再インスタンス化できません」というエラーが発生したため、データテーブルインスタンスを破棄しています。これが推奨される解決策でした。

   $.ajax({
        type : 'POST',
        url : 'sendData',
        data : { //Send form data to the Servlet
            sid : sid,
            mpid : mpid
        },
        success : function(data) {
            $('#tableprint').dataTable({
               "aaData" : data.ActionsArr,
               "bPaginate":"true",
               "sPaginationType":"full_numbers",
               // etc..
        }

上記の Ajax Post は、ユーザーがフォームの送信ボタンをクリックするたびに、異なる値sidとmpid値で呼び出されます。

含まれる JS ファイル:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
4

1 に答える 1