Cara menggunakan datatable ( client side )

Datatable

merupakan plugin jquery untuk membuat table mempunyai fitur seperti pencarian data, sorting data, pagination dan semacamnya. datatable client side melakukan pemrosesan data hanya pada sisi client saja atau pada sisi browser, artinya semua data harus ditampilkan semua. dalam menggunakan datatable client side tidak direkomendasikan untuk jumlah row yang banyak atau row jang jumlahnya ribuan. Untuk penggunaan dengan jumlah row yang banyak admin sarankan menggunakan datatable server side karena pemrosesan data juga dilakukan di dalam backend sehingga kita tidak langsung menampilkan data sekaligus melainkan diberi batas limit dari server sebelum ditampilkan ke client.

Cara install
Pada artikel ini admin akan memakai cdn dari datatable tanpa mendownload librarynya. Untuk anda coba silahkan untuk mendownload librarynya di https://datatables.net/.
Pertama kita buat dulu struktur htmlnya dan menginisialisasi librarynya

<!DOCTYPE html>
<html>
<head>
  <title>coba datatable</title>
  <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
</head>
<body>

</body>
</html>

Struktur tablenya

<table id="myTable">
<thead>
  <tr>
  <td>No</td>
  <td>Abjad</td>
  </tr>
  </thead>
  <tbody>
  <!-- data ditempatkan disini -->
  </tbody>
</table>

tanpa tbody dan thead datatable tidak akan jalan, contohnya seperti ini yang error:

<table id="myTable">
  <tr>
  <td>No</td>
  <td>Abjad</td>
  </tr>
  <!-- data ditempatkan disini -->
</table>

Ohh iya disini admin akan membuat daftar abjad dari a sampai z
Berikut datanya:

<tr><td>1</td><td>A</td></tr>
<tr><td>2</td><td>B</td></tr>
<tr><td>3</td><td>C</td></tr>
<tr><td>4</td><td>D</td></tr>
<tr><td>5</td><td>E</td></tr>
<tr><td>6</td><td>F</td></tr>
<tr><td>7</td><td>G</td></tr>
<tr><td>8</td><td>H</td></tr>
<tr><td>9</td><td>I</td></tr>
<tr><td>10</td><td>J</td></tr>
<tr><td>11</td><td>K</td></tr>
<tr><td>12</td><td>L</td></tr>
<tr><td>13</td><td>M</td></tr>
<tr><td>14</td><td>N</td></tr>
<tr><td>15</td><td>O</td></tr>
<tr><td>16</td><td>P</td></tr>
<tr><td>17</td><td>Q</td></tr>
<tr><td>18</td><td>R</td></tr>
<tr><td>19</td><td>S</td></tr>
<tr><td>20</td><td>T</td></tr>
<tr><td>21</td><td>U</td></tr>
<tr><td>22</td><td>V</td></tr>
<tr><td>23</td><td>W</td></tr>
<tr><td>24</td><td>X</td></tr>
<tr><td>25</td><td>Y</td></tr>

<tr>itu table row artinya baris, sedangkan <td> adalah table data

Oke kita coba gabungkan semuanya ya dengan sedikit sentuhan 😀

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
</head>
<body>
  <center>
  <div style="width: 880px">
  <table id="myTable">
    <thead><tr><td>No</td><td>Abjad</td></tr></thead>
    <tbody>
      <tr><td>1</td><td>A</td></tr>
      <tr><td>2</td><td>B</td></tr>
      <tr><td>3</td><td>C</td></tr>
      <tr><td>4</td><td>D</td></tr>
      <tr><td>5</td><td>E</td></tr>
      <tr><td>6</td><td>F</td></tr>
      <tr><td>7</td><td>G</td></tr>
      <tr><td>8</td><td>H</td></tr>
      <tr><td>9</td><td>I</td></tr>
      <tr><td>10</td><td>J</td></tr>
      <tr><td>11</td><td>K</td></tr>
      <tr><td>12</td><td>L</td></tr>
      <tr><td>13</td><td>M</td></tr>
      <tr><td>14</td><td>N</td></tr>
      <tr><td>15</td><td>O</td></tr>
      <tr><td>16</td><td>P</td></tr>
      <tr><td>17</td><td>Q</td></tr>
      <tr><td>18</td><td>R</td></tr>
      <tr><td>19</td><td>S</td></tr>
      <tr><td>20</td><td>T</td></tr>
      <tr><td>21</td><td>U</td></tr>
      <tr><td>22</td><td>V</td></tr>
      <tr><td>23</td><td>W</td></tr>
      <tr><td>24</td><td>X</td></tr>
      <tr><td>25</td><td>Y</td></tr>
    </tbody>
  </table>
  </div>
  </center>
<script type="text/javascript">
  $(document).ready( function () {
      $('#myTable').DataTable();
  } );
</script>
</body>
</html>

Pada bagian .DataTable(); adalah untuk mengaktifkan datatablenya.
Sehingga jika benar dijalankan tampilannya akan seperti berikut:

Related posts

Leave a Comment