Dati originari Javascript dinamici - DataTable

Question

Sto utilizzando DataTable nella mia applicazione. La mia applicazione non è ospitata su un server. (Mi rendo il codice HTML direttamente nella mia applicazione stand-alone. Beh, questa è una storia diversa.)

Attualmente sto popolando DataTable come qui di seguito,

$(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_)" 
    } 
}); 

Qui rows sono interi i miei dati, in serie di matrici come dati originati da Javascript.

Ma ora il mio problema è che se i dati che sto per rendere con DataTable sono enormi, il caricamento richiede più tempo. Quindi sto provando a cambiare la tabella dei dati in modo simile all'elaborazione lato server (ma tieni presente che non ho alcun server: è solo una pagina HTML locale). Facendo clic su Avanti, dovrebbe caricare solo i dati della pagina successiva. Fino ad allora, non dovrebbe caricare lo stesso.

Di ', ho una funzione in javascript

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

Così, ogni volta il pulsante successivo o precedente si fa clic nella tabella dei dati, o cercato, dovrebbe essere chiamato il mio metodo javascript e dovrebbe ripopolare Datatable. Qualche idea?

Answer 1

È possibile caricare da una variabile locale in Datatables su ogni interazione utente utilizzando ajax option e fornendo la propria funzione personalizzata. Un esempio del suo utilizzo è sul loro sito, chiamato "Pipelining data to reduce Ajax calls for paging".

Di seguito è riportato un semplice esempio di suddivisione e filtraggio di un array di grandi dimensioni e il ritorno di un piccolo insieme basato sulle selezioni effettuate sul Datatable. Si noti che Datatables sends more parameters che non ho utilizzato, ma è usarli per fare una corretta implementazione. Inoltre, è possibile che Datatables invii request.length = -1, ma non l'ho nemmeno affrontato.

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>