Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  |  |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : [email protected]. Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

JQuery PHP Tips and Trick

Cara Menambahkan Nomor Urut pada JQuery Datatables dengan PHP

img-responsive

Tutorial ini sengaja saya buat untuk menjawab pertanyaan dari salah satu pengunjung blog ini. Dan menurut saya tutorial ini akan sangat berguna karena tentunya akan banyak dipakai. Yup, kita akan coba menambahkan Kolom No. (Nomor Urut Baris Data) pada Tabel yang menggunakan JQuery Datatables. Tanpa basa-basi langsung ikuti singkatnya dibawah ini.

PENTING!
Sebelum mengikuti tutorial ini, Saya mau pastikan bahwa Anda sudah mengikuti tutorial saya sebelumnya mengenai Cara Menggunakan jQuery DataTables dengan PHP dan MySQL karena tutorial ini hanya memodifikasi sedikit dari hasil tutorial tersebut. Maka dari itu bagi Anda yang belum mengikuti tutorial tersebut silahkan ikuti dulu tutorial tersebut, baru boleh melanjutkan membaca tutorial ini.


STEP 1 – KOLOM NO
Hal yang harus kita lakukan pertama kali adalah memodifikasi heading dari tabel nya, yakni menambahkan kolom No. Berikut langkah-langkahnya :

  1. Buka file index.php, kemudian cari skrip dibawah ini :
    <thead>
      <tr>
        <th>NIS</th>
        <th>Nama</th>
        <th>Jenis Kelamin</th>
        <th>Telepon</th>
        <th>Alamat</th>
        <th>Aksi</th>
      </tr>
    </thead>
  2. Ubah kode tersebut dengan menambahkan skrip <th>No</th> seperti berikut ini :
    <thead>
      <tr>
        <th>No</th>
        <th>NIS</th>
        <th>Nama</th>
        <th>Jenis Kelamin</th>
        <th>Telepon</th>
        <th>Alamat</th>
        <th>Aksi</th>
      </tr>
    </thead>

STEP 2 – KONFIGURASI DATATABLES
Pada tahap ini kita juga akan memodifikasi konfigurasi dari skrip JQuery Datatables nya. berikut langkah-langkahnya :

  1. Buka file index.php
  2. Cari skrip berikut “order”: [[ 0, ‘asc’ ]]. lalu ubah menjadi “order”: [[ 1, ‘asc’ ]]. Perbedaannya adalah kita mengubah angka 0 menjadi 1. Kenapa kita ubah? karena 0 disini mengacu ke Kolom No. Sementara kolom No ini bukan bagian dari field di tabel siswa, sehinnga tidak perlu diaktifkan fitur sorting untuk kolom No.
  3. Kemudian cari skrip berikut ini :
    "columns": [
        { "data": "nis" }, // Tampilkan nis
        { "data": "nama" },  // Tampilkan nama
        { "render": function ( data, type, row ) {  // Tampilkan jenis kelamin
                var html = ""
    
                if(row.jenis_kelamin == 1){ // Jika jenis kelaminnya 1
                    html = 'Laki-laki' // Set laki-laki
          }else{ // Jika bukan 1
                    html = 'Perempuan' // Set perempuan
                }
    
                return html; // Tampilkan jenis kelaminnya
            }
        },
        { "data": "telp" }, // Tampilkan telepon
        { "data": "alamat" }, // Tampilkan alamat
        { "render": function ( data, type, row ) { // Tampilkan kolom aksi
                var html  = "<a href=''>EDIT</a> | "
                html += "<a href=''>DELETE</a>"
    
                return html
            }
        },
    ],
  4. Ubah kode tersebut dengan menambahkan skrip { “data”: “no” },  tepat setelah skrip “columns”: [ seperti berikut ini :
    "columns": [
        { "data": "no" },
        { "data": "nis" }, // Tampilkan nis
        { "data": "nama" },  // Tampilkan nama
        { "render": function ( data, type, row ) {  // Tampilkan jenis kelamin
                var html = ""
    
                if(row.jenis_kelamin == 1){ // Jika jenis kelaminnya 1
                    html = 'Laki-laki' // Set laki-laki
          }else{ // Jika bukan 1
                    html = 'Perempuan' // Set perempuan
                }
    
                return html; // Tampilkan jenis kelaminnya
            }
        },
        { "data": "telp" }, // Tampilkan telepon
        { "data": "alamat" }, // Tampilkan alamat
        { "render": function ( data, type, row ) { // Tampilkan kolom aksi
                var html  = "<a href=''>EDIT</a> | "
                html += "<a href=''>DELETE</a>"
    
                return html
            }
        },
    ],



STEP 3 – PROSES VIEW
Terakhir, kita akan coba modifikasi proses viewnya. Berikut langkah-langkahnya :

  1. Buka file view.php
  2. Cari skrip $data = mysqli_fetch_all($sql_data, MYSQLI_ASSOC);, dan hapus skrip tersebut. sehingga akan menjadi seperti ini :

    $sql_data = mysqli_query($connect, $query.$order." LIMIT ".$limit." OFFSET ".$start); // Query untuk data yang akan di tampilkan
    $sql_filter = mysqli_query($connect, $query); // Query untuk count jumlah data sesuai dengan filter pada textbox pencarian
    $sql_filter_count = mysqli_num_rows($sql_filter); // Hitung data yg ada pada query $sql_filter
    
    $callback = array(
        'draw'=>$_POST['draw'], // Ini dari datatablenya
        'recordsTotal'=>$sql_count,
        'recordsFiltered'=>$sql_filter_count,
        'data'=>$data
    );
  3. Kemudian ubah skrip diatas dengan menambahkan skrip setelah baris $sql_filter_count dan sebelum $callback seperti berikut ini :
    $sql_data = mysqli_query($connect, $query.$order." LIMIT ".$limit." OFFSET ".$start); // Query untuk data yang akan di tampilkan
    $sql_filter = mysqli_query($connect, $query); // Query untuk count jumlah data sesuai dengan filter pada textbox pencarian
    $sql_filter_count = mysqli_num_rows($sql_filter); // Hitung data yg ada pada query $sql_filter
    
    $data = array(); // Buat variabel $data dengan tipe array
    $result = mysqli_fetch_all($sql_data, MYSQLI_ASSOC); // Untuk mengambil data hasil query menjadi array
    $index = 0;
    $no = $start + 1; // Kita set Nomor Urutnya dimulai dari $start + 1
    foreach($result as $d){ // Looping hasil query dari $result
        array_push($data, $d); // Tambahkan data per baris ke array $data
    
        $data[$index]['no'] = $no; // Tambahkan data no untuk Nomor Urutnya
        $index++;
        $no++;
    }
    
    $callback = array(
        'draw'=>$_POST['draw'], // Ini dari datatablenya
        'recordsTotal'=>$sql_count,
        'recordsFiltered'=>$sql_filter_count,
        'data'=>$data
    );

Seperti yang saya jelaskan pada tutorial sebelumnya, bahwa tujuan dari file view.php ini adalah mengeluarkan output berupa json. Maka setelah kita modifikasi, json yang akan dihasilkan dari file view.php ini akan menjadi seperti berikut :

{
    "draw": "1",
    "recordsTotal": 24,
    "recordsFiltered": 24,
    "data": [
    {
        "nis": "10110470110",
        "nama": "Ade Zenudin Bimashita",
        "jenis_kelamin": "1",
        "telp": "08199288272",
        "alamat": "Tegal",
        "no": 1
    },
    {
        "nis": "10110470111",
        "nama": "Ani Lestari",
        "jenis_kelamin": "2",
        "telp": "089228827727",
        "alamat": "Jakarta",
        "no": 2
    },
    {
        "nis": "10110470112",
        "nama": "Imam Maulana",
        "jenis_kelamin": "1",
        "telp": "08561777166",
        "alamat": "Bandung",
        "no": 3
    },
    {
        "nis": "10110470113",
        "nama": "Siska Melina Rachman",
        "jenis_kelamin": "2",
        "telp": "0828817717",
        "alamat": "Bandung",
        "no": 4
    },
    {
        "nis": "10110470114",
        "nama": "Diki Somantri",
        "jenis_kelamin": "1",
        "telp": "081662662771",
        "alamat": "Padang",
        "no": 5
    }
    ]
}

Bisa kita lihat ada tambahakndata “no” ditiap baris data siswa tepat di paling bawah.

Berikut ini hasil dari tutorial ini :

View - Cara Menambahkan Nomor Urut pada JQuery Datatables dengan PHP


Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code lengkapnya, klik salah satu link dibawah ini
– Download versi MySQLi : Link download yang sesuai tutorial ini yakni menggunakan fungsi MySQLi untuk query ke databasenya
– Download versi PDO : Link download untuk Anda yang ingin source code versi PDO dari tutorial ini

Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
https://www.datatables.net/examples/server_side/
https://www.datatables.net/examples/server_side/post.html
Cara menambahkan nomor urut pada jQuery DataTables dengan php dan mysql, tutorial lengkap menambahkan nomor urut jQuery DataTables dengan php dan mysql, Tambah kolom Nomor pada Jquery Datatables, Tambah No Urut pada jquery datatables

DataTables

(Total : 984 viewers, 10 viewers today)
menambah-nomor-urut-datatables-php

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

9 Comments

  1. ikhwan fitra

    bg saya muncul error ini terus : Fatal error: Uncaught PDOException: SQLSTATE[42S22]: Column not found: 1054 Unknown column ‘0’ in ‘order clause’ in F:\xampp\htdocs\ajax\ajax_cobaterkirim.php:23 Stack trace: #0…. di order nya…

    *query nya :
    $order_index = $_POST[‘order’][0][‘column’]; prepare($query.$order.” LIMIT “.$limit.” OFFSET “.$start); ,execute();
    $data = array();
    while($r = $sql->fetch()){
    $row = array();
    $row[] = $r[‘no_surat’];
    $row[] = $r[‘nama’];
    $row[] = $r[‘hp’];
    $row[] = create_scoopy($r[‘id_surat’]);
    $data[] = $row;
    }

    *ajax nya :
    table = $(‘.table’).DataTable({
    “processing” : true,
    “responsive”: true,
    “serverSide”: true,
    “ordering”: true, // Set true agar bisa di sorting
    “order”: [[ 0, ‘asc’ ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
    “columnDefs”: [
    { responsivePriority: 1, targets: 0 },
    { responsivePriority: 1, targets: 1 }
    ],
    “ajax” : {
    “url” : “ajax/ajax_cobaterkirim.php?action=table_data”,
    “type” : “POST”
    },
    “deferRender”: true,
    “aLengthMenu”: [[25, 50, 100],[ 25, 50, 100]] // Combobox Limit
    });

    Tolong bantuannya, terima kasih banyak…

      • ikhwan fitra

        Gan sudah saya email, file yang agan minta… tolong bantuannya…. terima kasih bnk….

          • ikhwan fitra

            sorry gan… 🙂 udah saya kirim…. trims a lot….

          • ikhwan fitra

            gan udah solved, maafken karena cuma download versi PDO, lupa ubah order 0 jadi 1, kirain tinggal download dan sesuaikan dengan script saya….. 😉 trims a lot….

  2. arif amanu

    Terima kasih codingnya sangat membantu,
    saya coba tambahkan detail view di nama (jika di klik nama/nis akan muncul popup modal detail dari user) namun belum berhasil. Mohon pencerahan, terima kasih.

    • sama-sama om, senang bisa membantu 😀
      Untuk itu saya belum buat tutorialnya om, saya masukan ke daftar tutorial yang akan saya buat.

NOTE ARCHIVES