Dữ liệu jQuery không hiển thị biểu tượng sắp xếp

Question

Tôi đang cố sử dụng plugin dataTable jQuery. Vấn đề là biểu tượng sắp xếp (mũi tên này trỏ đến dữ liệu hướng nào được sắp xếp thực tế) không được hiển thị.

Mã của tôi trông như sau:

$('#example').dataTable(
{ 
    "bPaginate": false, 
    "bFilter": false, 
    "oLanguage": { "sInfo": ""}   
} 
); 

và Html:

<table class="surfClass" cellspacing="1" id="example"> 

<thead> 
<tr> 
    <th width="120px">Name</th> 
    <th width="120px">The hourly rate (points)</th> 
    <th>Levels of referrals</th> 
    <th>bonuses</th> 
    <th width="70px">Payout minimum</th> 
</tr> 
</thead> 

Answer 1

Datatables sử dụng một sprite cho các biểu tượng bạn muốn sử dụng firebug trong firefox click vào ròng hơn tất cả và tìm kiếm bất cứ điều gì hiển thị màu đỏ. Điều này sẽ cho biết rằng nội dung không được tải. Bạn đang tìm kiếm dạng như thế này "/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png".

Tôi giả sử rằng plugin có thể đặt dữ liệu đang được khởi tạo và bạn đang thấy mọi thứ khác mà bạn mong đợi?

Bạn có thể muốn xem http://debug.datatables.net/ đó là một bookmarklet giúp gỡ lỗi plugin này.

Answer 2

Mỗi lần tôi gặp sự cố với dữ liệuBật xuất phát từ lỗi javascript.
Ngoài ra, bạn có thể thử thêm

"bSort": true, 

Answer 3

Tôi có vấn đề này và nó đã cho tôi một giờ để khám phá ra rằng tôi đã không liên kết đến một stylesheet yêu cầu. Trong trường hợp của tôi, tôi đã có:

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/minidatatables-bootstrap.css'}"/> 

nhưng tôi cũng cần thêm:

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/datatables-bootstrap.css'}"/> 

cho các biểu tượng sắp xếp để xuất hiện. Đây có thể là giải pháp chỉ bootstrap, nhưng nếu bạn gặp vấn đề này, bạn có thể chắc chắn rằng bạn đã có các bảng định kiểu đúng được liên kết.

Answer 4

Tôi gặp phải sự cố này, vì tôi đã sao chép tập lệnh CDN vào máy cục bộ của mình mà nó không đề cập đến hình ảnh một cách chính xác nữa như @ Matt2012 đã chỉ ra. Vì vậy, giải pháp của tôi là cập nhật tệp CSS để tìm kiếm những hình ảnh mà tôi muốn đặt chúng, sau khi tôi đã lưu chúng.

Xem phần này:

table.dataTable thead .sorting { background: url('/Content/images/sort_both.png') no-repeat center right; } 
table.dataTable thead .sorting_asc { background: url('/Content/images/sort_asc.png') no-repeat center right; } 
table.dataTable thead .sorting_desc { background: url('/Content/images/sort_desc.png') no-repeat center right; } 

table.dataTable thead .sorting_asc_disabled { background: url('/Content/images/sort_asc_disabled.png') no-repeat center right; } 
table.dataTable thead .sorting_desc_disabled { background: url('/Content/images/sort_desc_disabled.png') no-repeat center right; } 

Answer 5

Tôi cố định vấn đề bằng cách gói các văn bản bảng tiêu đề trong một <div>:

<th><div>Date</div></th> 

Answer 6

tôi đã có vấn đề quá. Chỉ cần sử dụng trình cấu hình của riêng họ để thiết lập tất cả các tùy chọn bạn muốn tạo ở đây https://datatables.net/download/, chúng sẽ tạo chính xác các tệp .js và .css mà bạn cần. Sau đó, bạn có thể tải xuống hoặc sử dụng CDN được lưu trữ của riêng mình cho cả hai tệp