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.

Tips and Trick

Cara Mudah Menambahkan Nomor Urut pada JQuery Datatables

img-responsive

Mungkin Anda sudah pernah melihat tutorial saya mengenai Cara Menambahkan Nomor Urut pada JQuery Datatables dengan PHP . Untuk tutorial kali ini, saya telah menemukan cara lebih efektif dari tutorial tersebut. Kelebihan jika Anda menggunakan cara pada tutorial iniadalah tidak dibatas untuk PHP saja, atau untuk Codeigniter saja, atau Yii saja. Ini bisa Anda implementasi disemua framework php. Simak langkah-langkah dan penjelasan cara membuatnya berikut ini.

Dalam tutorial ini, saya asumsikan kita punya sebuah tabel untuk menampilkan data siswa dengan jquery datatables dengan tampilan dan skrip berikut ini :

Cara Menambahkan Nomor Urut pada JQuery Datatables

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Jquery Datatable</title>

    <!-- Load Datatable & Bootsrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="datatables/lib/css/dataTables.bootstrap.min.css"/>
  </head>
  <body>
    <div class="container">
      <div class="table-responsive">
        <table class="table table-bordered" id="table-siswa">
          <thead>
            <tr>
              <th>NIS</th>
              <th>Nama</th>
              <th>Jenis Kelamin</th>
              <th>Telepon</th>
              <th>Alamat</th>
              <th>Aksi</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>

    <!-- Load Jquery & Datatable JS -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="datatables/datatables.min.js"></script>
    <script type="text/javascript" src="datatables/lib/js/dataTables.bootstrap.min.js"></script>
    <script>
    var tabel = null;

    $(document).ready(function() {
        tabel = $('#table-siswa').DataTable({
            "processing": true,
            "serverSide": true,
            "ordering": true, // Set true agar bisa di sorting
            "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
            "ajax":
            {
                "url": "http://localhost/mynotescode/datatables_php_pdo/view.php", // URL file untuk proses select datanya
                "type": "POST"
            },
            "deferRender": true,
            "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
            "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
                    }
                },
            ],
        });
    });
    </script>
  </body>
</html>

Terlihat dari tampilan hasil datatable diatas, belum ada kolom nomor urut. Sekarang kita coba modifikasi skrip diatas agar bisa muncul nomor urutnya. Ikuti langkah-langkahnya berikut 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. Pada skrip diatas, 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 SORTING
Pada tahap ini, kita akan modifikasi konfigurasi parameter order dari datatablenya. karena dalam skrip yang saya gunakan, saya set kolom default untuk sorting nya adalah kolom pertama (index 0). Kenapa harus diubah? karena nanti di step 3, kolom pertama akan kita ganti dengan kolom nomor urut, sehingga kita perlu ubah kolom default sortingnya ke kolom kedua (index 1). ini sebenarnya bebas gimana Anda sendiri mau menentukan kolom default sortingnya yang mana. Berikut ini caranya :

Cari skrip berikut ini :
“order”: [[ 0, ‘asc’ ]],

ubah angka 0 nya jadi angka 1 :
“order”: [[ 1, ‘asc’ ]],


STEP 3 – NOMOR URUT
Langkah ini adalah langkah utama dari menambahkan nomor urut pada jquery datatable. Silahkan tambahkan skrip berikut ini pada skrip datatable di parameter columns.

{
    “data”: null,
    “class”: “align-top”,
    “orderable”: false,
    “searchable”: false,
    “render”: function (data, type, row, meta) {
        return meta.row+meta.settings._iDisplayStart+1;
    }
},

Cari skrip berikut ini :

tabel = $('#table-siswa').DataTable({
    "processing": true,
    "serverSide": true,
    "ordering": true, // Set true agar bisa di sorting
    "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
    "ajax":
    {
        "url": "http://localhost/mynotescode/datatables_php_pdo/view.php", // URL file untuk proses select datanya
        "type": "POST"
    },
    "deferRender": true,
    "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
    "columns": [
        { "data": "nis" }, // Tampilkan nis
        { "data": "nama" },  // Tampilkan nama

Ubah jadi seperti ini :

tabel = $('#table-siswa').DataTable({
    "processing": true,
    "serverSide": true,
    "ordering": true, // Set true agar bisa di sorting
    "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
    "ajax":
    {
        "url": "http://localhost/mynotescode/datatables_php_pdo/view.php", // URL file untuk proses select datanya
        "type": "POST"
    },
    "deferRender": true,
    "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
    "columns": [
        {  
            "data": null,
            "class": "align-top",
            "orderable": false,
            "searchable": false,
            "render": function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }  
        },
        { "data": "nis" }, // Tampilkan nis
        { "data": "nama" },  // Tampilkan nama

Terlihat perbedaannya skrip diatas jadi ada tambahan antara skrip “columns”: [ dengan { “data”: “nis” },. Yap hanya itu yang perlu ditambahkan untuk menambahkan nomor urut pada jquery datatable. cukup simpel kan 😀


Berikut ini tampilan dan skrip lengkap setelah dimodifikasi :

Nomor Urut - Cara Menambahkan Nomor Urut pada JQuery Datatables

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Implementasi Jquery Datatable dengan PHP</title>

  <!-- Load Datatable & Bootsrap CSS -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="datatables/lib/css/dataTables.bootstrap.min.css" />
</head>

<body>
  <div class="container">
    <div style="background: whitesmoke;padding: 10px;">
      <h1 style="margin-top: 0;">Implementasi Jquery Datatable dengan PHP</h1>
    </div>

    <div class="table-responsive">
      <table class="table table-bordered" id="table-siswa">
        <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>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <!-- Load Jquery & Datatable JS -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="datatables/datatables.min.js"></script>
  <script type="text/javascript" src="datatables/lib/js/dataTables.bootstrap.min.js"></script>
  <script>
    var tabel = null;

    $(document).ready(function() {
      tabel = $('#table-siswa').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": true, // Set true agar bisa di sorting
        "order": [[ 1, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
        "ajax": {
          "url": "http://localhost/mynotescode/datatables_php_pdo/view.php", // URL file untuk proses select datanya
          "type": "POST"
        },
        "deferRender": true,
        "aLengthMenu": [[5, 10, 50], [5, 10, 50]], // Combobox Limit
        "columns": [
          {
            "data": null,
            "class": "align-top",
            "orderable": false,
            "searchable": false,
            "render": function(data, type, row, meta) {
              return meta.row + meta.settings._iDisplayStart + 1;
            }
          },
          { "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
            }
          },
        ],
      });
    });
  </script>
</body>
</html>

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 ^_^

Cara menambahkan nomor urut pada jQuery DataTables, tutorial lengkap menambahkan nomor urut jQuery DataTables, Tambah kolom Nomor pada Jquery Datatables, Tambah No Urut pada jquery datatables

DataTables

(Total : 14 viewers, 1 viewers today)
nomor-urut-datatables

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

NOTE ARCHIVES