2011-05-22 13 views
15

से अतिरिक्त जानकारी JQuery DataTables और सब कुछ ठीक चल रहा है का उपयोग कर लौट आते हैं।Jquery DataTables सर्वर

मैं बाहर काम किया है कैसे क्लाइंट से सर्वर तक addtional जानकारी भेजने के लिए। अब, मैं दूसरी तरफ वापस जाना चाहता हूं।

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

किसी भी मदद की बहुत सराहना की जाएगी। धन्यवाद

+0

हे ली, मैं fnServerData का उपयोग कर क्लाइंट से सर्वर पर अतिरिक्त जानकारी भेजने के तरीके पर काम कर रहा हूं। क्या आप कृपया मेरी मदद कर सकते हैं! –

उत्तर

16

मुझे लगता है कि आप काफी सब कुछ ठीक हो गया। आपको बस JSON ऑब्जेक्ट में अतिरिक्त डेटा सर्वर पक्ष संलग्न करने की आवश्यकता है और फिर इसे "fnServerData" में प्राप्त करें। आप inizialization वस्तु के लिए इस कोड जोड़ सकते हैं: (पंक्तियों की कुल संख्या), "iTotalDisplayRecords" आम तौर पर आप 3 पैरामीटर "iTotalRecords" के साथ एक json है:

 "fnServerData": function (sSource, aoData, fnCallback) { 
      $.getJSON(sSource, aoData, function (json) { 
//Here you can do whatever you want with the additional data 
       console.dir(json); 
//Call the standard callback to redraw the table 
       fnCallback(json); 
      }); 
     } 

सर्वर साइड आप के रूप में आप चाहते हैं के रूप में कई पैरामीटर जोड़ सकते हैं (यदि आप फ़िल्टर का उपयोग कर रहे हैं तो फ़िल्टर किया गया कुल) और aaData (पंक्तियों के साथ एक सहयोगी सरणी)। आप उदाहरण के लिए "iProcessingTime" के लिए जोड़ देते हैं तो (समय यह सर्वर साइड पर कार्रवाई करने के लिया) आप कर सकता है:

 "fnServerData": function (sSource, aoData, fnCallback) { 
      $.getJSON(sSource, aoData, function (json) { 
//take the processing time and put it in a div 
       $('#processingTime').html(json.iProcessingTime); 
//pass the data to the standard callback and draw the table 
       fnCallback(json); 
      }); 
     } 

इस तुम क्या जरूरत है?

+0

बहुत धन्यवाद। मुझे जिस चीज की जरूरत थी। – Lee

+0

@nicola: क्या आप कृपया क्लाइंट से सर्वर पर पैरामीटर भेजने के तरीके के साथ मेरी सहायता कर सकते हैं। मैं अपने एचटीएमएल पेज पर एक चयनित कॉम्बो-बॉक्स के मान को नियंत्रक को पास करने की कोशिश कर रहा हूं जो मेरे डेटाटेबल के लिए मेरा अजाक्स स्रोत है। –

2

@Nicola Peluchetti के जवाब सही है। लेकिन अगर आप इस उदाहरण http://datatables.net/release-datatables/examples/server_side/post.html के बाद और (किसी कारण के लिए) नहीं है getJSON का उपयोग करना चाहते हैं, यह भी काम करता है

 "fnServerData": function (sSource, aoData, fnCallback) { 
      $.ajax({ 
       "dataType": 'json', 
       "type": "POST", 
       "url": sSource, 
       "data": aoData, 
       "success": function(json){ 
        $('#processingTime').html(json.iProcessingTime); // iProcessingTime is the variable that we added in JSON at the server side 
        fnCallback(json); 
       } 
      });    
     } 
3

यह भी "fnInitComplete" समारोह का उपयोग कर JSON फ़ाइल से जानकारी का उपयोग करने के लिए संभव है, जिसे तालिका के ड्रॉ इवेंट पूरा होने के बाद बुलाया जाता है (डाटरो समेत)।

$('#example').dataTable({ 
    "fnInitComplete": function(oSettings, json) { 
     //Do something with json variable 
    } 
    }); 
+0

यही वह है जिसे मैं ढूंढ रहा था। –

1

उपरोक्त सुझावों से मदद नहीं मिली।

मैं एक ajax सर्वर साइड, पृष्ठांकन योग्य कार्यान्वयन है। चूंकि उपयोगकर्ता नए खोज शब्दों में प्रवेश करता है, इसे रीफ्रेश करना पड़ता है, इसलिए "fnInitComplete" का उपयोग करना एक विकल्प नहीं है, क्योंकि यह केवल एक बार ट्रिगर होता है, जब डेटाटेबल ऑब्जेक्ट प्रारंभ होता है।

fnServerData ओवरराइड करना या तो काम नहीं करता था।

बजाय मैं इसे JSON से iProcessingTime dataSrc के माध्यम से हथियाने के द्वारा लागू करने समाप्त:

var table = $('#pkgTable').DataTable({ 
    "processing" : true, 
     "serverSide" : true, 
     "sPaginationType" : "jPaginator", 
     "ajax": { 
      "url" : urlStr, 
      "type" : "POST", 
      "dataSrc": function(json) { 
      var iProcessingTimeMS = json.iProcessingTime; 
      var iProcessingTimeS = iProcessingTimeMS/1000; 
      $("#processingTime").html("Search Time: " + iProcessingTimeMS + " ms. " + iProcessingTimeS + " s."); 
      return json.aaData; 
     } 
     }, 
     "oLanguage": { 
      "sProcessing": "<span style='color: red; font-weight: bold'>Please Wait...</span>", 
      "sZeroRecords": "No Records Found...", 
      "sSearch":  "Search All:", 
      "sUrl":   "", 
      "oPaginate": { 
          "sFirst" : "<b>&lt;&lt;</b>", 
          "sLast"  : "<b>&gt;&gt;</b>", 
          "sPrevious" : "<b>&lt;</b>", 
          "sNext"  : "<b>&gt;</b>" 
        }, 
      "sLengthMenu": 'Display <select>' + 
        '<option value="10">10</option>' + 
        '<option value="20">20</option>' + 
        '<option value="50">50</option>' + 
        '<option value="100">100</option>' + 
        '</select> records' 
     } 
}); 
0
<div id="category"></div> 

$('#example').dataTable({ 
    "fnInitComplete": function(oSettings, json) { 
     $('#category').html(json.category); 
    } 
    }); 

यह मेरे लिए अच्छा काम करने लगता है।

1
"fnDrawCallback": function(oSettings) { 
    console.log(oSettings.json);//do whatever with your custom response 
    }, 
संबंधित मुद्दे