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造成任何事件綁定打破去除。解決此問題的方法是在tbody上使用delegated event binding（但是在部件format函數之外完成，因爲它只需要執行一次）。

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

此外，當你更新了大量的從你的Ajax調用輸入，這將是最好只更新一次全部（.trigger('update')），否則，您使用的updateCell方法太多，可能導致整個過程花費比必要的更長的時間。

This demoThis 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，但它不包括一種方法來防止大規模的方法調用，而不是一次全部更新表。

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函數在初始頁面加載後工作。因此，您所要做的就是添加表分類器屬性

$（「＃tablesorter-demo」）。tablesorter（）;

正上方的線

jQuery的（ 「＃的tablesorter-演示」）的觸發（ 'updateCell'）;

我希望這可以幫助..因爲它對我工作，當我通過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(); 

    } 

});