Integrasi bootstrap pada jquery datatable

Integrasi bootstrap pada jquery datatable

Haloo selamat malam. kali ini admin akan membuat artikel tentang Integrasi bootsrap pada jquery datatable. Sebelumnya admin pernah membuat artikel tentang cara menggunakan datatable (client side), hanya saja pada artikel tersebut kita memakai template bawaan dan memakai library dari luar (cdn). nah pada kesempatan kali ini kita akan memasang framework bootstrap pada datatable. dengan cara mendownload librarynya.

Berikut caranya:
1. masuk ke website datatable https://datatables.net/download/
2. pada bagian “Step 1. Choose a styling framework” pilih bootsrap 4
3. Scroll kebawah sampai “Step 3. Pick a download method”, klik tab download
4. Selesai didownload extrak ke folder project

5. Download framework bootsrap disini   lalu ekstrak ke folder project

6. Jangan lupa untuk add class pada table seperti: class=”table table-striped table-bordered”
7. Pasang library ke html

Contohnya seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <!-- masukan jquery karena datatable adalah plugin jquery -->
  <script src="jquery.min.js"></script>
  <!-- masukan plugin datatable -->
  <script src="DataTables-1.10.20/js/jquery.dataTables.min.js"></script>
  <!-- masukan plugin js bootsrap 4 karena tadi kita memilih bootsrap 4 -->
  <script src="datatables.min.js"></script>
  <!-- masukan plugin css bootsrap 4 karena tadi kita memilih bootsrap 4 -->
  <link rel="stylesheet" type="text/css" href="datatables.min.css" />
  <!-- masukan framework css bootsrap 4 -->
  <link rel="stylesheet" type="text/css" href="bootstrap-4.3.1-dist/css/bootstrap.min.css" />
</head>
<body>
  <!-- !-->
  <div style="width: 880px; margin: 0 auto;">
    <table id="myTable" class="table table-striped table-bordered">
      <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>
<script type="text/javascript">
  $(document).ready( function () {
    //aktifkan datatable
      $('#myTable').DataTable();
  } );
</script>
</body>
</html>

Jika berhasil tampilannya akan berubah seperti:

Related posts

Leave a Comment