jquery - 複数のjqueryプラグインが機能しない

Question

テーブルソーターとクロマブルを追加しようとしています。クロマブルのみ動作します。chromtable を取り除くと、並べ替えも機能します。両方を機能させる方法はありますか？

<script type="text/javascript">
$(document).ready(function () {

    $.tablesorter.addParser({
        id: 'fancyNumber',
        is: function (s) { return false; },
        format: function (s) {  if (s == '-') return '0'; else return       
    s.replace(/[\,\$]/g, ''); },
        type: 'numeric'
    });

    $("#marginDiff").tablesorter({ 
         headers: {
             1: { sorter: false }, 
             2: { sorter: false }, 
             5: { sorter: 'fancyNumber' }, 
             6: { sorter: 'fancyNumber' }, 
             7: { sorter: 'fancyNumber' }, 
             8: { sorter: 'fancyNumber'}
        } 
    });
    $("#marginDiff").chromatable({ 
        width: "1500px", height: "900px", scrolling: "yes" 
    });
 });
</script>

Answer 1

競合を避けるために、Chromatable を Tablesorter の sortEnd コールバックにバインドしてみてはいかがでしょうか。これを試してみてください...

$(document).ready(function() { 

    $.tablesorter.addParser({
        id: 'fancyNumber',
        is: function (s) { return false; },
        format: function (s) {  if (s == '-') return '0'; else return       
    s.replace(/[\,\$]/g, ''); },
        type: 'numeric'
    });

    $("#marginDiff").tablesorter({ 
         headers: {
             1: { sorter: false }, 
             2: { sorter: false }, 
             5: { sorter: 'fancyNumber' }, 
             6: { sorter: 'fancyNumber' }, 
             7: { sorter: 'fancyNumber' }, 
             8: { sorter: 'fancyNumber'}
        } 
    });

});

$("#marginDiff").bind("sortEnd",function() { 
    $(this).chromatable({ 
        width: "1500px", height: "900px", scrolling: "yes" 
    });
});