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 : mail@rizaldimaulidia.com. 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


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 : 5,231 viewers, 1 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

18 Comments

  1. Muhamad Nur

    Pak kenapa ya, no nya tidak muncul notifnya “No matching records found” tapi saat di klik Thead yang
    contoh
    No
    Username

    saat saya klik thead username nya maka dia muncul dan tidak ada error “No matching records found” dan no nya juga muncul kenapa ya?

    • no matching records found itu berarti datanya ga ditemukan om, periksa query ke tabel databasenya apa sudah benar apa belum? lalu periksa juga ada ga datanya di databasenya?

      • Muhamad Nur

        Sudah benar pak querynya, dan saya ingin menanyakan gmna ya caranya agar tanggal nya itu menjadi format indonesia

        kan kalo tanpa diajax
        tgl_indo($data[‘tgl_sertifikasi’)

        nah supaya seperti tiu penempatannya gmna ya saya bingung dicodingannya, sama kalo query join gmna ya pas bagian query likenya saya no matching records found itu karena memakai query join, query mah sudah benar, karena tidak adanya ( LIKE OR bla bla bla ) sesuai artikel, maka dia jadi gak muncul, apakah ada artikel jika memakai query join + tanggalannya berubah jd format indo seperti contoh saya

      • Muhamad Nur

        "columns": [
        { "data": "no" },
        { "data": "id_peserta" },
        { "data": "nama" },
        { "data": "kode_program" },
        { "data": "angkatan" },
        { "data": "tgl_sertifikasi" },
        { "data": "jatuh_tempo" },
        { "render": function ( data, type, row ) {
        var html = ""
        if(row.selisih &lt;= 0){
        html = &quot;Mohon Diperpanjang"
        }else{
        html = +row.selisih+ "&nbsp;Hari Lagi"
        }
        return html;
        }
        },
        { "render": function ( data, type, row ) { // Tampilkan kolom aksi

        var html = "<a href='ubahStatusPDU-" + row.id_peserta + "' rel="nofollow"><i></i></a>&nbsp;&nbsp;"
        html += "<a href='detailSertifikasi-" + row.id_peserta + "' rel="nofollow"><i></i></a>&nbsp;&nbsp;"
        html += "<a href='uploadDokumen-" + row.id_peserta + "' rel="nofollow"><i></i></a>&nbsp;&nbsp;"
        html += "<a href='inputPDU-" + row.id_peserta + "' rel="nofollow"><i></i></a>"
        return html
        }
        },
        ],

        supaya make format tgl_indo

        contoh :
        tgl_indo($data['tgl_sertifikasi'])
        tgl_indo($data['jatuh_tempo'])

        • tgl_indo ini maksudnya format dd-mm-yyyy?
          kalau iya ga perlu di javascriptnya, cukup om ubah di query sql nya. contoh :
          “SELECT id, DATE_FORMAT(tanggal, ‘%d-%m-%Y’) AS tanggal FROM namatabel”

          • Muhamad Nur

            Iya betul pak date nya jadi indonesia gitu ada bulan nya format indonesia, kalo query join nya gmna ya pak saya gak paham soalnya kalo lgsg tanpa query like gitu

            Dia gak bsa search + gak asc / desc gak rapih jadinya

          • Muhamad Nur

            Ini query saya pak, gmna ya saya bingung date formatnya nempatinnya gmna soalnya udh ada date_add sama ini kan join, jadi gak ada yang query like bla bla bla

            Errrornya jadi gk bsa search sama asc / desc

            SELECT *, DATE_ADD(tgl_sertifikasi, INTERVAL 730 DAY) as jatuh_tempo, DATEDIFF(DATE_ADD(tgl_sertifikasi, INTERVAL 730 DAY), CURDATE()) as selisih FROM tb_sertifikasi, tb_peserta where tb_sertifikasi.id_peserta=tb_peserta.id_peserta

          • Muhamad Nur

            Sudah bsa pak penempatan query date format, nah yg jadi masalah query like search nya gmna ya pak penempatannya bisa dibantu? Ini soalnya tinggal ini saya

            SELECT *, DATE_FORMAT(tgl_sertifikasi, ‘%d %M %Y’) as sertifikasi, DATE_FORMAT(DATE_ADD(tgl_sertifikasi, INTERVAL 730 DAY), ‘%d %M %Y’) as jatuh_tempo, DATEDIFF(DATE_ADD(tgl_sertifikasi, INTERVAL 730 DAY), CURDATE()) as selisih FROM tb_sertifikasi, tb_peserta where tb_sertifikasi.id_peserta=tb_peserta.id_peserta

      • Muhamad Nur

        Tidak jadi pak sudah solved semua saya udh bsa

  2. 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….

  3. 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