jQuery प्रत्येक डेटा से जुड़े jQuery डेटाटेबल गतिशील संपादन बटन

Question

पूरी तरह से jquery और डेटाटेबल के लिए नया है। मैं एक संपादन बटन जोड़ना चाहता हूं जो एक रंगबॉक्स div को कॉल करता है जो सभी संपादन योग्य फ़ील्ड प्रदर्शित करता है। क्या कोई मुझे सही दिशा में इंगित कर सकता है कि यह कैसे प्राप्त किया जा सकता है?

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

Answer 1

मैं उत्कृष्ट DataTables Editable प्लगइन का उपयोग करके पुनः प्राप्त करूंगा। प्लगइन सीधे टेबल में फ़ील्ड को संपादित करना बहुत आसान बनाता है।

यदि आप वास्तव में प्रत्येक पंक्ति पर एक बटन रखना चाहते हैं, तो आप तालिका सर्वर को उत्पन्न करते समय इसे जोड़ सकते हैं या jQuery का उपयोग करके इसे जोड़ सकते हैं। फिर आपको बटन पर एक कार्रवाई बांधनी होगी।

$('#form-id').delegate('.edit-button', 'click', function() { 
    // action 
}).find('.classname-of-field-for-button').html('<button class="edit-button">'); 

Answer 2

आप aoColumnDefs निम्नलिखित में एक स्तंभ परिभाषा fnCreatedCell कॉलबैक द्वारा सामान जोड़ सकते हैं पहली पंक्ति के लिए एक बटन जोड़ता है:

माना कि आप बटन इंजेक्षन करना चाहते हैं, कोड कुछ इस तरह हो जाता है एक ऑनक्लिक ईवेंट हैंडलर कि (पहले कॉलम में मूल्य पर रीडायरेक्ट के साथ इस somthing आप बदलना whant सकता है।

"aoColumnDefs" : [ 
        { 
         "aTargets": [0], 
         "fnCreatedCell" : function(nTd, sData, oData, iRow, iCol){ 
          var b = $('<button style="margin: 0">edit</button>'); 
          b.button(); 
          b.on('click',function(){ 
           document.location.href = oData[0]; 
           return false; 
          }); 
          $(nTd).empty(); 
          $(nTd).prepend(b); 
         } 
        },