2012-01-11 30 views
10

मैं निम्न तालिकाताज़ा KnockoutJS डाटा

<table class="datatable zebra-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Issue</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: Publications"> 
     <tr> 
      <td><span data-bind="text: Name" /></td> 
      <td><span data-bind="text: IssueNumber" /></td> 
      <td><button type="button" class="btn" data-bind="click: $parent.DeletePublication">Delete</button></td> 
     </tr>  
    </tbody> 
</table> 

यहाँ viewmodel का एक टुकड़ा है:

function EditReaderViewModel() { 
    var self = this; 

    self.Publications = ko.observableArray([]); 

    self.OnAddPublicationSaveButtonClicked = function() { 
     //.. code omitted.  
     self.Publications.push(new Publication(publication.value, publication.label, publication.issueNumber)); 
    }; 
}; 

}

और प्रकाशन वस्तु तालिका से आबद्ध:

function Publication(id, name, issueNumber) { 
    var self = this; 

    self.Id = id; 
    self.Name = name; 
    self.IssueNumber = issueNumber; 
    self.LoadedFromDatabase = false; 
} 

जब डेटा को तालिका में पहली बार लोड किया जाता है, और डेटाटेबल प्रारंभिकरण उदा।

$(".datatable").dataTable({ // blahh }); 

सब कुछ ठीक काम करता है - डेटा तालिका में भरी हुई, छंटाई और छानने काम कर रहा है, आदि

अब जब मैं viewmodel बातों में प्रकाशन सरणी के लिए एक नया आइटम जोड़ने सिर्फ अलग गिर रहा है। उदाहरण के लिए, कहें कि मूल रूप से प्रकाशन आइटम में 1 आइटम है, जब मैं कोई अन्य आइटम जोड़ता हूं, तब तक यह तालिका में तब तक दिखाई देगा जब तक कि मैं सॉर्ट करने के लिए कॉलम शीर्षक पर क्लिक नहीं करता।

ऐसा लगता है कि डेटाटेबल की अपनी आंतरिक डेटा सूची कहीं है जिसमें मैंने बनाए गए नए प्रकाशन को शामिल नहीं किया है।

क्या कोई मुझे डेटाटेबल को पुनर्निर्माण के बारे में मार्गदर्शन कर सकता है, यह ध्यान में रखते हुए कि डेटा नॉकआउटजेएस व्यूमोडेल से है?

कृपया ध्यान दें कि मैं इस बंधन प्लगइन पर ध्यान दिया है:

http://www.joshbuckley.co.uk/2011/07/knockout-js-datatable-bindings/

समस्या यह है कि जब मैं इस का उपयोग करें, मैं इस तरह के रूप त्रुटि संदेश प्राप्त होता है:

अनुरोधित अज्ञात पैरामीटर ' 0 'पंक्ति के लिए डेटा स्रोत से 0.

संपादित करें:

मैं कोड देख रहा हूं और मुझे लगता है कि मुझे समस्या दिखाई दे रही है।

if ((sData=oCol.fnGetData(oData)) === undefined) 

जो बारी में कॉल:

function _fnGetObjectDataFn(mSource) 

function _fnGetObjectDataFn(mSource) में इस कोड है अब, jQuery.DataTables.js में इस समारोह function _fnGetCellData(oSettings, iRow, iCol, sSpecific)

कि समारोह में इस लाइन होती है जिसे कहा जाता है:

else 
{ 
    /* Array or flat object mapping */ 
    return function (data) { 
     return data[mSource]; 
    }; 
} 

data एक सरणी नहीं है, यह एक JSON ऑब्जेक्ट है जिसका अर्थ है कि उपर्युक्त कोड विफल हो जाएगा (return data[mSource];)।

मुझे सच में यकीन नहीं है कि यहां क्या करना है।

संपादित करें - महत्वपूर्ण:

टिप्पणीकारों में से एक पर ध्यान गया है, और मैं बस की पुष्टि की है,

http://www.joshbuckley.co.uk/2011/07/knockout-js-datatable-bindings

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

+0

एक ही समस्या यहाँ। क्या आपने हल खोज लिया? –

+0

@ पीटर - मुझे समस्या के आसपास एक रास्ता मिला, लेकिन इसमें स्क्रैच से डेटाटेबल का पुनर्निर्माण शामिल है। मूल रूप से तालिका HTML को आंशिक दृश्य में संग्रहीत किया जाता है जिसे मैं डेटा को रीफ्रेश करने के लिए हर बार फिर से लोड करता हूं। प्रत्येक रीलोड पर, फिर मैं उस तालिका पर ".dataTable()" प्लगइन को कॉल करता हूं। हाँ यह सामग्री को अपडेट करने का एक लंबा रास्ता है, लेकिन यह UI स्तर पर वास्तव में तेज़ है। कोई असली मंदी नहीं। –

+0

एफडब्ल्यूआईडब्ल्यू - जब मैंने जोशबक्ले लिंक तक पहुंचने की कोशिश की तो मुझे कैस्पर्सकी से एक चेतावनी मिली। "दुर्भावनापूर्ण HTTP ऑब्जेक्ट ... पता चला: ट्रोजन प्रोग्राम: 'HEUR: Trojan.Script.Iframer' (संशोधन)"। चेतावनी के लिए – mg1075

उत्तर

1

आप उल्लेख करते हैं कि आपने डेटाटेबल प्लगइन का उपयोग किया है और पंक्ति 0 "त्रुटि के लिए डेटा स्रोत से" अज्ञात पैरामीटर अनुरोध किया है "प्राप्त करें।

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

या आप "aoColumnDefs" विकल्प का उपयोग कर रहे हैं हो सकता है जब आप प्रारंभ table.Again विकल्प definiton की जाँच की और सुनिश्चित करें कि आप अज्ञात स्तंभ तक पहुँचने की कोशिश havent कि बनाने:

उदाहरण के लिए यदि आप इस तरह एक परिभाषा है

"aoColumnDefs": [{ 
     "bSearchable": false, 
     "bVisible": false, 
     "aTargets": [0] 
    }, { 
     "bSortable": false, 
     "bSearchable": false, 
     "sWidth": "45px", 
     "aTargets": [2] 
    }] 

और यदि आपके पास केवल 2 थाड सेक्शन है तो यह आपको वह त्रुटि देगा। चूंकि आप लक्ष्य के साथ तीसरे कॉलम तक पहुंच रहे हैं: [2]

+0

इसके लिए चीयर्स। मुझे एक वर्कअराउंड मिला है जिसे मैं यहां पोस्ट करूंगा जब मैं अधिक समय पर gt। असल में इसमें तालिका के लिए डेटा को एएसपी नेट एमवीसी आंशिक दृश्य के रूप में लोड करना शामिल है; मैं फिर उस पृष्ठ के मुख्य तालिका div में उस आंशिक दृश्य के HTML को लोड करने के लिए jQuery का उपयोग करता हूं। मैं फिर तालिका को फिर से शुरू करने के लिए डेटाटेबल की '.डेटाबल()' विधि को कॉल करता हूं। –

0

मुझे यहां बताई गई एक जैसी समस्या का सामना करना पड़ रहा था (और कैस्परस्की चेतावनी के बाद "बाइंडिंग्स" लिंक की खोज करने का कोई इरादा नहीं था, भले ही यह वास्तव में सुरक्षित है।)

KnockoutJs - how to use datatables with existing bound table सुझाए गए दृष्टिकोण पर थोड़ी सी बात करते हुए, मैंने एक मार्ग लेना शुरू किया जहां टेबल पर नॉकआउट का उपयोग करते समय, मैंने परीक्षण करने के लिए कथन दिया, अगर अवलोकन योग्य में कम से कम एक पंक्ति थी आंकड़े का।

<!-- if Publications.length() > 0 --> 
<table class="datatable zebra-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Issue</th> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- ko foreach: Publications --> 
     <tr> 
      <td><span data-bind="text: Name" /></td> 
      <td><span data-bind="text: IssueNumber" /></td> 
     </tr> <!-- /ko --> 
    </tbody> 
</table> 
<!-- /ko --> 

लोड हो रहा है जब दृश्य मॉडल, मैं तो कहा जाता DataTables मेरी .ajax सफलता समारोह अंदर कार्य करते हैं।

फिर इसे बनाने के लिए अन्य भाग डेटाटेबल्स "bStateSave": true, का उपयोग करना था ताकि किसी भी प्रकार की रीफ्रेश से पहले मैंने किया था।

3

मुझे पता है कि यह एक पुराना धागा है, लेकिन जब मुझे यह समस्या मिली तो मुझे यह पता चला कि मुझे समाधान पोस्ट करने की आवश्यकता महसूस हो रही है ताकि अन्य इसे जल्दी से ढूंढ सकें।

तालिका को रीफ्रेश करते समय आप .clear() और फिर .destroy() तालिका को सरल बना सकते हैं। उसके बाद पहले से ज्ञात .DataTable()

का उपयोग करके तालिका को फिर से शुरू करें, हालांकि यह थोड़ा गन्दा है क्योंकि आप वास्तव में संरचना को फाड़ते हैं और इसे पुनर्निर्माण करते हैं, यह बहुत आसानी से काम करता है।

आपको बस एक बार बूलियन पहचानकर्ता जोड़ना होगा जिसे आपने पहली बार तालिका में आरंभ करने के लिए सही पर सेट किया था। और निश्चित रूप से आपको तालिका को एक चर में बांधना होगा ताकि वह DOM तत्व पर डेटाटेबल एपीआई जादू को काम कर सके।अपने टेबल में

if (managementLoadedDone){ 
      userTable.clear(); 
      userTable.destroy(); 
     } 

भरण डेटा

userTable = $("#userTable").DataTable({responsive: true}); 
      usersLoaded = true; 
संबंधित मुद्दे