[โค้ด] แนะนำใช้ปลั๊กอิน DataTables เป็นไฟล์ CSV, Excel, PDF HTML & JS

by boychawin

May 5, 2021 3,086

[โค้ด] แนะนำใช้ปลั๊กอิน DataTables เป็นไฟล์ CSV, Excel, PDF HTML & JS

สำหรับใครที่ยังใช้ แบบเดิมๆอยู่ ผมขอแนะนำนี่เลย ปลั๊กอิน DataTables มาช่วยทำให้งานเราดูดี และช่วยให้ประหยัดเวลาอีกด้วย ไม่ต้องไปนั่งหาอะไรมาติดตั้งเยอะเยะ ที่สำคัญตัวนี้ติดตั้งง่ายมาก Copy โค้ดด้านล่างไปใช้งานกันได้เลย ฮ่าๆ

มาดูกันว่าทำอะไรได้บ้าง

1. เรียงลำดับได้

2. เลือกจำนวนข้อมูลที่จะให้แสดงได้

3. มีการแบ่งหน้าให้ด้วย

4. Export to CSV, Excel, PDF Print และ Copy ข้อมูลได้

5. มีช่องค้นหาได้ด้วยนะ

และยังไม่หมดนะ ไปแกะกันได้ที่เว็บไซต์

https://datatables.net/extensions/buttons/examples/styling/bootstrap4.html

ยังมีอีกแบบที่อยากจะแนะนำ กดติดตามได้ที่เพจครับ

รายละเอียดเครื่องมือ

- jQuery Javascript library

- HTML5

- CSS Framework Bootstrap 4

GitHub

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DataTables Export csv, print, excel, pdf | boychawin.com </title>
  <!-- boychawin.com -->
  <!-- <link
      href="https://boychawin.com/_next/static/css/d14dc5e59bd60eaeb5ad.css"
      rel="stylesheet"
    /> -->
  <!-- DataTables -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.bootstrap4.min.css" />
</head>

<body background="https://boychawin.com/B_images/logoboychawins.com.png">
  <div class="container mt-5 ">
    <table id="example" class="table table-striped" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Website</th>
        </tr>
      </thead>

      <tr>
        <th>1</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>2</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>3</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>4</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>5</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>6</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>7</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>8</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>9</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>10</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>11</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>12</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>13</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>14</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>15</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>16</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>17</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>18</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>19</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>20</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
    </table>
  </div>

  <!-- DataTables  -->
  <script src=" https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.bootstrap4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.colVis.min.js"></script>

  <script>
    $(document).ready(function () {
      $("#example")
        .DataTable({
          responsive: true,
          buttons: ["copy", "csv", "print", "excel", "pdf"],
          lengthMenu: [
            [5, 10, 25, 50, 100, -1],
            [5, 10, 25, 50, 100, "All"],
          ],
          dom:
            "<'row'<'col-md'l><'col-md'B><'col-md'f>>" +
            "<'row'<'col-md-12'tr>>" +
            "<'row'<'col-md'i><'col-md'p>>",
          processing: true,
          order: [[0, "desc"]],
        })
        .buttons()
        .container()
        .appendTo("#dataTableLine_wrapper .col-md-6:eq(0)");
    });
  </script>
</body>

</html>

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DataTables Export csv, print, excel, pdf | boychawin.com </title>
  <!-- boychawin.com -->
  <!-- <link
      href="https://boychawin.com/_next/static/css/d14dc5e59bd60eaeb5ad.css"
      rel="stylesheet"
    /> -->
  <!-- DataTables -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.bootstrap4.min.css" />
</head>

<body background="https://boychawin.com/B_images/logoboychawins.com.png">
  <div class="container mt-5 ">
    <table id="example" class="table table-striped" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Website</th>
        </tr>
      </thead>

      <tr>
        <th>1</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>2</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>3</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>4</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>5</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>6</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>7</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>8</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>9</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>10</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>11</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>12</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>13</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>14</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>15</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>16</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>17</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>18</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
      <tr>
        <th>19</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>

      <tr>
        <th>20</th>
        <td>boy</td>
        <td>chawin</td>
        <td>boychawin.com</td>
      </tr>
    </table>
  </div>

  <!-- DataTables  -->
  <script src=" https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.bootstrap4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.colVis.min.js"></script>

  <script>
    $(document).ready(function () {
      $("#example")
        .DataTable({
          responsive: true,
          buttons: ["copy", "csv", "print", "excel", "pdf"],
          lengthMenu: [
            [5, 10, 25, 50, 100, -1],
            [5, 10, 25, 50, 100, "All"],
          ],
          dom:
            "<'row'<'col-md'l><'col-md'B><'col-md'f>>" +
            "<'row'<'col-md-12'tr>>" +
            "<'row'<'col-md'i><'col-md'p>>",
          processing: true,
          order: [[0, "desc"]],
        })
        .buttons()
        .container()
        .appendTo("#dataTableLine_wrapper .col-md-6:eq(0)");
    });
  </script>
</body>

</html>