JavaScript Çorbası: DataTables

Giriş

Şu satırı dahil ederiz

<!-- DataTables.net -->
<script
  src="resources/lib/dataTables-1.10.4/js/jquery.dataTables.min.js"
  type="text/javascript"></script>
<script src="resources/lib/dataTables-1.10.4/js/dataTables.bootstrap.js"
  type="text/javascript"></script>
	
<!-- TableTools - DataTables extension -->
<script
  src="resources/lib/dataTables-1.10.4/extensions/TableTools-2.2.3/js/dataTables.tableTools.min.js"
  type="text/javascript"></script>

Css için bir örnek burada

columns Alanı

Örnek

Şöyle yaparız

$('#weatherTable').DataTable({
  data: JSON.parse(res),
  columns: [
    { data: 'cityId' },
    { data: 'cityName' },
    { data: 'temp' },
    { data: 'tempMin' },
    { data: 'tempMax' },
    { data: 'pressure' },
    { data: 'humidity' }
  ],
  "pageLength": 5
});

ajaxSource Alanı

Örnek

index.hml şöyle olsun

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8" />
  <title>...</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="/js/datatable.js"></script>
</head>

<body>
  <h1>Employees Table</h1>
  <table id="employeesTable" class="display">
    <!-- Header Table -->
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Active</th>
      </tr>
    </thead>
    <!-- Footer Table -->
    <tfoot>
      <tr>
        <th>Id</th>
	<th>Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Active</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

database.js şöyle olsun. Verinin alanları ve sütunlar eşleştirilir

$(document).ready( function () {
  var table = $('#employeesTable').DataTable({
    "sAjaxSource": "/employees",
    "sAjaxDataProp": "",
    "order": [[ 0, "asc" ]],
    "aoColumns": [
      { "mData": "id"},
      { "mData": "name" },
      { "mData": "lastName" },
      { "mData": "email" },
      { "mData": "phone" },
      { "mData": "active" }
    ]
  })
});

Şeklen şöyledir. "Show x entries" ve sayfalama otomatik eklenir. Ayrıca tüm veriyi çektiğim için sayfalamayı da DataTables kendisi yapar

JavaScript Çorbası

15 Aralık 2021 Çarşamba

DataTables

Hiç yorum yok:

Yorum Gönder