गतिशील जावास्क्रिप्ट डेटा स्रोत - डेटाटेबल

Question

मैं अपने आवेदन में डेटाटेबल का उपयोग कर रहा हूं। मेरा आवेदन एक सर्वर होस्ट नहीं है। (मैं अपने अनुप्रयोग में सीधे HTML प्रस्तुत करना होगा। ठीक है, कि एक अलग कहानी है।)

नीचे की तरह वर्तमान में मैं पॉप्युलेट कर रहा हूँ DataTable,

$(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 अपने पूरे डेटा की सरणी में, कर रहे हैं एक जावास्क्रिप्ट sourced डेटा के रूप में सरणी।

लेकिन अब मेरी समस्या यह है कि यदि डेटा डेटाटेबल के साथ प्रस्तुत करने वाला डेटा बहुत बड़ा है, तो लोडिंग में अधिक समय लगता है। तो मैं सर्वर साइड प्रसंस्करण के समान डेटा तालिका को बदलने की कोशिश कर रहा हूं (लेकिन कृपया ध्यान दें कि मेरे पास कोई सर्वर नहीं है। यह सिर्फ एक स्थानीय 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; 
} 

तो, जब भी अगले या पिछले बटन डेटा तालिका में क्लिक किया है, या खोजा गया है, मेरी जावास्क्रिप्ट विधि बुलाया जाना चाहिए और यह DataTable फिर से आबाद करना चाहिए। कोई विचार?

Answer 1

आप ajax option का उपयोग करके और अपने स्वयं के कस्टम फ़ंक्शन प्रदान करके प्रत्येक उपयोगकर्ता इंटरैक्शन पर स्थानीय चर से डेटाटेबल्स में लोड कर सकते हैं। इसके उपयोग का एक उदाहरण उनकी साइट पर है, जिसे "Pipelining data to reduce Ajax calls for paging" कहा जाता है।

नीचे एक बड़ी सरणी को टुकड़ा और फ़िल्टर करने और डेटाटेबल पर किए गए चयनों के आधार पर एक छोटा सेट लौटने का एक सरल उदाहरण है। ध्यान दें कि डेटाटेबल्स sends more parameters जिसका मैंने उपयोग नहीं किया है, लेकिन उचित कार्यान्वयन करने के लिए उनका उपयोग करना चाहिए। साथ ही, यह संभव है कि डेटाटेबल्स request.length = -1 भेजता है, लेकिन मैंने इसका सामना नहीं किया है।

जावास्क्रिप्ट

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

एचटीएमएल

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