Categories: Development

DataTables example with Ajax

How to use DataTables with Ajax calls to fetch and fill the table with data. There are multiple ways to source the data for your table, Ajax being one of the more versatile methods.

Previous post for DataTables with PHP and MySQL.

View the CodePen example here.

The DataTable script:

$(document).ready(function () {
  
  table = $("#animalsTable").DataTable({
    pageLength: 20,
    order: [],
    paging: true,
    searching: true,
    info: true,
    ajax: {
      url: "https://peachpuff.srv3r.com/api/index.php",
      method: "GET",
      data: {
        data_table: ""
      },
      dataSrc: ""
    },
    columns: [//Define colummns
      { data: "id" },
      { data: "guid" },
      { data: "name" },
      { data: "status" }
    ]
  });
  
});

On page load (ready) this will build the table by doing a GET request to the “API” which returns all the animal data for the table with 20 items each page as default.

Using dataSrc: "" means that the data is in a clean, non-nested array eg:

[
{"id":"1","guid":"ABC"},
{"id":"2","guid":"DEF"}
]

Rather than:

{
  "data": {
    "date": "2020-01-01 23:59:59",
    "value": "XYZ",
    "animals": [
      {
        "id": "1",
        "guid": "ABC"
      },
      {
        "id": "2",
        "guid": "DEF"
      }
    ]
  }
}

The HTML structure, including the table header row:

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card p-2">
        <h3 align="center">Animals</h3>
        <div class="table-responsive">
          <table id="animalsTable" class="table table-striped table-bordered">
            <thead>
              <tr>
                <td>Id</td>
                <td>GUID</td>
                <td>Name</td>
                <td>Status</td>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

You will need jQuery, DataTables plus Bootstrap for the styling:

<head>
    <title>datatables Ajax example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css"/>
</head>

Next Draggable Bootstrap grid with order saving »

Previous « Live toggle button status update with AJAX

Tags: AjaxDataTablesHow toWeb Dev

5 years ago

FTP getting array of file details such as size using PHP
Using FTP and PHP to get an array of file details such as size and…
Creating Laravel form requests
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views
Improving the default Laravel login and register views in such a simple manner but making…