Jquery Datatables Phương pháp căn chỉnh phương pháp Ajax

Question

Tôi hiển thị các giá trị bảng cơ sở dữ liệu bằng cách sử dụng các bảng dữ liệu. Tôi đang làm điều này bằng cách sử dụng phương pháp ajax. Đây là mã

$('#example1').dataTable({ 
       "bProcessing": true, 
       "sAjaxSource": "filename.php", 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers" 

      }); 

Đầu ra của filename.php là

{ "aaData": [["1","<input type='checkbox' name='user'>&nbsp;Test Name","Leader","35"]] } 

Mã html là

<table cellpadding="0" cellspacing="0" border="0" class="display tablehead" id="example1"> 
       <thead> 
        <tr class="colhead newbg"> 
        <th width="17" align="center">No</th> 
        <th width="194" align="left">User</th> 
        <th width="56" align="left">Role</th> 
        <th width="31" align="right">AGE</th> 
        </tr> 
        </thead> 
        <tbody> 

        </tbody> 
       </table> 

Trong html ở trên bạn sẽ nhìn thấy cột đầu tiên là căn giữa và hai cột tiếp theo được căn trái và cột cuối cùng được căn phải. Nhưng trong dữ liệu, tất cả đều được căn giữa. Tôi cố gắng để sử dụng sau đây

{ "aaData": [["<div align='center'>1</div>","<div align='left'><input type='checkbox' name='user'>&nbsp;Test Name</div>","<div align='center'>Leader</div>","<div align='right'>35</div>"]] } 

Bây giờ tôi đã nhận màn hình hiển thị đúng nhưng khi sắp xếp theo tuổi nó không phải là chính xác. Hãy giúp tôi. Cảm ơn

Answer 1

Tôi nghĩ rằng bạn nên làm điều gì đó tương tự (sử dụng aoColumns):

$('#example1').dataTable({ 
       "bProcessing": true, 
       "sAjaxSource": "filename.php", 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers", 
      "aoColumns": [ 
         {"sClass": "center"}, 
         {"sClass": "left"}, 
         {"sClass": "left"}, 
         {"sClass": "right"}, 

      }); 

Và sau đó xác định các lớp CSS đúng

.right{ 
    align: right; 
} 

.left{ 
    align: left; 
} 

.center{ 
    align: center; 
} 

Bằng cách này datatables handle phụ thêm các lớp học với các yếu tố và sắp xếp hoạt động chính xác. Tất nhiên, hãy sử dụng JSON

Answer 2

Bạn không thể nối thêm phần tử DIV vào TABLE body! Bạn phải tạo phần tử TR mới thay đổi tất cả DIV thành TD và sau đó nối chúng vào phần tử TR sau đó thêm phần tử TR vào phần thân TABLE.

CẬP NHẬT Phần tử DIV không có thuộc tính căn chỉnh, bạn phải sử dụng CSS cho điều này.

Answer 3

Bây giờ tôi có màn hình chính xác nhưng trong khi sắp xếp theo độ tuổi thì không chính xác. Hãy giúp tôi. Cảm ơn

Vì bạn có HMTL trong cột đó, DataTables sẽ tự động phát hiện nó dưới dạng 'chuỗi' và sắp xếp theo đó. Nếu bạn muốn nó sắp xếp số, loại bỏ dữ liệu HTML, hãy sử dụng plugin này: http://datatables.net/plug-ins/sorting#numbers_html