jQuery tablesorter - mất chức năng sau khi gọi AJAX

Question

Gần đây tôi đã thử nghiệm với plugin tablesorter cho jQuery. Tôi đã thành công và chạy nó trong một lần, và tôi rất ấn tượng. Tuy nhiên, tôi đã cố gắng áp dụng bảng biểu cho một bảng khác, chỉ gặp phải một số khó khăn ...

Về cơ bản bảng gây ra sự cố có số <ul> ở trên nó hoạt động như một tập hợp các tab cho bảng. vì vậy nếu bạn bấm vào một trong các tab này, một cuộc gọi AJAX được thực hiện và bảng được repopulated với các hàng có liên quan đến các tab cụ thể nhấp vào. Khi trang tải ban đầu (tức là trước khi một tab được nhấp), chức năng của bảng biểu hoạt động chính xác như mong đợi.

Nhưng khi một tab được nhấp và bảng được repopulated, chức năng biến mất, hiển thị nó mà không có tính năng sắp xếp. Ngay cả khi bạn quay lại tab gốc, sau khi nhấp vào tab khác, chức năng không trả về - cách duy nhất để làm như vậy là làm mới trang vật lý trong trình duyệt.

Tôi đã thấy một giải pháp có vẻ tương tự như sự cố của tôi trên trang web này và ai đó khuyên bạn nên sử dụng plugin jQuery, livequery. Tôi đã thử điều này nhưng không có kết quả :-(

Nếu ai đó có bất kỳ đề xuất nào tôi sẽ đánh giá cao nhất. Tôi có thể đăng đoạn mã nếu nó giúp (mặc dù tôi biết mã instantiation cho tablesorter là tốt khi nó hoạt động bảng không có các tab - vì vậy nó chắc chắn không phải là)

EDIT: Theo yêu cầu, đây là một số đoạn mã:
bảng được sắp xếp là <table id="#sortableTable#">..</table>, mã instantiation cho tablesorter tôi đang sử dụng là:

$(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'] 
    }); 
}); 

Và tôi đã cố gắng để dàn dựng livequery như sau:

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

này đã không giúp mặc dù ... Tôi không chắc liệu tôi nên sử dụng id của bảng với livequery vì nó là nhấp chuột vào <ul> Tôi nên trả lời, đó là tất nhiên không phải là một phần của bảng. Tôi đã thử một số biến thể với hy vọng rằng một trong số họ sẽ giúp đỡ, nhưng không có kết quả :-(

Answer 1

Các bạn đã thử gọi

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

sau khi mã nơi bạn xử lý các nhấp chuột trên tab và repopulate bàn ??? Nếu không, chỉ cần cung cấp cho nó một thử.

Answer 2

có thể như bảng thứ hai của bạn được tạo ra với ajax mà bạn cần phải kết nối lại các sự kiện. bạn có thể muốn sử dụng plugin LiveQuery

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

có thể "tự động kỳ diệu" giúp giải quyết sự cố của bạn.

chỉnh sửa: xin lỗi, chỉ đọc lại bài đăng của bạn và thấy rằng bạn đã thử điều đó rồi.

---

Cập nhật. Tôi đã lắp ráp một dây nịt thử nghiệm nhanh chóng mà hy vọng sẽ giúp ích. Có 3 LIs ở đầu mỗi người có một cách khác nhau để cập nhật nội dung bảng.Người cuối cùng cập nhật các nội dung và giữ cho đặt hàng

<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

Hóa ra tôi đã phải thực hiện một số sửa đổi mã liên quan AJAX lại gọi $("#myTable").tablesorter(..) sau khi kéo bất kỳ dữ liệu ...

Answer 4

Tôi đã có cùng một vấn đề ngoại trừ tôi đã tải một bảng có một hàng cho mỗi 'thể loại' sau đó chèn dữ liệu cho mỗi thể loại vào bảng bằng cách sử dụng các cuộc gọi không đồng bộ. Gọi $("#myTable").tablesorter(..) sau mỗi bản ghi đã được trả lại khiến trình duyệt của tôi bị đánh bom khi số lượng bản ghi không đáng kể được tải xuống.

Giải pháp của tôi là khai báo hai biến, totalRecords và fetchedRecords. Trong $(document).ready() tôi đặt totalRecords để $("#recordRows").length; và mỗi khi tôi cư một kỷ lục trong bảng, biến fetchedRecords được tăng lên và nếu fetchedRecords >= totalRecords sau đó tôi gọi $("#myTable").tableSorter(..).

trình khá tốt cho tôi. Tất nhiên, số dặm của bạn có thể thay đổi.

Answer 5

Một khi bạn đã nối dữ liệu của bạn, làm điều này:

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

này sẽ cho phép các plugin biết nó đã có một bản cập nhật, và tái sắp xếp nó.

Các ví dụ hoàn chỉnh được đưa ra trong doc:

$(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; 
    }); 
}); 

Từ tablesorter doc ở đây: http://tablesorter.com/docs/example-ajax.html

Answer 6

Sử dụng chức năng ajaxStop và mã sẽ chạy sau khi cuộc gọi ajax hoàn tất.

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

Answer 7

sau khi cuộc gọi ajax khi thay đổi nội dung html của bạn, bạn cần phải cập nhật TableSorter.

TRY NÀY CHO TÔI LÀM VIỆC OK

nếu bạn phụ html

$("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]); 

và khi bạn thêm html mới thay cũ

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

Answer 8

tôi đã đến qua vấn đề này gần đây. giải pháp của elwyn không hiệu quả với tôi. Nhưng this topic đề xuất rằng vấn đề là trong đồng bộ hóa các chức năng về các sự kiện "cập nhật" và "sắp xếp".

Nếu bạn nhìn vào đoạn code của jQuery TableSorter 2.0 (ver 2.0.5b.) Mã nguồn, bạn sẽ thấy một cái gì đó như:

$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)); 
}); 

Vì vậy, vấn đề là setTimeout làm cho nó ít có thể xảy cập nhật mà sẽ được hoàn thành trước khi phân loại.Giải pháp của tôi là để thực hiện được nêu ra một sự kiện "updateSort", do đó mã trên sẽ trở thành:

var updateFunc = function (me) { 
    me.config.parsers = buildParserCache(me, $headers); 
    cache = buildCache(me); 
}; 
var sortFunc = function (me, e, list) { 
    $(me).trigger("sortStart"); 
    config.sortList = list; 
    var sortList = config.sortList; 
    updateHeaderSortCount(me, sortList); 
    setHeadersCss(me, $headers, sortList, sortCSS); 
    appendToTable(me, multisort(me, sortList, cache)); 
}; 
$this.bind("update", function() { 
    var me = this; 
    setTimeout(updateFunc(me), 1); 
}).bind("sorton", function(e, list) { 
    var me = this; 
    sortFunc(me, e, list); 
}).bind("updateSort", function (e, list) { 
    var me = this; 
    updateFunc(me); 
    sortFunc(me, e, list); 
}); 

Sau khi cập nhật dữ liệu trong bảng của bạn, bạn sẽ phải kích hoạt chỉ sự kiện mới này:

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