jQuery टेबललेटर - AJAX कॉल

Question

के बाद कार्यक्षमता का नुकसान मैं हाल ही में jQuery के लिए टेबललेटर प्लगइन के साथ प्रयोग कर रहा हूं। मैंने इसे सफलतापूर्वक प्राप्त कर लिया है और एक बार उदाहरण में चल रहा है, और मैं बहुत प्रभावित हूं। हालांकि, मैंने कुछ कठिनाइयों का सामना करने के लिए केवल एक अलग मेज पर टेबललेटर लागू करने का प्रयास किया है ...

असल में एक समस्या उत्पन्न करने वाली तालिका में <ul> है जो तालिका के लिए टैब के सेट के रूप में कार्य करता है। इसलिए यदि आप इनमें से किसी एक टैब पर क्लिक करते हैं, तो एक AJAX कॉल किया जाता है और तालिका को विशिष्ट टैब के लिए प्रासंगिक पंक्तियों के साथ दोहराया जाता है। जब पृष्ठ प्रारंभ में लोड होता है (यानी एक टैब क्लिक करने से पहले) टेबलर्स कार्यक्षमता बिल्कुल अपेक्षित काम करता है।

लेकिन जब एक टैब क्लिक किया जाता है और तालिका को दोहराया जाता है, कार्यक्षमता गायब हो जाती है, इसे क्रमबद्ध सुविधा के बिना प्रस्तुत करती है। यहां तक ​​कि यदि आप किसी अन्य टैब पर क्लिक करने के बाद मूल टैब पर वापस जाते हैं, तो कार्यक्षमता वापस नहीं आती है - ऐसा करने का एकमात्र तरीका ब्राउज़र में पृष्ठ का भौतिक रीफ्रेश है।

मैंने एक समाधान देखा है जो इस साइट पर मेरी समस्या के समान लगता है, और कोई jQuery प्लगइन, लाइवक्व्यूरी का उपयोग करने की सिफारिश करता है। मैंने कोशिश की है लेकिन इसका कोई फायदा नहीं हुआ :-(

अगर किसी के पास कोई सुझाव है तो मैं सबसे अधिक सराहना करता हूं। यदि कोड मदद करता है तो मैं कोड स्निपेट पोस्ट कर सकता हूं (हालांकि मुझे पता है कि टेबललेटर के लिए तत्काल कोड ठीक है जैसा यह काम करता है कोई टैब के साथ टेबल - तो यह निश्चित रूप से है कि नहीं है)

संपादित करें: अनुरोध अनुसार, यहाँ कुछ कोड के टुकड़े कर रहे हैं:
तालिका सॉर्ट किया जा रहा <table id="#sortableTable#">..</table>, tablesorter मैं उपयोग कर रहा हूँ के लिए इन्स्टेन्शियशन कोड है:

$(document).ready(function() 
{ 
    $("#sortableTable").tablesorter(
    { 
     headers: //disable any headers not worthy of sorting! 
     { 
      0: { sorter: false }, 
      5: { sorter: false } 
     }, 
     sortMultiSortKey: 'ctrlKey', 
     debug:true, 
     widgets: ['zebra'] 
    }); 
}); 

और मैं रिग अप livequery करने की कोशिश की इस प्रकार है:

$("#sortableTable").livequery(function(){ 
    $(this).tablesorter(); 
}); 

यह हालांकि नहीं मदद की है ... मुझे यकीन है कि के रूप में यह <ul> पर क्लिक किया गया है कि क्या मैं livequery साथ तालिका के आईडी का उपयोग करना चाहिए नहीं कर रहा हूँ मुझे जवाब देना चाहिए, जो निश्चित रूप से तालिका का हिस्सा नहीं है। मैं आशा व्यक्त की कि उनमें से एक में मदद मिलेगी में बदलाव की एक संख्या की कोशिश की है, लेकिन

Answer 1

:-(कोई लाभ नहीं हुआ आप कोड जहां टैब और पर क्लिक संभाल के बाद

$("#myTable").tablesorter(); 

बुला की कोशिश की है तालिका फिर से आबाद ??? यदि नहीं, तो बस इसे आजमाइए।

Answer 2

हो सकता है कि के रूप में अपने दूसरी तालिका ajax कि आप घटनाओं rebind करने की जरूरत के साथ बनाया जाता है। आप LiveQuery प्लगइन

उपयोग कर सकते हैं

http://docs.jquery.com/Plugins/livequery

जो आपकी समस्या के साथ "स्वतः जादुई" मदद कर सकता है।

संपादित करें: क्षमा करें, बस अपनी पोस्ट को दोबारा पढ़ें और देखा कि आपने पहले ही कोशिश की है।

---

अद्यतन। मैंने एक त्वरित परीक्षण दोहन को झुका दिया है जो उम्मीदपूर्वक मदद करेगा। शीर्ष पर 3 LIs हैं जिनके पास तालिका सामग्री को अपडेट करने का एक अलग तरीका है।पिछले एक सामग्री अद्यतन करता है और आदेश देने

<script src="jquery-1.3.js" type="text/javascript" ></script> 
    <script src="jquery.livequery.js" type="text/javascript" ></script> 
    <script src="jquery.tablesorter.min.js" type="text/javascript" ></script> 

<script> 

var newTableContents = "<thead><tr><th>Last Name</th><th>First Name</th> 
<th>Email</th><th>Due</th><th>Web Site</th></tr></thead> 
<tbody><tr><td>Smith</td><td>John</td><td>jsmith@gmail.com</td><td>$50.00</td> 
    <td>http://www.jsmith.com</td></tr><tr><td>Bach</td><td>Frank</td><td>fbach@yahoo.com</td> 
<td>$50.00</td><td>http://www.frank.com</td></tr></tbody>"; 


$(document).ready(function() 
    { 
     $("#addData").click(function(event){ 
     $("#sortableTable").html(newTableContents); 
    }); 

    $("#addLivequery").livequery("click", function(event){ 
     $("#sortableTable").html(newTableContents); 
    }); 

    $("#addLiveTable").livequery("click", function(event){ 
     $("#sortableTable").html(newTableContents); 
     $("#sortableTable").tablesorter({ }); 
    }); 

    $("#sortableTable").tablesorter({ }); 
    }); 
</script> 

     <ul> 
      <li id="addData" style="background-color:#ffcc99;display:inline;">Update Table</li> 
      <li id="addLivequery" style="background-color:#99ccff;display:inline;">Update Table with livequery</li> 
      <li id="addLiveTable" style="background-color:#99cc99;display:inline;">Update Table with livequery & tablesorter</li> 
     </ul> 

     <hr /> 
     <table id="sortableTable"> 
     <thead> 
     <tr> 
      <th>Last Name</th> 
      <th>First Name</th> 
      <th>Email</th> 
      <th>Due</th> 
      <th>Web Site</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Jones</td> 
      <td>Joe</td> 
      <td>jjones@gmail.com</td> 
      <td>$100.00</td> 
      <td>http://www.jjones.com</td> 
     </tr> 
     <tr> 
      <td>French</td> 
      <td>Guy</td> 
      <td>gf@yahoo.com</td> 
      <td>$50.00</td> 
      <td>http://www.french.com</td> 
     </tr> 
     </tbody> 
     </table> 

Answer 3

बाहर कर देता है मैं AJAX संबंधित कोड में कोई भी डेटा खींचने के बाद $("#myTable").tablesorter(..) फिर से कॉल करने के लिए कुछ संशोधन करने के लिए किया था रहता है ...

Answer 4

मैं हो रही थी एक ही समस्या को छोड़कर मैं एक टेबल लोड कर रहा था जिसमें प्रत्येक 'श्रेणी' के लिए एक पंक्ति थी, फिर प्रत्येक श्रेणी के लिए डेटा को एसिंक्रोनस कॉल का उपयोग करके तालिका में डालना। प्रत्येक रिकॉर्ड लौटने के बाद $("#myTable").tablesorter(..) पर कॉल करने के कारण मेरे ब्राउज़र को बमबारी हुई क्योंकि रिकॉर्ड की एक छोटी संख्या से अधिक लोड हो गए थे।

मेरा समाधान दो चर, totalRecords और fetchedRecords घोषित करना था। $(document).ready() में मैं $("#recordRows").length; को totalRecords की स्थापना की और हर बार जब मैं तालिका में एक रिकॉर्ड को पॉप्युलेट, fetchedRecords चर वृद्धि की जाती है और fetchedRecords >= totalRecords तो मैं मेरे लिए काफी अच्छी तरह से $("#myTable").tableSorter(..).

वर्क्स कॉल करते हैं। बेशक, आपका माइलेज भिन्न हो सकता हैं।

Answer 5

बार जब आप अपने डेटा संलग्न है, ऐसा करते हैं:

$("your-table").trigger("update"); 
var sorting = [[0,0]]; 
$("your-table").trigger("sorton",[sorting]); 

यह दूँगी प्लगइन पता है कि यह एक अद्यतन किया गया है, और यह फिर से तरह।

पूर्ण उदाहरण दस्तावेज़ में दी गई:

$(document).ready(function() { 
    $("table").tablesorter(); 
    $("#ajax-append").click(function() { 
     $.get("assets/ajax-content.html", function(html) { 
      // append the "ajax'd" data to the table body 
      $("table tbody").append(html); 
      // let the plugin know that we made a update 
      $("table").trigger("update"); 
      // set sorting column and direction, this will sort on the first and third column 
      var sorting = [[2,1],[0,0]]; 
      // sort on the first column 
      $("table").trigger("sorton",[sorting]); 
     }); 
     return false; 
    }); 
}); 

tablesorter डॉक यहाँ से: http://tablesorter.com/docs/example-ajax.html

Answer 6

ajaxStop समारोह का प्रयोग करें और ajax कॉल पूर्ण होने के बाद कोड चलेंगे।

$("#DivBeingUpdated").ajaxStop(function(){ 
    $("table").tablesorter() 
}); 

Answer 7

ajax कॉल के बाद

जब अपने html सामग्री बदल आप TableSorter अपडेट करना होगा।

मुझे काम ठीक

अगर आप एचटीएमएल

$("table tbody").append(html); 
     // let the plugin know that we made a update 
     $("table").trigger("update"); 
     // set sorting column and direction, this will sort on the first and third column 
     var sorting = [[2,1],[0,0]]; 
     // sort on the first column 
     $("table").trigger("sorton",[sorting]); 

जोड़कर और जब आप नए एचटीएमएल बजाय पुराने जोड़ने

$("table").trigger("update"); 
$("table").trigger("sorton"); 

Answer 8

मैं आए हैं के लिए प्रयास करें हाल ही में इस समस्या में। elwyn का समाधान मेरे लिए काम नहीं किया। लेकिन this topic ने सुझाव दिया कि समस्या "अद्यतन" और "सॉर्टन" घटनाओं पर कार्यों के सिंक्रनाइज़ेशन में है।

आप jQuery Tablesorter का कोड में देखें, तो 2.0 (ver 2.0.5b।) स्रोत कोड, आप की तरह कुछ दिखाई देगा:

$this.bind("update", function() { 
    var me = this; 
    setTimeout(function() { 
     // rebuild parsers. 
     me.config.parsers = buildParserCache(me, $headers); 
     // rebuild the cache map 
     cache = buildCache(me); 
    }, 1); 
}).bind("sorton", function (e, list) { 
    $(this).trigger("sortStart"); 
    config.sortList = list; 
    // update and store the sortlist 
    var sortList = config.sortList; 
    // update header count index 
    updateHeaderSortCount(this, sortList); 
    // set css for headers 
    setHeadersCss(this, $headers, sortList, sortCSS); 
    // sort the table and append it to the dom 
    appendToTable(this, multisort(this, sortList, cache)); 
}); 

तो समस्या यह है कि setTimeout यह कम संभव है कि अद्यतन करता है छंटनी से पहले समाप्त हो जाएगा।मेरे समाधान लागू करने के लिए अभी तक एक और घटना "updateSort" इतना है कि इसके बाद के संस्करण कोड बन जाएगा था,:

var sorting = [[0,0]]; 
$("#your-table").trigger("updateSort",[sorting]);