import "./styles.css";
import $ from "jquery";
import dt from "datatables";
import "datatables/media/css/jquery.dataTables.css";
dt(window, $);
const apiUrl =
"https://query-builder-sample-api.entrypointdev.com/API/UserList.DataTables";
$(document).ready(function () {
let dt = $("#user-list").DataTable({
processing: true,
serverSide: true,
ajax: {
url: apiUrl,
type: "POST"
},
columns: [
{ name: "id", data: "id" },
{ name: "fullName", data: "fullName" },
{ name: "email", data: "email" },
{ name: "companyName", data: "companyName" },
{ name: "posts", data: "posts" },
{ name: "createDate", data: "createDate" }
]
});
$("#filters input").each(function () {
let columnName = $(this).data("column");
$(this).on("change", function () {
let col = dt.column(columnName + ":name");
if (col.search() !== this.value) col.search(this.value).draw();
});
});
});
body {
font-family: sans-serif;
margin: 2rem;
}
#filters {
margin: 3rem 0 1.5rem 0;
}
#user-list th {
text-align: left;
}
{
"name": "datatablesnet-with-datatablequerybuilder",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"dependencies": {
"datatables": "1.10.18",
"jquery": "3.6.0",
"parcel-bundler": "^1.6.1"
},
"devDependencies": {
"@babel/core": "7.2.0"
},
"resolutions": {
"@babel/preset-env": "7.13.8"
},
"keywords": []
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>DataTables.net with DataTableQueryBuilder sample</h1>
<div id="filters">
<input type="text" data-column="id" placeholder="Id" />
<input type="text" data-column="fullName" placeholder="Full Name" />
<input type="text" data-column="email" placeholder="Email" />
<input type="text" data-column="posts" placeholder="Posts" />
<input type="text" data-column="createDate" placeholder="MM/DD/YYYY" />
</div>
<table id="user-list" class="display" style="width: 100%;">
<thead>
<tr>
<th>Id</th>
<th>Full name</th>
<th>Email</th>
<th>Company</th>
<th>Posts</th>
<th>Create Date</th>
</tr>
</thead>
</table>
<script src="src/index.js"></script>
</body>
</html>
