Độ dài trang hiển thị ở cuối bảng

Question

Tất cả,

Tôi đang sử dụng Bảng dữ liệu Jquery. Tôi đang sử dụng ví dụ sau:

DataTables with Pagination

Tôi đã tự hỏi nếu có một cách để hiển thị "Show 10 Entries" trên dưới cùng thay vì đầu. Nó sẽ được hiển thị ngay trước "Hiển thị 1 đến 10 của 51 mục" .. ở cuối bảng.

Tôi có thể làm như thế nào?

Cảm ơn

Answer 1

Cách để làm điều đó là để thay đổi sDom trong .js, nơi bạn xác định bảng:

$('#TABLE_ID').dataTable({` 
    "sDom": 'Rfrtlip'`  
}); 

Thêm vào đó, bạn nên thay đổi .css xuất hiện bên cạnh "Hiển thị ... mục ", bởi vì cách này nó xuất hiện phía trên nó.

Đây là lời giải thích của các tùy chọn sDom:

Các tùy chọn sau được phép:

• 'l' - Chiều dài thay đổi
• 'f' - lọc đầu vào
• 't' - Bàn!
• 'i' -Thông tin
• 'p' - Pagination
• 'r' - chế biến

Các hằng số sau đây được phép:

• 'H' - jQueryUI chủ đề "tiêu đề "classes ('fg-toolbar ui-widget-header ui-góc-tl ui-góc-tr ui-helper-clearfix')
• 'F' - jQueryUI chủ đề" chân trang "lớp học ('fg-toolbar ui-widget ui-góc-bl ui-góc-br ui-hel mỗi clearfix ')

Cú pháp sau đây được mong đợi:

• ' < 'và '>' - yếu tố div
• ' < "class" và '>' - div với một lớp
• '< "#ID" và '>' - div với một ID Ví dụ:
• ' < "wrapper" flipt>' 'ip>'

PS: Điều này cũng có thể giúp bạn:

datatables sDom

add-datatables-length-at-the-bottom-of-the-table

Answer 2

Đã có một vấn đề tương tự (muốn loại bỏ một số điều khiển không cần thiết) và cách duy nhất để đối phó với nó dường như được sửa đổi bảng chính mình. Tôi đã sử dụng gọi lại fnDrawCallback (http://datatables.net/usage/callbacks).

Nó sẽ là một cái gì đó như thế này trong trường hợp của bạn

$('#tableId').dataTable({ 
    "fnDrawCallback": function() { 
     $('#tableId_info').prepend($('#tableId_length')); 
    } 
}); 

Chỉ cần kiểm tra mã được tạo trong demo mà, nó thực sự khá đơn giản (trừ nó không có định dạng hoặc thụt đầu dòng).

Bạn cũng có thể sử dụng tên lớp thay vì id, nếu bạn không ngại ảnh hưởng đến các bảng khác trên trang. Chúng ở dạng dataTables_length.

Sử dụng css để tạo kiểu bổ sung.

Answer 3

Dưới đây là một ví dụ. Tài liệu này sẽ giúp rất nhiều: https://datatables.net/release-datatables/examples/basic_init/dom.html

bảng dữ liệu của tôi trông như thế này:

Tôi cũng đã phải thêm vào css dòng này:

.dataTables_length { 
    margin-top: 10px; 
    margin-left: 20px; 
} 

Mã này là:

$('.data_table').DataTable({ 
      "iDisplayLength": 20, 
      "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], 
      "pagingType": "simple_numbers", 
      "language": { 
       searchPlaceholder: "Search", 
       search: "", 

      }, 
      "dom": '<"top"f>rt<"bottom"ilp><"clear">' 
     });