bagaimana menghapus pagination di datatable

92

Saya baru di jQuery. Saya telah menggunakan Datatables di grid tetapi tidak perlu pagination.

Ada daftar pesanan dalam satu halaman dan saya menunjukkannya dalam kisi Datatable tetapi di bagian bawah saya tidak ingin menampilkan pagination. Apakah ada cara untuk menghapus atau menyembunyikan pagination dari tabel data dengan menggunakan sedikit kustomisasi di pustaka jQuery.

masukkan deskripsi gambar di sini

Saya mencoba menyesuaikannya tetapi saya menemukan sangat sedikit metode untuk melakukannya ..

Terima kasih sebelumnya.

jquery html pagination datatables Toseef Khilji
sumber
2
metode atau plugin apa yang Anda gunakan?
Naryl

Jawaban:

163

Anda harus memasukkan "bPaginate": false,ke dalam objek konfigurasi yang Anda berikan ke parameter konstruktor Anda. Seperti yang terlihat di sini: http://datatables.net/release-datatables/examples/basic_init/filter_only.html

nstCactus
sumber
1
Jika saya hanya ingin menampilkan 100 baris pertama data saya, bPaginate tidak berfungsi, karena ini menampilkan semua data terlepas dari parameter iDisplayLength saya. Apakah Anda tahu bagaimana menghindarinya?
Alexis Dufrenoy
Koreksi saya jika saya salah, tetapi jika Anda hanya menampilkan 100 item pertama dan menonaktifkan penomoran halaman, pengguna tidak dapat menampilkan hasil berikut. Jika demikian, Anda harus mencoba mengubah sumber data Anda secara langsung. Tampaknya ini masalah yang berbeda, jadi Anda harus mempertimbangkan untuk membuka pertanyaan baru dan memberi kami beberapa kode Anda.
nstCactus
1
Sebenarnya, ini untuk fungsi pencarian, dan saya juga perlu menampilkan pesan yang mengatakan bahwa pengguna perlu mengubah kriteria pencariannya karena terlalu banyak baris yang diambil. Sebagai catatan, saya bertanya di forum Datatables, dan solusinya adalah menambahkan opsi: sDom = lfrt (tanpa "p", tanpa pagination). Semoga bermanfaat ...
Alexis Dufrenoy
72

NONAKTIFKAN PAGINASI

Untuk DataTables 1.9

Gunakan bPaginateopsi untuk menonaktifkan pagination.

$('#example').dataTable({
    "bPaginate": false
});

Untuk DataTables 1.10+

Gunakan pagingopsi untuk menonaktifkan pagination.

$('#example').dataTable({
    "paging": false
});

Lihat jsFiddle ini untuk kode dan demonstrasi.

HAPUS KONTROL PAGINASI DAN TINGGALKAN PAGINASI DIAKTIFKAN

Untuk DataTables 1.9

Gunakan sDomopsi untuk mengonfigurasi elemen kontrol mana yang muncul di halaman.

$('#example').dataTable({
    "sDom": "lfrti"
});

Untuk DataTables 1.10+

Gunakan domopsi untuk mengonfigurasi elemen kontrol mana yang muncul di halaman.

$('#example').dataTable({
    "dom": "lfrti"
});

Lihat jsFiddle ini untuk kode dan demonstrasi.

Gyrocode.com
sumber
2
untuk 1.10+, menentukan data-paging='false'elemen tabel juga akan berfungsi.
Jeromy French
21

Bekerja

Coba kode di bawah ini

$('#example').dataTable({
    "bProcessing": true,
    "sAutoWidth": false,
    "bDestroy":true,
    "sPaginationType": "bootstrap", // full_numbers
    "iDisplayStart ": 10,
    "iDisplayLength": 10,
    "bPaginate": false, //hide pagination
    "bFilter": false, //hide Search bar
    "bInfo": false, // hide showing entries
})
Muhammad Fahad
sumber
20 
$(document).ready(function () {
            $('#Grid_Id').dataTable({
                "bPaginate": false
            });
        });

saya telah memecahkan masalah saya menggunakannya.

Toseef Khilji
sumber
12 
$('#table_id').dataTable({    
    "bInfo": false, //Dont display info e.g. "Showing 1 to 4 of 4 entries"
    "paging": false,//Dont want paging                
    "bPaginate": false,//Dont want paging      
})

Coba kode ini

Abhishek B Patel
sumber
6

jika Anda ingin menghapus pagination dan tetapi ingin memesan dataTable, tambahkan skrip ini di akhir halaman Anda!

<script>
$(document).ready(function() {        
    $('#table_id').DataTable({
        "paging":   false,
       "info":     false
    } );
      
  } );
</script>
Luaskan cuplikan

Mohsin Shoukat
sumber
-1

Berikut adalah alternatif yang merupakan peningkatan bertahap dari beberapa jawaban lainnya. Dengan asumsi settings.aLengthMenu bukan multidimensi (bisa jadi saat Tabel Data memiliki panjang baris dan label) dan data tidak akan berubah setelah pemuatan halaman (untuk Tabel Data yang dimuat DOM sederhana), fungsi ini dapat disisipkan untuk menghilangkan paging. Ini menyembunyikan beberapa kelas yang berhubungan dengan halaman.

Mungkin yang lebih kuat adalah menyetel paging menjadi false di dalam fungsi di bawah, namun saya tidak melihat panggilan API untuk itu begitu saja.

$('#myTable').on('init.dt', function(evt, settings) {
    if (settings && settings.aLengthMenu && settings.fnRecordsTotal && settings.fnRecordsTotal() < settings.aLengthMenu[0]) {
        // hide pagination controls, fewer records than minimum length
        $(settings.nTableWrapper).find('.dataTables_paginate, .dataTables_length, .dataTables_info').hide();
    }
}).DataTable();
ryanm
sumber