मेरे पास fiddle है जो URL पर एक AJAX बनाते हैं और एक तालिका प्रस्तुत करते हैं, लेकिन मैं पेज लोड के दौरान केवल 10 पंक्तियों को डिफर्स और लोड करना चाहता हूं।डेटाटेबल्स - पृष्ठ लोड पर केवल एक निश्चित राशि पंक्तियों को कैसे लोड करें?

एचटीएमएल

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Account ID</th> 
      <th>Name</th> 
      <th>Email</th> 
     </tr> 
    </thead> 
</table>

जे एस

$(document).ready(function() { 

$('#example').DataTable({ 
     "bPaginate": true, 
     "processing": true, 
     "bServerSide": true, 

     ajax: { 
      url: 'https://api.myjson.com/bins/1egsx', 
      dataSrc: 'data' 
     }, 
     columns: [ 
      { data: 'account_id' }, 
      { data: 'name' }, 
      { data: 'email' } 
     ], 
     "deferRender": true, 
     "deferLoading": 10, 

    }); 

});

मैं हो रही

कोई मिलती-जुलती रिकॉर्ड
पाया रखा

स्रोत

2016-08-27 ihue

क्या आपका मतलब 'iDisplayLength' था? –

मेरा मतलब है 'deferLoading',' iDisplayLength' क्या करेगा? – ihue

'iDisplayLength' पंक्तियों की वांछित संख्या दिखाता है –

टी एल; डॉ: आप शायद होना चाहिए या तो क्लाइंट साइड प्रसंस्करण याdeferRender बिना सर्वर साइड प्रसंस्करण के साथ deferRender का उपयोग कर (फिक्सिंग से आपका JSON डेटा)। यह जवाब मानता है कि आप सर्वर-साइड प्रोसेसिंग चाहते हैं।

deferLoading

जब सही ढंग से सर्वर साइड प्रसंस्करण का उपयोग कर, डिफ़ॉल्ट व्यवहार केवल ajax अनुरोध के अनुसार एक पृष्ठ पर पंक्तियों की संख्या भेजने के लिए है।

सर्वर साइड प्रसंस्करण का उपयोग कर, DataTables के लिए आपरेशन की डिफ़ॉल्ट मोड बस किसी भी डेटा है कि वर्तमान में में मौजूद है फेंक है: यहाँ है कि क्या (documentation here से) करता है - आप deferLoading उपयोग करने की आवश्यकता नहीं होनी चाहिए तालिका और प्रदर्शित करने के लिए डेटा का पहला पृष्ठ प्राप्त करने के लिए सर्वर से अनुरोध करें। यह एक खाली तालिका के लिए ठीक है, लेकिन यदि आपके पास पहले से ही सादे HTML में प्रदर्शित डेटा का पहला पृष्ठ है, तो यह संसाधनों का अपशिष्ट है। इस प्रकार, यह विकल्प डेटाटेबल्स को उस प्रारंभिक अनुरोध को न करने के लिए निर्देश देने के लिए मौजूद है, बल्कि यह पृष्ठ पर पहले से मौजूद डेटा का उपयोग करेगा (इसमें कोई सॉर्टिंग इत्यादि लागू नहीं होगी)।

चूंकि आपका सभी डेटा AJAX से आता है, इसलिए उस विकल्प का चयन नहीं किया जाना चाहिए।

deferRender

आप वास्तव में या तो deferRender उपयोग करने के लिए, यदि आप सही ढंग से serverside प्रसंस्करण का उपयोग कर रहे आवश्यकता नहीं होनी चाहिए। deferRender होगा (यह documentation here है से):

एक उदाहरण है जो इस उदाहरण देकर स्पष्ट करना, अगर आप 10,000 पंक्तियों के साथ एक डेटा सेट लोड के रूप में, लेकिन केवल 10 रिकॉर्ड की एक पेजिंग प्रदर्शन लंबाई के बजाय सभी 10,000 पंक्तियों बनाते समय, स्थगित प्रतिपादन सक्षम है, डेटाटेबल्स केवल 10 बनायेगा।

नोट यहां महत्वपूर्ण वाक्यांश:

आप 10,000 पंक्तियों

आप सही तरीके से serverside प्रसंस्करण का उपयोग कर रहे हैं, तो आप केवल की संख्या लोड हो रहा है किया जाना चाहिए के साथ एक डेटा सेट लोड करता है, तो एक लोड में प्रति पेज पंक्तियां। deferRender क्लाइंटसाइड प्रसंस्करण का उपयोग करते समय डेटाटेबल्स को गति देने का वास्तव में एक विकल्प है। सर्वरसाइड प्रोसेसिंग पहले से ही deferRender करता है। कैसे datatables तेजी लाने के लिए के लिए DataTables FAQ से इस तस्वीर देखें:

ध्यान दें कि यह केवल clientside के लिए deferRender जोर देती है। यहां एक नोट यह है कि यदि आपके पास बहुत सी पंक्तियां नहीं हैं (हजारों + +) तो आपको शायद सर्वरसाइड प्रोसेसिंग का उपयोग करने की आवश्यकता नहीं है।

serverside प्रसंस्करण का उपयोग सही ढंग से:

आपकी समस्या शायद तथ्य यह है कि अपने एपीआई सर्वर साइड प्रसंस्करण के लिए JSON के उचित रूप नहीं लौटा रहा है से आता है, आपको डेटा प्रदर्शित होने की तुलना में अधिक जानकारी भेजने की आवश्यकता है। पूर्ण विवरण के साथ documentation page यहां है (आपको इसे निश्चित रूप से पढ़ना चाहिए), लेकिन मैं नीचे मूलभूत रूपरेखाओं को रेखांकित करने का प्रयास करूंगा।

अनुरोध

अनुरोध अपने एपीआई के लिए भेजा कुछ डेटा है कि आप को संबोधित करने की जरूरत को रोकने के लिए जा रहा है।

draw एक अद्वितीय पहचानकर्ता है जो अनुरोध-प्रतिक्रिया जोड़े के सेट ट्रैक करता है; प्रतिक्रिया में मूल्य अनुरोध में मूल्य से मेल खाना चाहिए। इस प्रकार डेटाटेबल्स प्रतिक्रियाओं के अनुरोधों से मेल खाता है।

start रिकॉर्ड का प्रतिनिधित्व करता है जो प्रतिक्रिया में पहला होना चाहिए; यदि हम प्रति पृष्ठ 10 रिकॉर्ड दिखा रहे हैं और हम पेज 2 पर हैं, start 10 के बराबर होंगे, ताकि प्रतिक्रिया में हम केवल 10-19 अंकों के रिकॉर्ड भेज सकें।

length इस ड्रॉ के लिए पंक्तियों की अपेक्षित संख्या का प्रतिनिधित्व करता है, इसलिए पेज 2, length पर प्रति पृष्ठ 10 रिकॉर्ड के उपरोक्त उदाहरण में 10 के बराबर होगा। यह कितना रिकॉर्ड आपको वापस करना चाहिए। यह मान डेटाटेबल्स प्रारंभिकरण के लिए lengthMenu या pageLength विकल्पों पर आधारित होगा। (क्रमशः here और here)

याद रखने के लिए एक महत्वपूर्ण बात यह है कि केवल length के रूप में कई पंक्तियों को भेजना है; पहले अनुरोध में अपनी सभी पंक्तियां न भेजें।

रिस्पांस

आपकी प्रतिक्रिया के रूप में अच्छी तरह से बदला जा करने की आवश्यकता होगी। असल में, बजाय सिर्फ data लौटने की, तो आप एक उद्देश्य यह है कि (जो documentation page से) नीचे दिए गए उदाहरण की तरह दिखता है वापस जाने के लिए की जरूरत है:

{ 
    "draw": 1, 
    "recordsTotal": 57, 
    "recordsFiltered": 57, 
    "data": [ 
     [ 
      "Angelica", 
      "Ramos", 
      "System Architect", 
      "London", 
      "9th Oct 09", 
      "$2,875" 
     ], 
     [ 
      "Ashton", 
      "Cox", 
      "Technical Author", 
      "San Francisco", 
      "12th Jan 09", 
      "$4,800" 
     ], 
     ... 
    ] 
}

नोट अतिरिक्त डेटा: draw, recordsTotal, और recordsFiltered सामान्य के अलावा data। सर्वरसाइड प्रोसेसिंग का उपयोग करते समय ये विकल्प आवश्यक हैं।

draw आपके एपीआई में किए गए अनुरोध से संबंधित संख्या का प्रतिनिधित्व करता है; जीईटी अनुरोध में draw वैल्यू भी होगा, और जीईटी में मान को प्रतिक्रिया में मूल्य से मेल खाना चाहिए।

recordsTotal तालिका में रिकॉर्ड की कुल संख्या, सभी पृष्ठों, जहां recordsFiltered रिकॉर्ड छानने आवश्यकताओं GET अनुरोध द्वारा निर्धारित की संख्या का प्रतिनिधित्व भर का प्रतिनिधित्व करता है (अगर कोई छानने है, यह recordsTotal के बराबर होना चाहिए।

ये आपके जवाब के लिए न्यूनतम आवश्यक तत्व हैं, लेकिन आप वैकल्पिक मानों पर अधिक जानकारी के लिए जुड़े हुए प्रलेखन ध्यान देना चाहिए।

साइड नोट

एक साइड नोट के रूप में; bServerSideserverSide और bPaginate होना चाहिए paging यदि आप डेटाटेबल्स संस्करण 1.10 या बाद में उपयोग कर रहे हैं।

स्रोत

2016-08-29 15:31:37

तुम भी iDisplayLength साथ यह कर सकते हैं:

$('#example').DataTable({ 
     "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]], 
     "iDisplayLength": 10, 
     "bPaginate": true, 
     "processing": true, 
     "bServerSide": true, 

     ajax: { 
      url: 'https://api.myjson.com/bins/1egsx', 
      dataSrc: 'data' 
     }, 
     columns: [ 
      { data: 'account_id' }, 
      { data: 'name' }, 
      { data: 'email' } 
     ], 

    });

स्रोत

2016-08-29 13:59:37

मुझे लगता है कि पृष्ठ लोड होने के तुरंत बाद डेटाटेबल प्रदर्शित करना है। नीचे दी गई आपकी आवश्यकताओं के आधार पर आंशिक डेटा लोड करने के दो तरीके हैं। पूरे डेटा को बाद में एक बटन पर क्लिक करके एक ईवेंट को ट्रिगर करके लोड किया जा सकता है। दोनों मामलों में, संपूर्ण डेटा भी डाउनलोड किया जाएगा और स्थानीय रूप से संग्रहीत किया जाएगा जिसे ट्रिगर किए गए ईवेंट के आधार पर लोड किया जा सकता है ताकि पूरे डेटा को लाने के लिए एक और कॉल करने से बचें।

केस 1: केवल स्रोत

पूरे डेटा 'https://api.myjson.com/bins/1egsx' से फ़ेच किए जाने से पहले DataTable डेटा पर कार्रवाई करेंगे से आंशिक डेटा डाउनलोड करने के लिए चाहते हैं। यदि आप केवल यूआरएल से आंशिक डेटा प्राप्त करना चाहते हैं, तो आप अपना कस्टम फ़ंक्शन बना सकते हैं जो AJAX इंटरैक्टिव मोड (readyState = 3) में डेटा को पार्स करेगा, पहले 10 प्रविष्टियों को प्राप्त करने के बाद रोकें और फिर डेटा को मालिश करें और उसे पास करें डेटाटेबल के लिए इनपुट डेटा। कर रहे हैं DataTable प्रदर्शित करने से पहले, पूरे डेटा डाउनलोड करने की आवश्यकता के साथ ठीक केवल पूरे डेटा

डाउनलोड करने आप यह मानते हुए बाद, पहले 10 प्रविष्टियों लोड करते हैं, आप: यहाँ आप

var inputData = ''; 
function loadDataTablePreview() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 3 && this.status == 200) { 
     inputData += this.responseText; 
     // Count the number of closing '}'. If its 10, lets start processing our data 
     // Get the index of 10 closing '}' 
     // Create a substring of inputData 
     // append ']}' 
     // Now JSON Decode 
     var decodedData = JSON.parse(inputData); 
     // Now create an instance of the DataTable passing this data as the input data 
     $('#example').DataTable({ 
      "bPaginate": true, 
      "processing": true, 
      "bServerSide": true, 
      data: decodedData, 
      columns: [ 
      { data: 'account_id' }, 
      { data: 'name' }, 
      { data: 'email' } 
      ], 
     }); 
    } 
    else if (this.readyState == 4 && this.status == 200) { 
     // JSON Decode the data and store it to load later 
    } 
    }; 
    xhttp.open("GET", "https://api.myjson.com/bins/1egsx", true); 
    xhttp.send(); 
} 

$(document).ready(function() { 
    loadDataTablePreview(); 
}

केस 2 क्या करने की जरूरत का एक सारांश है नीचे दिखाए गए अनुसार आपके डेटा एसआरसी के लिए एक फ़ंक्शन बना सकते हैं। यह तालिका में केवल 10 प्रविष्टियों को प्रदर्शित करेगा। आप वैकल्पिक रूप से पूरे JSON को ब्राउज़र डेटा स्टोर (जैसे sessionStorage) में इस फ़ंक्शन में संग्रहीत कर सकते हैं और फिर बाद में एक समय पर पूरे JSON को लोड करने के लिए एक जेएस फ़ंक्शन ट्रिगर कर सकते हैं।

$(document).ready(function() { 

    $('#example').DataTable({ 
    "bPaginate": true, 
    "processing": true, 
    "bServerSide": true, 
    ajax: { 
     url: 'https://api.myjson.com/bins/1egsx', 
     dataSrc: function (json) { 
        // Store entire data in sessionStorage 
        // return the first 10 entries only for now 
        return json.data.slice(0,10); 
       }, 
    }, 
    columns: [ 
     { data: 'account_id' }, 
     { data: 'name' }, 
     { data: 'email' } 
    ], 
    }); 
});

स्रोत

2016-09-05 10:57:22

डेटाटेबल्स - पृष्ठ लोड पर केवल एक निश्चित राशि पंक्तियों को कैसे लोड करें?

एचटीएमएल

जे एस

उत्तर

serverside प्रसंस्करण का उपयोग सही ढंग से:

संबंधित मुद्दे