jQuery तालिका सॉर्टर AJAX

Question

द्वारा लाए गए मानों के लिए काम नहीं कर रहा है मैंने अपनी परियोजना में jQuery tablesorter लागू किया है।

मेरी तालिका में इनपुट टेक्स्टफील्ड शामिल हैं जिनमें से कुछ AJAX द्वारा पॉप्युलेट किए जाते हैं। टेबल सॉर्टिंग उपयोगकर्ता द्वारा दर्ज किए गए इनपुट फ़ील्ड के लिए पूरी तरह से काम कर रही है, लेकिन AJAX का उपयोग कर डेटाबेस से पॉप्युलेट किए गए इनपुट फ़ील्ड ठीक तरह से सॉर्ट नहीं कर रहे हैं।

मेरे कोड:

jQuery(function() { 
    jQuery('#tablesorter-demo').tablesorter({ 
     widgets: ['zebra', 'stickyHeaders'], 
     headers: { 
      2: { 
       sorter: 'inputs' 
      }, 
      3: { 
       sorter: 'inputs' 
      }, 
      5: { 
       sorter: 'inputs' 
      } 
     } 
    }); 
}); 

jQuery.tablesorter.addParser({ 
    id: 'inputs', 
    is: function (s) { 
     return false; 
    }, 
    format: function (s, table, cell, cellIndex) { 
     var jQueryc = jQuery(cell); 

     // return 1 for true, 2 for false, so true sorts before false 
     if (!jQueryc.hasClass('updateInput')) { 
      jQueryc 
       .addClass('updateInput') 
       .bind('keyup', function() { 
        console.log(table); 
        jQuery(table).trigger('updateCell', [cell, false]); // false to prevent resort 
       }); 
     } 
     return jQueryc.find('input[type="text"]').val(); 
    }, 
    type: 'text' 
}); 

मेरे AJAX समारोह:

jQuery('.bulkupload').keyup(function() { 
    check = 1; 
    jQuery("#" + jQuery(this).attr("id")).css("color", "#928F8F"); 
    var part_no1 = jQuery("#" + jQuery(this).attr("id")).val(); 
    var fieldcount = part_no1.toString().length; 
    var thenum = jQuery(this).attr("id").replace(/^\D+/g, ''); 

    if (jQuery('#qty' + thenum).val() == '') { 
     jQuery('#qty' + thenum).val('Enter Quantity'); 
     jQuery('#qty' + thenum).css("color", "#DF1F26"); 
    } 

    var url1 = "<?php echo Mage::getBaseUrl(); ?>availableorders/index/getdetails"; 
    jQuery.ajax({ 
     type: "POST", 
     url: url1, 
     data: { 
      part_no1: part_no1 
     }, 
     success: function (response) { 
      if (response == "check") { 
       jQuery('#item_name' + thenum).val("Not Found"); 
       jQuery('#item_desc' + thenum).val("Not Found"); 
       jQuery('#av_qty' + thenum).css("color", "#DF1F26"); 
       jQuery('#item_name' + thenum).css("color", "#DF1F26"); 
       jQuery('#item_desc' + thenum).css("color", "#DF1F26"); 
       jQuery('#brand_name' + thenum).css("color", "#DF1F26"); 
      } 
      else { 
       var result1 = jQuery.parseJSON(response); 

       jQuery('#item_name' + thenum).val(result1.prodname1); 
       jQuery('#item_desc' + thenum).val(result1.productdescription1); 
       jQuery('#brand_name' + thenum).val(result1.brand); 
       jQuery('#av_qty' + thenum).css("color", "#DF1F26"); 
       jQuery('#item_name' + thenum).css("color", "#DF1F26"); 
       jQuery('#item_desc' + thenum).css("color", "#DF1F26"); 
       jQuery('#brand_name' + thenum).css("color", "#DF1F26"); 
       if (jQuery('#av_qty' + thenum).val(result1.stock) == 0) { 
        jQuery('#av_qty' + thenum).val("Not in Stock"); 
       } else { 
        jQuery('#av_qty' + thenum).val(result1.stock); 
       } 

       jQuery("#tablesorter-demo").trigger('updateCell'); 
      } 
     } 
    }); 
}); 

Answer 1

विकल्पों & विजेट है कि आप प्रयोग कर रहे हैं से, ऐसा लगता है कि आप वास्तव में उपयोग कर रहे हैं मेरी fork of tablesorter मूल प्लगइन के बजाय।

वैसे भी, विजेट आप इनपुट पार्सर के लिए बनाए गए सेल

jQuery(cell).bind('keyup', function() { ... } 

लेकिन जब तालिका सॉर्ट हो जाता है, कोशिकाओं किसी भी घटना बाइंडिंग को तोड़ने के लिए पैदा कर रहा tbody से निकाल दिए जाते के लिए बाध्य कर रहा है।इस समस्या को हल करने का तरीका delegated event binding का उपयोग करने के लिए है (लेकिन विजेट format फ़ंक्शन के बाहर किया गया है क्योंकि इसे केवल एक बार करने की आवश्यकता है)।

jQuery('table tbody').on('keyup', 'input', function(e) { 
    var $input = $(e.target); 
    ... 
} 

साथ ही, जब आप अपने ajax कॉल से आदानों का एक बहुत अद्यतन करते हैं, यह बेहतर होगा सिर्फ एक बार (.trigger('update')) में उन सब को अद्यतन करने के लिए, नहीं तो आप बहुत ज्यादा updateCell विधि का उपयोग कर रहे हैं और संभावना के कारण आवश्यक से अधिक समय लेने के लिए पूरी प्रक्रिया।

This demo किसी तालिका के भीतर चेकबॉक्स अपडेट करने के लिए एक बहुत ही समान विधि का उपयोग करता है, इसलिए इसे इनपुट मूल्यों के साथ काम करने के लिए इसे परिवर्तित करने के लिए काफी सीधे आगे होना चाहिए - यदि आपको परेशानी है, तो बस यहां पोस्ट करें और मैं सहायता करूंगा।

// checkbox parser 
$.tablesorter.addParser({ 
    id: 'checkbox', 
    is: function(s) { 
     return false; 
    }, 
    format: function(s, table, cell) { 
     var $c = $(cell).find('input'); 
     return $c.length ? $c.is(':checked') ? 1 : 2 : s; 
    }, 
    type: 'numeric' 
}); 

$(function() { 
    // using .on() which requires jQuery 1.7+ 
    $('table').on('tablesorter-initialized', function() { 

     // class name to add on tr when checkbox is checked 
     var highlightClass = 'checked', 
     // resort the table after the checkbox is modified? 
     resort = true, 
     // if a server side database needs to be updated, do it here 
     serverCallback = function(table, inputElement) {}, 

     $table = $(this), 
     c = this.config, 
     wo = c && c.widgetOptions, 
     // include sticky header checkbox; if installed 
     $sticky = c && wo.$sticky || '', 
     doChecky = function(c, col) { 
      $table 
       .children('tbody') 
       .children('tr:visible') 
       .children('td:nth-child(' + (parseInt(col, 10) + 1) + ')') 
       .find('input') 
       .each(function() { 
        this.checked = c; 
        $(this).trigger('change'); 
       }); 
     }; 

     $table 
      .children('tbody') 
      .on('change', 'input', function() { 
       // ignore change if updating all rows 
       if ($table[0].ignoreChange) { return; } 
       var col, $this = $(this); 
       $this.closest('tr').toggleClass(highlightClass, this.checked); 
       $this.trigger('updateCell', [ $this.closest('td'), resort ]); 
       // if your server side database needs more parameters, add them here sent to the callback 
       serverCallback($table[0], this); 
       // uncheck header if any checkboxes are unchecked 
       if (!this.checked) { 
        $table.add($sticky).find('thead input').prop('checked', false); 
       } 
      }) 
      .end() 
      .add($sticky) 
      .find('thead input') 
      // Click on checkbox in table header to toggle all inputs 
      .on('change', function() { 
       // prevent updateCell for every cell 
       $table[0].ignoreChange = true; 
       var c = this.checked, 
        col = $(this).closest('th').attr('data-column'); 
       doChecky(c, col); 
       // update main & sticky header 
       $table.add($sticky).find('th[data-column=' + col + '] input').prop('checked', c); 
       $table.children('tbody').children('tr:visible').toggleClass(highlightClass, c); 
       // update all at once 
       $table[0].ignoreChange = false; 
       $table.trigger('update', [ resort ]); 
      }) 
      .on('mouseup', function() { 
       return false; 
      }); 

    }); 
}); 

मैं भी ध्यान देना चाहिए कि जब अपने ajax कॉल किया जाता है और परिवर्तन लागू किया गया है, कि जब एक "अद्यतन" विधि शुरू हो जाना चाहिए, न कि "updateCell" है।

आखिरकार, मौजूदा input-select parser मौजूद है लेकिन इसमें तालिका 0 को अद्यतन करने के विरुद्ध बड़े पैमाने पर updateCell विधि कॉल को रोकने के लिए कोई विधि शामिल नहीं है।

Answer 2

टेबल छंटाई इनपुट फ़ील्ड कि उपयोगकर्ता द्वारा दर्ज हैं के लिए पूरी तरह से काम कर रहा है, लेकिन इनपुट फ़ील्ड कि आबादी वाले हैं AJAX का उपयोग कर डेटाबेस से ठीक से सॉर्ट नहीं कर रहे हैं।

इसका कारण यह है जब आप उस पृष्ठ लोड, jQuery पुस्तकालय & तालिका सॉर्टर पुस्तकालयों उस समय और तालिका सॉर्टर कार्यक्षमता पर लोड किए गए हैं उस समय अपने तालिका में जोड़ा जाता है।

tablesorter-डेमो

यहाँ उदाहरण है ..

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 
$(document).ready(function() 
    { 
     $("#tablesorter-demo").tablesorter(); 
    } 
); 

और जब सामग्री AJAX के माध्यम से लोड किए गए हैं, इस तालिका छँटाई संपत्ति पहले से ही मेज & में जोड़ा गया है यह है AJAX फ़ंक्शन द्वारा प्राप्त किए गए नए डेटा पर लागू नहीं किया गया क्योंकि AJAX फ़ंक्शन प्रारंभिक पृष्ठ लोड के बाद काम करता था। तो आपको बस इतना करना है कि टेबल सॉर्टर प्रॉपर्टी

$ ("# टेबलटर-डेमो")। टेबलटर();

सिर्फ रेखा से ऊपर

jQuery ("# tablesorter-प्रदर्शन") ट्रिगर ('updateCell')।

मैं इस helps..because यह मेरे लिए काम किया जब मैं एक ही समस्या का सामना करना पड़ा AJAX & के माध्यम से सामग्री को लोड करते हुए उन्हें सुलझाने के लिए कोशिश कर रहा है उम्मीद है।

Answer 3

इस प्रयास करें ...

jQuery('.bulkupload').keyup(function() { 
    check = 1; 
    jQuery("#" + jQuery(this).attr("id")).css("color", "#928F8F"); 
    var part_no1 = jQuery("#" + jQuery(this).attr("id")).val(); 
    var fieldcount = part_no1.toString().length; 
    var thenum = jQuery(this).attr("id").replace(/^\D+/g, ''); 

    if (jQuery('#qty' + thenum).val() == '') { 
     jQuery('#qty' + thenum).val('Enter Quantity'); 
     jQuery('#qty' + thenum).css("color", "#DF1F26"); 
    } 

var url1 = "<?php echo Mage::getBaseUrl(); ?>availableorders/index/getdetails"; 
    ajaxfunction(url1); 
    function ajaxfunction(url1) 
    { 

     if(window.XMLHttpRequest) 
     { 
      xmlhttp=new XMLHttpRequest(); 

     } 
     else 
     { 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.onreadystatechange=function()//callback fn 
     { 
      if(xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       var response=xmlhttp.responseText; 
       if (response == "check") { 
        jQuery('#item_name' + thenum).val("Not Found"); 
        jQuery('#item_desc' + thenum).val("Not Found"); 
        jQuery('#av_qty' + thenum).css("color", "#DF1F26"); 
        jQuery('#item_name' + thenum).css("color", "#DF1F26"); 
        jQuery('#item_desc' + thenum).css("color", "#DF1F26"); 
        jQuery('#brand_name' + thenum).css("color", "#DF1F26"); 
       } 
       else { 
        var result1 = jQuery.parseJSON(response); 

        jQuery('#item_name' + thenum).val(result1.prodname1); 
        jQuery('#item_desc' + thenum).val(result1.productdescription1); 
        jQuery('#brand_name' + thenum).val(result1.brand); 
        jQuery('#av_qty' + thenum).css("color", "#DF1F26"); 
        jQuery('#item_name' + thenum).css("color", "#DF1F26"); 
        jQuery('#item_desc' + thenum).css("color", "#DF1F26"); 
        jQuery('#brand_name' + thenum).css("color", "#DF1F26"); 
        if (jQuery('#av_qty' + thenum).val(result1.stock) == 0) { 
         jQuery('#av_qty' + thenum).val("Not in Stock"); 
        } else { 
         jQuery('#av_qty' + thenum).val(result1.stock); 
        } 

        jQuery("#tablesorter-demo").trigger('updateCell'); 
        $("#tablesorter-demo").tablesorter(); 
       } 



      } 
     } 

     xmlhttp.open("GET",url1,true); 
     xmlhttp.send(); 

    } 

});