Question

我正在使用数据表插件。最初我尝试的是从平面文本文件更新数据表插件。文本文件如下所示。

{
"data":[ 
         {
          "reference":"#VIP-123",
          "application":"Development Aspects",
          "applicationType":"Current Application" 
         },
         {
          "reference":"#VIP-123",
          "application":"Development Aspects",
          "applicationType":"Current Application" 
         }
       ]
}

我有一个HTML文件，我正在编写如下的JavaScript。

$(document).ready(function() {
var table=$('#app-table').DataTable( {
    "bProcessing": true,
    "bPaginate":true,
    "bServerSide": false,
    "sAjaxSource": "./data/arrays.txt",
    "deferRender": true,
        "columns": [
            { "data": "reference" },    
            { "data": "application" },
            { "data": "applicationType" },
              ],
            "order": [[ 3, "desc" ]],
            "ordering": true,
            "bFilter": true
        } );

数据表正常呈现，直到表中的行数不超过20,000行。随着表中行数的增加，数据表需要更多时间来加载。

我通过多个站点注意到的是我们可以通过使用服务器端处理来减少加载时间，为此我需要使用服务器，这在我的情况下是不可能的，因为我从平面渲染数据文本文件。然后我想找静态数据存储。

所以遇到问题是使用indexedDB我们可以解决性能问题，如果答案是肯定的，那么任何人都可以告诉我怎么做？

我能够使用indexedDB但无法与jQuery数据表集成。我的意思是我需要在JavaScript中进行更改。如果我们可以使用indexedDB进行服务器端处理，那么脚本是什么？

Answer 1

首先按以下方式阅读本地文件：

var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;


            }
        }
    }

然后，使用JQuery将“allText”解析为JSON。

请参阅this link以解析为JSON。

现在，使用“indexedDB API”创建数据库，如下所述：

var request = indexedDB.open("<mention_your_db_name_here");
request.onupgradeneeded = function() {
  // The database did not previously exist, so create object stores and indexes.
  var db = request.result;
  var store = db.createObjectStore("books", {keyPath: "reference"});
  var titleIndex = store.createIndex("by_reference", "reference", {unique: true});


  // Populate with initial data.
  store.put({reference: "#VIP-123", application: "Development Aspects", applicationType: "Current Application"});

};

request.onsuccess = function() {
  db = request.result;
};

有关“indexedDB API”的更多详细信息，请参阅this link

如何减少数据表加载时间？

1 个答案: