The Javascript shown below is used to initialise the table shown in this example:
/* Formatting function for row details - modify as you need */
function format(d) {
// `d` is the original data object for the row
return (
'' +
'' +
'| Full name: | ' +
'' +
d.name +
' | ' +
'
' +
'' +
'| Extension number: | ' +
'' +
d.extn +
' | ' +
'
' +
'' +
'| Extra info: | ' +
'And any further details here (images etc)... | ' +
'
' +
'
'
);
}
$(document).ready(function () {
var table = $('#example').DataTable({
ajax: '../ajax/data/objects.txt',
columns: [
{
className: 'dt-control',
orderable: false,
data: null,
defaultContent: '',
},
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'salary' },
],
order: [[1, 'asc']],
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.dt-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
});
In addition to the above code, the following Javascript library files are loaded for use in this example:
- https://code.jquery.com/jquery-3.5.1.js
-
https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.
The script used to perform the server-side processing for this
table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.
Metode jQuery Traversing
| Method | Deskripsi |
|---|
| add()
| Menambahkan elemen ke kumpulan elemen yang cocok
|
| addBack()
| Menambahkan set elemen sebelumnya ke set saat ini
|
| andSelf()
| Tidak digunakan lagi dalam versi 1.8. Alias untuk addBack ()
|
| children()
| Menampilkan semua turunan langsung dari elemen yang dipilih
|
| closest()
| Mengembalikan leluhur pertama dari elemen yang dipilih
|
| contents()
| Mengembalikan semua turunan langsung dari elemen yang dipilih (termasuk teks dan node komentar)
|
| each()
| Menjalankan fungsi untuk setiap elemen yang cocok
|
| end()
| Mengakhiri operasi pemfilteran terbaru dalam rantai saat ini, dan mengembalikan kumpulan elemen yang cocok ke keadaan sebelumnya
|
| eq()
| Mengembalikan elemen dengan nomor indeks tertentu dari elemen yang dipilih
|
| filter()
| Kurangi kumpulan elemen yang cocok dengan yang cocok dengan selektor atau lewati pengujian fungsi
|
| find()
| Mengembalikan elemen turunan dari elemen yang dipilih
|
| first()
| Mengembalikan elemen pertama dari elemen yang dipilih
|
| has()
| Mengembalikan semua elemen yang memiliki satu atau lebih elemen di dalamnya
|
| is()
| Memeriksa kumpulan elemen yang cocok dengan objek selector / element / jQuery, dan mengembalikan nilai true jika setidaknya salah satu dari elemen ini cocok dengan argumen yang diberikan
|
| last()
| Mengembalikan elemen terakhir dari elemen yang dipilih
|
| map()
| Meneruskan setiap elemen dalam set yang cocok melalui suatu fungsi, menghasilkan objek jQuery baru yang berisi nilai yang dikembalikan
|
| next()
| Mengembalikan elemen saudara berikutnya dari elemen yang dipilih
|
| nextAll()
| Menampilkan semua elemen saudara berikutnya dari elemen yang dipilih
|
| nextUntil()
| Mengembalikan semua elemen saudara berikutnya di antara dua argumen yang diberikan
|
| not()
| Mengembalikan elemen yang tidak cocok dengan kriteria tertentu
|
| offsetParent()
| Mengembalikan elemen induk yang diposisikan pertama
|
| parent()
| Mengembalikan elemen induk langsung dari elemen yang dipilih
|
| parents()
| Menampilkan semua elemen leluhur dari elemen yang dipilih
|
| parentsUntil()
| Mengembalikan semua elemen leluhur di antara dua argumen yang diberikan
|
| prev()
| Mengembalikan elemen saudara sebelumnya dari elemen yang dipilih
|
| prevAll()
| Menampilkan semua elemen saudara sebelumnya dari elemen yang dipilih
|
| prevUntil()
| Mengembalikan semua elemen saudara sebelumnya di antara dua argumen yang diberikan
|
| siblings()
| Menampilkan semua elemen saudara dari elemen yang dipilih
|
| slice()
| Mengurangi set elemen yang cocok menjadi subset yang ditentukan oleh rentang indeks
|
