सिग्नलआर

Question

के साथ डेटा डालने के बाद सॉर्टिंग टेबल मैं इसे बनाए जाने पर तालिका में डेटा को धक्का देने के लिए SignalR का उपयोग कर रहा हूं।

तालिका में मेरी सॉर्टिंग कार्य नहीं लगती है।

यह मेरा jQuery कोड है:

$(function() { 
    var chat = $.connection.runnerHub; 
    chat.client.refreshTable = function (table) { 
     $('table:last').after('<table id="' + table + '"><thead><tr><td>' + table + '</td></tr></thead><tbody></table>') 

    }; 
    chat.client.refreshSubTable = function (table, categoryName) { 
     if ($('#' + table + ' tbody tr').length > 0) { 
      $('#' + table + ' tbody tr:last').after("<tr><td><a href='/Forum/" + table + "/" + categoryName + "' >" + categoryName + "</a></td></tr>") 

     } else { 
      $('#' + table + ' tbody').append("<tr><td><a href='/Forum/" + table + "/" + categoryName + "' >" + categoryName + "</a></td></tr>") 
     } 
     sortTable($('#' + table), 'asc'); 
    }; 
    $.connection.hub.start().done(function() { 

    }); 
}); 

function sortTable(table, order) { 
 
    var asc = order === 'asc', 
 
    tbody = table.find('tbody'); 
 

 
    tbody.find('tr').sort(function(a, b) { 
 
    if (asc) { 
 
     return $('td:first', a).text().localeCompare($('td:first', b).text()); 
 
    } else { 
 
     return $('td:first', b).text().localeCompare($('td:first', a).text()); 
 
    } 
 
    }).appendTo(tbody); 
 
} 
 

 

 
$('.add').click(function() { 
 
    $('#Class > tbody').append("<tr><td><a href=/Forum/Class/Run>run</a></td></tr>") 
 
    sortTable($('#Class'), 'asc'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Class"> 
 
    <thead> 
 
    <tr> 
 
     <td>Class</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Druid">Druid</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Hunter">Hunter</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Paladin">Paladin</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Mage">Mage</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Priest">Priest</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Rogue">Rogue</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Shaman">Shaman</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warlock">Warlock</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warrior">Warrior</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button class="add"> add </button>

जब मैं डिबग मेरे रास्ते में सोचा jQuery, यह tr कहते हैं लेकिन और यह sortTable() कॉल लेकिन यह तरह यह न वर्णमाला।

मुझे समस्या नहीं मिल रही है, और इसलिए मुझे उम्मीद है कि कोई मेरी मदद कर सकता है।

Answer 1

शुरुआत से तालिका को सॉर्ट करने के लिए, आपको केवल sortTable पर कॉल करना होगा। आपके द्वारा प्रदान किए गए अपडेट किए गए स्निपेट में, जैसे ही आप "एड" बटन पर क्लिक करते हैं, सॉर्टिंग काम करता है, सिवाय इसके कि यह नई जोड़ा पंक्ति को सही तरीके से सॉर्ट नहीं करता है।

यहां समस्याएं प्रविष्टियों के सामने रिक्त स्थान थीं, इसलिए आपको तारों से किसी भी अग्रणी या पीछे की जगहों को हटाने के लिए $.trim() का उपयोग करना होगा। कोड को स्पष्ट करने के लिए मैंने आपके ग्रंथों को स्थानीय चरों में भी सहेजा।

function sortTable(table, order) { 
 
    var asc = order === 'asc', 
 
    tbody = table.find('tbody'); 
 

 
    tbody.find('tr').sort(function(a, b) { 
 
    var atext = $.trim($('td:first', a).text()), 
 
     btext = $.trim($('td:first', b).text()); 
 
    if (asc) { 
 
     return atext.localeCompare(btext); 
 
    } else { 
 
     return btext.localeCompare(atext); 
 
    } 
 
    }).appendTo(tbody); 
 
}; 
 
sortTable($('#Class'), 'asc'); 
 

 

 
$('.add').click(function() { 
 
    $('#Class > tbody').append("<tr><td><a href=/Forum/Class/Run>run</a></td></tr>"); 
 
    sortTable($('#Class'), 'asc'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Class"> 
 
    <thead> 
 
    <tr> 
 
     <td>Class</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Druid">Druid</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Hunter">Hunter</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Paladin">Paladin</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Mage">Mage</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Priest">Priest</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Rogue">Rogue</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Shaman">Shaman</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warlock">Warlock</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warrior">Warrior</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button class="add"> add </button>

Answer 2

आपका चयनकर्ता $('td:first', a)<td> सेल वापस आ जाएगी - लाइन फ़ीड (पाठ नोड) भी शामिल है।
.text() कॉल फिर <a /> टैग का पाठ वापस कर देगा, लेकिन इसके पहले टेक्स्ट नोड से लाइन फ़ीड भी लौटाएगा।

अतिरिक्त टेक्स्ट में कोई लाइन फ़ीड नहीं है। तो तुलना में पहला चरित्र एक लाइन फीड (10) बनाम एक प्रिंट करने योग्य चरित्र (> 65) है। इसलिए जोड़ा गया पाठ हमेशा तालिका के अंत में रहेगा।

चयनकर्ता को सीधे <a /> टैग लाने के लिए बदलें और क्रम को काम करना चाहिए।

function sortTable(table, order) { 
 
    var asc = order === 'asc', 
 
    tbody = table.find('tbody'); 
 

 
    tbody.find('tr').sort(function(a, b) { 
 
    if (asc) { 
 
     return $('td:first a', a).text().localeCompare($('td:first a', b).text()); 
 
    } else { 
 
     return $('td:first a', b).text().localeCompare($('td:first a', a).text()); 
 
    } 
 
    }).appendTo(tbody); 
 
} 
 

 

 
$('.add').click(function() { 
 
    $('#Class > tbody').append("<tr><td><a href=/Forum/Class/Run>run</a></td></tr>") 
 
    sortTable($('#Class'), 'asc'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Class"> 
 
    <thead> 
 
    <tr> 
 
     <td>Class</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Druid">Druid</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Hunter">Hunter</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Paladin">Paladin</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Mage">Mage</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Priest">Priest</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Rogue">Rogue</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Shaman">Shaman</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warlock">Warlock</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warrior">Warrior</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button class="add"> add </button>