JavaScript Çorbası: Aralık 2021

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

Giriş

Twitter tarafından geliştirildi. İlk olarak 2011 yılında ortaya çıktı

fluid 12-grid system

Açıklaması şöyle

The Bootstrap grid system uses containers, rows, and columns to ensure that apps and websites are adaptable to devices of varied screen sizes, especially mobile screens. This 12-grid system follows a series of defined rules; for instance, rows are only used to create columns; rows must be empty; rows and columns come together to create containers, etc.

Örnek - bootstrap-3.3.1

Şu satırı dahil ederiz

<link href="resources/lib/bootstrap-3.3.1/css/bootstrap.min.css"
	rel="stylesheet">
...
<script src="resources/lib/bootstrap-3.3.1/js/bootstrap.min.js"
	type="text/javascript"></script>

Tables

Örnek - striped

Şöyle yaparız

"<table class='table table-striped'>

JavaScript Çorbası

15 Aralık 2021 Çarşamba

DataTables

14 Aralık 2021 Salı

Boostrap