Posted at

【DataTables】DataTables with UIKit


はじめに

UIKitでDataTablesが使えるのか調べたのでメモ

 


参考にしたもの

https://datatables.net/examples/styling/uikit.html

※ 2019年2月3日時点では、DataTableとUIKitの統合はまだ開発中とのことです。

 


HTML

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org" lang="en" class="ui-height-1-1">

<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<title>お試し(DataTables with Uikit)</title>

<link rel="stylesheet" href="../css/uikit.min.css" />
<link rel="stylesheet" href="../css/dataTables.uikit.min.css" />

<script type="text/javascript" src="../javascript/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../javascript/uikit.min.js"></script>
<script type="text/javascript" src="../javascript/uikit-icons.min.js"></script>
<script type="text/javascript" src="../javascript/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../javascript/dataTables.uikit.min.js"></script>

<script>
$(document).ready(function () {
$('#example').dataTable({
lengthChange: false,
searching: false,
ordering: false,
info: false,
paging: false,
scrollX: true,
scrollY: 500
});
});
</script>
</head>

<body class="ui-height-1-1">
<table id="example" class="uk-table uk-table-hover uk-table-striped" style="width:100%">
<thead>
<tr>
//以下省略


注意点

    <script type="text/javascript" src="../javascript/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="../javascript/dataTables.uikit.min.js"></script>

この読み込みの順番が大事なようで、これが逆になったりすると

Uncaught TypeError: Cannot read property 'defaults' of undefined

が発生します。

以上