動的なJavaScriptのソースデータ - DataTable

Question

私は自分のアプリケーションでDataTableを使用しています。私のアプリケーションは、サーバーがホストしているものではありません。 （私はまあ、それは別の話です。私のスタンドアロンアプリケーションで直接HTMLをレンダリングします。）

を現在、私はここで

$(dataTableSelector).dataTable({ 
    "sDom": 't <f> <i> <p> > ', 
    "bRetrieve": true, 
    "aaSorting": [], 
    "aaData": rows, 
    "aoColumns": columns, 
    "oLanguage": { 
     "sSearch": "", 
     "sInfo": "_START_ - _END_ Total: _TOTAL_ ", 
     "sInfoFiltered": "(filtered from _MAX_)" 
    } 
}); 

rowsはの配列で、私の全体のデータであり、以下のようなデータテーブルを移入しています配列をJavascriptのソースデータとして使用します。

しかし、今私の問題は、DataTableでレンダリングしようとしているデータが膨大な場合、読み込みに時間がかかることです。 私はサーバー側の処理と同様のデータテーブルを変更しようとしています（ただし、サーバーはありません。ローカルHTMLページです）。次にクリックすると、次のページデータのみが読み込まれます。そのときは、同じデータは読み込まれません。

言ってやるが、私は、次または前のボタンは、データテーブルでクリック、または検索されるたび

function loadData(start,end, searchString){ 
    //Function to fetch records from a Table with start and end numbers of records. 
    //searchString is optional. 
    //rows= GetDataFromTable(start,end, searchString); 
    return rows; 
} 

はそう、私のjavascriptのメソッドがコールされるjavascriptで機能を持っており、それがDATATABLEを再作成する必要があります。何か案は？

Answer 1

ajax optionを使用して独自のカスタム関数を提供することで、ローカル変数からDatatablesにロードすることができます。その使用例の1つは、"Pipelining data to reduce Ajax calls for paging"と呼ばれるサイトにあります。

以下は、大きな配列をスライスしてフィルタリングし、Datatableで行われた選択に基づいて小さなセットを返す単純な例です。私が使用していないDatatables sends more parametersがありますが、はで適切に実装する必要があります。また、Datatablesがrequest.length = -1を送信している可能性もありますが、私はそれについても扱っていません。

はJavaScript

var rows; 

$(document).ready(function() { 
    rows = getLongArrayOfData(); 

    $("#example").dataTable({ 
     "columns": [ 
      {"data": "column1", "title": "Column 1"}, 
      {"data": "column2", "title": "Column 2"} 
     ], 
     "serverSide": true, 
     "ajax": getRows() 
    }); 
}); 

function getRows() { 
    return function (request, drawCallback, settings) { 
     var dataFiltered; 
     var recordsTotal = rows.length; 

     if (request.search.value !== "") { 
      dataFiltered = rows.filter(FilterStartsWith(request.search.value)); 
     } 

     var recordsFiltered = 
      (dataFiltered === undefined) ? rows.length : dataFiltered.length; 

     var dataSliced = 
      (dataFiltered === undefined ? rows : dataFiltered) 
      .slice(request.start, request.start + request.length); 

     var returnData = { 
      draw: request.draw, 
      recordsTotal: recordsTotal, 
      recordsFiltered: recordsFiltered, 
      data: dataSliced 
     }; 

     drawCallback(returnData); 
    }; 
} 

function FilterStartsWith(wordToCompare) { 
    return function(element) { 
     if (typeof element == "object") { 
      returnValue = false; 
      for (var property in element) { 
       if (element.hasOwnProperty(property)) { 
        if (startsWith(element[property], wordToCompare)) { 
         returnValue = true; 
         break; 
        } 
       } 
      } 
      return returnValue; 
     } 
     return startsWith(element, wordToCompare); 
    } 
} 

function startsWith(element, wordToCompare) { 
    if (typeof element != "string") element = new String(element); 
    return element.slice(0, wordToCompare.length) == wordToCompare; 
} 

function getLongArrayOfData() { 
    var retArr = new Array(); 
    for(i=1; i<=100000; i++) { 
     retArr.push({column1: i, column2: "abc" + (500+i)}); 
    } 
    return retArr; 
} 

HTML

<table id="example"> 
    <thead> 
    </thead> 
    <tbody> 
    </tbody> 
</table>