[DATATABLE] DataTables.net with DataTableQueryBuilder sample input filter (ok)

C:\xampp\htdocs\wpclidemo\index.html

<!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>

C:\xampp\htdocs\wpclidemo\package.json

{
  "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": []
}

C:\xampp\htdocs\wpclidemo\src\index.js

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();
    });
  });
});

C:\xampp\htdocs\wpclidemo\src\styles.css

body {
  font-family: sans-serif;
  margin: 2rem;
}

#filters {
  margin: 3rem 0 1.5rem 0;
}

#user-list th {
  text-align: left;
}

3KB

datatablesnet-with-datatablequerybuilder-forked.zip