Jquery datatable sắp xếp thứ tự theo cột

0
138

Giả sử bạn có một bảng dữ liệu table có nhiều cột, cột bạn mốn sắp xếp lại tồn tại cả kỹ tự chữ & số, trong khi đó bạn chỉ muốn sắp xếp theo số của cột, nhưng jquery datatable chỉ sắp xếp (sort) theo số hoặc theo ký tự. Vậy bạn phải khai báo sort như thế nào để datatable hiển thị thứ tự theo số number của cột dữ liệu phức hợp?

Khai báo sắp xếp theo cột với Jquery datatable

Ví dụ cụ thể như cột giá trị tiền tệ, thông thường giá trị tiền tệ sẽ có ký tự đơn vị tiền tệ đi kèm

| Lương | | $86,000 | | $1,200,000|

Jquery datatable sắp xếp giảm dần theo giá trị tiền tệ như trên thế nào?

HTML

<table id="jquery-datatable">
<tr>
	<td>A. Cox</td>
	<td>Junior Technical Author</td>
	<td>San Francisco</td>
	<td>66</td>
	<td>Mon 12th Jan 09</td>
	<td data-order="86000">$86,000</td>
</tr>
<tr>
	<td>C. Kelly</td>
	<td>Senior Javascript Developer</td>
	<td>Edinburgh</td>
	<td>22</td>
	<td>Thu 29th Mar 12</td>
	<td data-order="1200000">$1,200,000</td>
</tr>
</table>
// Bạn để ý thuộc tính: data-order của thẻ td

Jquery

$('#jquery-datatable').DataTable({
	"searching": false,
	"paging": false,
}).order([5, 'desc']).draw(); // Sắp xếp giá trị giảm dần theo cột số 5

Một số ví dụ khác với Jquery datatable

<table id="jquery-datatable">
<tr>
   <td data-search="Ashton Cox">A. Cox</td> // Sort theo tên - ký tự đầy đủ
   <td>Junior Technical Author</td>
   <td>San Francisco</td>
   <td>66</td>
   <td data-order="1231718400">Mon 12th Jan 09</td> // Sort theo ngày tháng năm
   <td data-order="86000">$86,000/y</td> // Sort theo số
</tr>
</table>

Khai báo các cột không sort

// Jquery
$('#jquery-datatable').DataTable({

   "aoColumnDefs": [{
		   'bSortable': false,
		   'aTargets': ['action', 'nosort']
		 }],
   'searching': false,
   'paging': false,
}).order([5, 'desc']).draw(); // Sắp xếp giá trị giảm dần theo cột số 5
// HTML
<table id="jquery-datatable">
 <tr>
  <td data-search="Ashton Cox">A. Cox</td>
  <td class="nosort">Junior Technical Author</td> // Khai báo không sort
  <td class="nosort">San Francisco</td> // Khai báo không sort
  <td>66</td>
  <td data-order="1231718400">Mon 12th Jan 09</td> 
  <td data-order="86000">$86,000/y</td>
 </tr>
</table>

Tham khảo thêm một số thuộc tính của Jquery datatable trong ví dụ đầy đủ tại link: https://datatables.net/examples/advanced_init/html5-data-attributes.html

Các bạn để lại comment bên dưới nếu có trước hợp đặc biệt nào khác liên quan tới Jquery datatable để anh em cùng học hỏi.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

− 2 = 2