bảng jquery tablesorter ajax chỉ phân loại một hướng

Question

Tôi có một bảng mà tôi tải thông qua lệnh tải jQuery. trong hàm callback của hàm load, tôi khởi tạo plugin tablesorter. Đối với một số lý do thì bảng chỉ sắp xếp giảm dần không tăng dần. Ngay cả weirder, nếu tôi giữ shift nó sẽ chuyển đổi một cách chính xác giữa asc và desc? Bất kỳ ý tưởng gì đang xảy ra ở đây?

table.php

<table id="xyz"> 
<thead> 
    <tr> 
     <th>hi</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>a</td> 
    </tr> 
    <tr> 
     <td>b</td> 
    </tr> 
    <tr> 
     <td>c</td> 
    </tr> 
</tbody> 
</table> 

jquery

$("#myDiv").load("table.php", function() { 
    $("#xyz").tablesorter(); 
}); 

nếu tôi không tải các bảng thông qua ajax thì các hàm tablesorter như mong đợi.

Answer 1

Được rồi vì vậy tôi đã bị ràng buộc đôi như Jason nghĩ.

Tôi đã thực sự gọi hàm tải của jQuery trên một lớp và tôi đã có hai div với lớp đó trên trang của tôi. Vì vậy, nó thực sự được gọi là chức năng gọi lại hai lần?

Tôi nghĩ rằng đó là hành vi kỳ lạ khi nội dung được tải vào cả hai div đều giống nhau nhưng có vẻ như jQuery thực hiện cuộc gọi ajax riêng biệt cho từng div. Cảm ơn ý kiến ​​của bạn!

Answer 2

Sự cố đã được giải quyết, nhưng tôi sẽ đề cập đến vấn đề tương tự. Lý do là trong phiên bản cũ của jquery: Tôi đã có 1.4.2, 1.4.4 là cần thiết.

Answer 3

Chỉ nghĩ rằng tôi sẽ ném một câu trả lời khác ở đây trong trường hợp bất cứ ai khác chạy vào điều này. Điều này đã xảy ra với tôi khi tôi cố gắng gọi số .tablesorter() trên bàn bằng cách sử dụng bộ chọn lớp thay vì bộ chọn id. Vì vậy, thay đổi nó từ

$('.tablesorter').tablesorter();

để

$('#tablesorter').tablesorter();

(và đánh dấu để phản ánh điều này) cố định vấn đề này đối với tôi.

Answer 4

Một lần nữa, khi xem cách giải quyết vấn đề này, tôi muốn chia sẻ kịch bản khác nhau của mình.

My hàng bảng cơ thể được tạo ra tự động từ một cuộc gọi .ajax, khi người dùng thêm/Sửa/xóa một hàng, sau đó các hàng cơ bảng là .removed() và tái tạo với cùng .ajax cuộc gọi qua function(). Điều này tất nhiên đôi liên kết các tablesorter kể từ khi đầu bảng vẫn còn, mà gây ra hành vi lạ.

Việc sửa chữa đối với tôi là để unbind tablesorter trước khi khởi $('#mytable').addClass('tablesorter').tablesorter(); như vậy:

$('#mytable') 
    .unbind('appendCache applyWidgetId applyWidgets sorton update updateCell') 
    .removeClass('tablesorter') 
    .find('thead th') 
    .unbind('click mousedown') 
.removeClass('header headerSortDown headerSortUp'); 

sửa chữa khác có thể là để tạo ra toàn bộ bảng trong các cuộc gọi .ajax chứ không phải chỉ là cơ thể <tr> 's.

Hope this helps

Answer 5

tôi đã cùng một vấn đề nhưng một thiết lập khác nhau, và câu trả lời đã nêu trong chủ đề này đã không được giải quyết vấn đề của tôi. Thêm giải pháp cho kịch bản của tôi trong trường hợp người khác có cùng vấn đề với tôi.

Hàng nội dung bảng của tôi được tạo động từ cuộc gọi .ajax khi tải trang và một cột được đặt làm danh sách sắp xếp mặc định để sắp xếp sau khi dữ liệu được tải.

5 trong số 10 cột được điền lại dựa trên việc gửi phạm vi ngày mới. Tôi không xây dựng lại bảng cơ thể, nhưng thay vì tiêm dữ liệu vào các hồ sơ thích hợp, sau đó nghỉ mát dựa trên sortList mặc định của tôi.

Vấn đề của tôi là sau khi gửi phạm vi ngày mới, bảng con bây giờ được xác định hai lần trong tiêu đề, do đó, việc nhấp vào tiêu đề sẽ sắp xếp hai lần, xuất hiện để chỉ sắp xếp một chiều.

Giải pháp của tôi là để ngăn chặn tiêu đề bảng phân cấp được khởi tạo hai lần. Ngày tải trang, tôi để cho tablesorter loại một cột tôi đặt trong thuộc tính sortList tôi đặt, nhưng mỗi ngày mới nhiều submited, tôi sử dụng các dòng sau để sắp xếp cột của tôi sau khi tải dữ liệu:

$('#mytableBody').trigger("update"); 
var sorting = [[5, 1]]; 
setTimeout(function() {$('#mytableBody').trigger('sorton', [sorting]) }, 1); 

tôi sử dụng setTimeout để đảm bảo dữ liệu được tải đầy đủ trước khi sắp xếp.

Hy vọng điều này sẽ hữu ích.