Dinamik Javascript kaynaklı veri - DataTable

Question

Uygulamamda DataTable kullanıyorum. Benim başvurum bir sunucu barındırılan değil. (Ben. Eh, bu farklı bir hikaye benim bağımsız bir uygulama doğrudan HTML hale getirecek.) Aşağıda gibi

Şu anda doldurma ediyorum DataTable Burada

$(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 benim tüm veriler dizisindeki vardır Javascript kaynaklı veri olarak diziler.

Ama şimdi benim sorunum, DataTable ile oluşturacağım veriler çok büyük ise, yükleme daha uzun zaman alır. Bu nedenle, sunucu tarafı işlemeye benzer veri tablosunu değiştirmeye çalışıyorum (ancak herhangi bir sunucum olmadığını unutmayın. Bu yalnızca bir yerel HTML sayfasıdır). Bir sonraki tıklatıldığında, sadece bir sonraki sayfa yüklenmelidir. Daha sonra, aynı yüklememelidir.

Demek, sonraki veya önceki düğme veri tablosunda tıklandığında veya arandığında

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

Yani, benim javascript yöntem çağrılmalıdır javascript bir işlevi var ve DataTable yeniden oluşturulacaktır gerekir. Herhangi bir fikir?

Answer 1

Yerel bir değişkenden, ajax option'u kullanarak ve kendi özel işlevinizi sağlayarak her kullanıcı etkileşiminde Datatables'e yükleyebilirsiniz. Kullanımının bir örneği, sitelerinde "Pipelining data to reduce Ajax calls for paging" olarak adlandırılmıştır.

Aşağıda büyük bir dizinin dilimlenmesi ve filtrelenmesi ve Datatable'da yapılan seçimlere göre küçük bir setin döndürülmesi için basit bir örnek verilmiştir. Kullanmamış olduğunuz Datatables sends more parameters'u unutmayın, ancak siz 'u uygun bir uygulama yapmak için kullanmalısınız. Ayrıca, Datatables request.length = -1 gönderir, ancak ben de bununla ilgilenmedim.

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>