Làm cách nào tôi có thể xóa thanh tìm kiếm và chân trang được thêm bởi plugin jQuery DataTables?

Tôi đang sử dụng jQuery DataTables .

Tôi muốn xóa thanh tìm kiếm và chân trang (hiển thị có bao nhiêu hàng có thể nhìn thấy) được thêm vào bảng theo mặc định. Về cơ bản, tôi chỉ muốn sử dụng plugin này để sắp xếp. Điều này có thể được thực hiện?

Đối với DataTables> = 1.10 , hãy sử dụng:

$('table').dataTable({searching: false, paging: false, info: false});

Đối với DataTables <1.10 , hãy sử dụng:

$('table').dataTable({bFilter: false, bInfo: false});

hoặc sử dụng CSS thuần túy:

.dataTables_filter, .dataTables_info { display: none; }

Hãy xem http://www.datatables.net/examples/basic_init/filter_only.html để biết danh sách các tính năng cần hiển thị / ẩn.

Những gì bạn muốn là đặt "bFilter" và "bInfo" thành false;

$(document).ready(function() {
    $('#example').dataTable( {
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
                 } );
} );

Bạn cũng không thể vẽ đầu trang hoặc chân trang bằng cách cài đặt sDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

sẽ hiển thị CHỈ bảng, không có tiêu đề hoặc chân trang hoặc bất cứ điều gì.

Nó đã được thảo luận ở đây: http://www.datatables.net/forums/discussion/2722/how-to- leather -empty-header-and-footer / p1

Nếu bạn đang sử dụng bộ lọc tùy chỉnh, bạn có thể muốn ẩn hộp tìm kiếm nhưng vẫn muốn bật chức năng bộ lọc, vì vậy bFilter: falsekhông phải là cách. Sử dụng dom: 'lrtp'thay thế, mặc định là 'lfrtip'. Tài liệu: https://datatables.net/reference/option/dom

var table = $("#datatable").DataTable({
   "paging": false,
   "ordering": false,
   "searching": false
});

Một cách nhanh chóng và bẩn thỉu là tìm ra lớp chân trang và ẩn nó bằng jQuery hoặc CSS:

$(".dataTables_info").hide();

nếu bạn đang sử dụng themeroller:

.dataTables_wrapper .fg-toolbar { display: none; }

Như đã nói bởi @Scott Stafford sDOMlà thuộc tính được đánh giá cao nhất để hiển thị, ẩn hoặc di chuyển các yếu tố cấu thành DataTables. Tôi nghĩ rằng sDOMbây giờ đã lỗi thời, với bản vá thực tế tài sản này là bây giờ dom.

Thuộc tính này cho phép đặt một số lớp hoặc id thành một phần tử, do đó bạn có thể tạo kiểu dễ dàng hơn.

Kiểm tra tài liệu chính thức tại đây: https://datatables.net/reference/option/dom

Ví dụ này sẽ chỉ hiển thị bảng:

$('#myTable').DataTable({
    "dom": 't'
});

<script>
$(document).ready(function() {
    $('#nametable').DataTable({
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false
    });
});
</script>

trong hàm tạo dữ liệu của bạn

https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box

Tại đây bạn có thể thêm sDomyếu tố vào mã của mình, thanh tìm kiếm hàng đầu bị ẩn.

$(document).ready(function() {
    $('#example').dataTable( {
"sDom": '<"top">rt<"bottom"flp><"clear">'
 } );
} );

Điều này có thể được thực hiện bằng cách thay đổi cấu hình đơn giản:

$('table').dataTable({
      paging: false, 
      info: false
 });

Nhưng để che giấu chân trang trống rỗng; đoạn mã này thực hiện thủ thuật:

 $('table').dataTable({
      paging: false, 
      info: false,

      //add these config to remove empty header
      "bJQueryUI": true,
      "sDom": 'lfrtip'

});

Chỉ cần một lời nhắc nhở bạn không thể khởi tạo DataTabletrên cùng một <table>yếu tố hai lần.

Nếu bạn gặp phải vấn đề tương tự thì bạn có thể đặt searchingvà pagingsai trong khi khởi tạo DataTable trên HTML của mình <table>như thế này

 $('#tbl').DataTable({
    searching: false, 
    paging: false,
    dom: 'Bfrtip',
    buttons: [
       'copy', 'csv', 'excel', 'pdf', 'print'
    ]
 });

Bạn có thể ẩn chúng thông qua css:

#example_info, #example_filter{display: none}

Bạn có thể sử dụng thuộc tính sDom. Mã trông giống như thế này.

$(document).ready(function() {
    $('#example').dataTable( {
        'sDom': '"top"i'
                 } );
} );

Giấu hộp tìm kiếm và máy nhắn tin.

Kể từ DataTables 1.10.5, giờ đây có thể xác định các tùy chọn khởi tạo bằng các thuộc tính dữ liệu HTML5- *.

- tài liệu dataTables: thuộc tính HTML5 data- * - tùy chọn bảng

Vì vậy, bạn có thể chỉ định data-searching="false" data-paging="false" data-info="false"trên table. Ví dụ: bảng này sẽ không cho phép tìm kiếm, áp dụng phân trang hoặc hiển thị khối thông tin:

<table id="example" class="display" width="100%" data-searching="false" data-paging="false" data-info="false">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

Xem ví dụ hoạt động tại https://jsfiddle.net/jhfbler/17v94f2s/ .

Ưu điểm của phương pháp này là nó cho phép bạn có một cuộc gọi dataTables tiêu chuẩn (nghĩa là $('table.apply_dataTables').DataTable()) trong khi có thể định cấu hình các tùy chọn dataTables theo từng bảng.

Tôi đã thực hiện điều này bằng cách gán chân trang một id và sau đó tạo kiểu bằng css:

    <table border="1" class="dataTable" id="dataTable_${dtoItem.key}" >
     <thead>
        <tr>
            <th></th>

        </tr>
    </thead>
 <tfoot>
    <tr>
            <th id="FooterHidden"></th>
    </tr>
</tfoot>
<tbody>

    <tr>

                <td class="copyableField"></td>

    </tr>
 </tbody>
</table>

sau đó tạo kiểu bằng css:

#FooterHidden{
   display: none;
}

Như đã đề cập ở trên không làm việc cho tôi.

Tôi nghĩ cách đơn giản nhất là:

<th data-searchable="false">Column</th>

Bạn chỉ có thể chỉnh sửa bảng bạn phải sửa đổi mà không thay đổi CSS hoặc JS phổ biến.

Nếu bạn chỉ muốn ẩn biểu mẫu tìm kiếm chẳng hạn vì bạn có bộ lọc đầu vào cột hoặc có thể là do bạn đã có biểu mẫu tìm kiếm CMS có thể trả về kết quả từ bảng thì tất cả những gì bạn phải làm là kiểm tra biểu mẫu và lấy id của nó - (tại thời điểm viết bài này, nó trông như vậy [tableid]-table_filter.dataTables_filter). Sau đó, chỉ cần [tableid]-table_filter.dataTables_filter{display:none;}giữ lại tất cả các tính năng khác của datatables.