title: Populate a DataTable with MySQL Database
body: <p>I’m trying to build a CRUD application. I have a MySQL database of a large amount of records and would like to use a JQuery DataTable rather than trying to code out a table from scratch. The problem I have, is that I can see the table on my site, but I cannot get it to pull in the data from MySQL.</p>
  
  <p>I’ve tried reading many site and forums including the official documentation on DataTable’s website, but none of it makes sense to me.</p>
  
  <p>What do I need to do to fix this? I’ve been working on this project for a solid week and am getting frustrated.</p>
  
  <pre><code>&lt;?php
  
  /*
   * DataTables example server-side processing script.
   *
   * Please note that this script is intentionally extremely simple to show how
   * server-side processing can be implemented, and probably shouldn't be used as
   * the basis for a large complex system. It is suitable for simple use cases as
   * for learning.
   *
   * See http://datatables.net/usage/server-side for full details on the server-
   * side processing requirements of DataTables.
   *
   * @license MIT - http://datatables.net/license_mit
   */
  
  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
   * Easy set variables
   */
  
  // DB table to use
  $table = 'members';
  
  // Table's primary key
  $primaryKey = 'id';
  
  // Array of database columns which should be read and sent back to DataTables.
  // The `db` parameter represents the column name in the database, while the `dt`
  // parameter represents the DataTables column identifier. In this case simple
  // indexes
  $columns = array(
      array( 'db' =&gt; 'id', 'dt' =&gt; 0 ),
      array( 'db' =&gt; 'name',  'dt' =&gt; 1 ),
      array( 'db' =&gt; 'residential_address', 'dt' =&gt; 2 ),
      array( 'db' =&gt; 'mailing_address', 'dt' =&gt; 3 ),
      array( 'db' =&gt; 'precinct', 'dt' =&gt; 4)
      array( 'db' =&gt; 'age', 'dt' =&gt; 5 ),
      array( 'db' =&gt; 'ethnicity',  'dt' =&gt; 6 ),
      array( 'db' =&gt; 'gender', 'dt' =&gt; 7 ),
      array( 'db' =&gt; 'party', 'dt' =&gt; 8 ),
      array( 'db' =&gt; 'race', 'dt' =&gt; 9 ),
      array( 'db' =&gt; 'phone', 'dt' =&gt; 10 )        
  );
  
  // SQL server connection information
  $sql_details = array(
      'user' =&gt; 'root',
      'pass' =&gt; '',
      'db'   =&gt; 'ccrp_db',
      'host' =&gt; 'localhost'
  );
  
  
  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
   * If you just want to use the basic configuration for DataTables with PHP
   * server-side, there is no need to edit below this line.
   */
  
  require( 'ssp.class.php' );
  
  echo json_encode(
      SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
  );
  ?&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/RxF96.png" alt="1]"></p>
  
  <p>Below is also my HTML code for reference:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="author" content=""&gt;
  
    &lt;title&gt;Cabarrus County Republican Party | Member Database&lt;/title&gt;
  
    &lt;!-- Custom fonts for this template --&gt;
    &lt;link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"&gt;
  
    &lt;!-- Custom styles for this template --&gt;
    &lt;link href="css/sb-admin-2.min.css" rel="stylesheet"&gt;
  
    &lt;!-- Custom styles for this page --&gt;
    &lt;link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  
  &lt;body id="page-top"&gt;
  
    &lt;!-- Page Wrapper --&gt;
    &lt;div id="wrapper"&gt;
  
      &lt;!-- Sidebar --&gt;
      &lt;ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"&gt;
  
        &lt;!-- Sidebar - Brand --&gt;
        &lt;a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html"&gt;
          &lt;!--&lt;div class="sidebar-brand-icon rotate-n-15"&gt;
            &lt;i class="fas fa-laugh-wink"&gt;&lt;/i&gt;
          &lt;/div&gt; --&gt;
          &lt;div class="sidebar-brand-text mx-3"&gt;&lt;img src="img/republican_logo.png" width = "50" height="50"&gt;&amp;nbsp;&amp;nbsp;CCRP&lt;/div&gt;
        &lt;/a&gt;
  
        &lt;!-- Divider --&gt;
        &lt;hr class="sidebar-divider my-0"&gt;
  
        &lt;!-- Nav Item - Dashboard --&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="index.html"&gt;
            &lt;i class="fas fa-fw fa-table"&gt;&lt;/i&gt;
            &lt;span&gt;Database&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
  
        &lt;!-- Divider --&gt;
        &lt;hr class="sidebar-divider"&gt;
  
        &lt;!-- Heading --&gt;
        &lt;div class="sidebar-heading"&gt;
          User Interface
        &lt;/div&gt;
  
        &lt;!-- Nav Item - Pages Collapse Menu --&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages"&gt;
            &lt;i class="fas fa-fw fa-tachometer-alt"&gt;&lt;/i&gt;
            &lt;span&gt;Menu&lt;/span&gt;
          &lt;/a&gt;
          &lt;div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar"&gt;
            &lt;div class="bg-white py-2 collapse-inner rounded"&gt;
              &lt;h6 class="collapse-header"&gt;Update Database&lt;/h6&gt;
              &lt;a class="collapse-item" href="create.html"&gt;Add New Members&lt;/a&gt;
              &lt;a class="collapse-item" href="#"&gt;Email &lt;small&gt;(beta)&lt;/small&gt;&lt;/a&gt;
              &lt;a class="collapse-item" href="#"&gt;Mass Email &lt;small&gt;(beta)&lt;/small&gt;&lt;/a&gt;          
              &lt;h6 class="collapse-header"&gt;User Account&lt;/h6&gt;
              &lt;a class="collapse-item" href="login.html"&gt;Login&lt;/a&gt;
              &lt;a class="collapse-item" href="register.html"&gt;Register&lt;/a&gt;
              &lt;a class="collapse-item" href="forgot-password.html"&gt;Forgot Password&lt;/a&gt;
              &lt;div class="collapse-divider"&gt;&lt;/div&gt;
              &lt;!-- &lt;a class="collapse-item" href="blank.html"&gt;Blank Page&lt;/a&gt; --&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  
        &lt;!-- Divider --&gt;
        &lt;hr class="sidebar-divider d-none d-md-block"&gt;
  
        &lt;!-- Sidebar Toggler (Sidebar) --&gt;
        &lt;div class="text-center d-none d-md-inline"&gt;
          &lt;button class="rounded-circle border-0" id="sidebarToggle"&gt;&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/ul&gt;
      &lt;!-- End of Sidebar --&gt;
  
      &lt;!-- Content Wrapper --&gt;
      &lt;div id="content-wrapper" class="d-flex flex-column"&gt;
  
        &lt;!-- Main Content --&gt;
        &lt;div id="content"&gt;
  
          &lt;!-- Topbar --&gt;
          &lt;nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"&gt;
  
            &lt;!-- Sidebar Toggle (Topbar) --&gt;
            &lt;button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3"&gt;
              &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
            &lt;/button&gt;
  
            &lt;!-- Topbar Search --&gt;
            &lt;form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search"&gt;
              &lt;div class="input-group"&gt;
                &lt;input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2"&gt;
                &lt;div class="input-group-append"&gt;
                  &lt;button class="btn btn-primary" type="button"&gt;
                    &lt;i class="fas fa-search fa-sm"&gt;&lt;/i&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
  
            &lt;!-- Topbar Navbar --&gt;
            &lt;ul class="navbar-nav ml-auto"&gt;
  
              &lt;!-- Nav Item - Search Dropdown (Visible Only XS) --&gt;
              &lt;li class="nav-item dropdown no-arrow d-sm-none"&gt;
                &lt;a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;i class="fas fa-search fa-fw"&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;!-- Dropdown - Messages --&gt;
                &lt;div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown"&gt;
                  &lt;form class="form-inline mr-auto w-100 navbar-search"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2"&gt;
                      &lt;div class="input-group-append"&gt;
                        &lt;button class="btn btn-primary" type="button"&gt;
                          &lt;i class="fas fa-search fa-sm"&gt;&lt;/i&gt;
                        &lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;!-- &lt;div class="topbar-divider d-none d-sm-block"&gt;&lt;/div&gt; --&gt;
  
              &lt;!-- Nav Item - User Information --&gt;
              &lt;li class="nav-item dropdown no-arrow"&gt;
                &lt;a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;span class="mr-2 d-none d-lg-inline text-gray-600 small"&gt;Valerie Luna&lt;/span&gt;
                  &lt;img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60"&gt;
                &lt;/a&gt;
                &lt;!-- Dropdown - User Information --&gt;
                &lt;div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown"&gt;
                  &lt;a class="dropdown-item" href="#"&gt;
                    &lt;i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt;
                    Profile
                  &lt;/a&gt;
                  &lt;a class="dropdown-item" href="#"&gt;
                    &lt;i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt;
                    Settings
                  &lt;/a&gt;
                  &lt;a class="dropdown-item" href="#"&gt;
                    &lt;i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt;
                    Activity Log
                  &lt;/a&gt;
                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                  &lt;a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal"&gt;
                    &lt;i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt;
                    Logout
                  &lt;/a&gt;
                &lt;/div&gt;
              &lt;/li&gt;
  
            &lt;/ul&gt;
  
          &lt;/nav&gt;
          &lt;!-- End of Topbar --&gt;
  
          &lt;!-- Begin Page Content --&gt;
          &lt;div class="container-fluid"&gt;
  
            &lt;!-- Page Heading --&gt;
            &lt;h1 class="h3 mb-2 text-gray-800"&gt;Members List&lt;/h1&gt;
            &lt;!-- &lt;p class="mb-4"&gt;DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the &lt;a target="_blank" href="https://datatables.net"&gt;official DataTables documentation&lt;/a&gt;.&lt;/p&gt; --&gt;
  
            &lt;!-- DataTales Example --&gt;
            &lt;div class="card shadow mb-4"&gt;
              &lt;div class="card-header py-3"&gt;
                &lt;h6 class="m-0 font-weight-bold text-primary"&gt;Cabarrus County Republican Party &lt;/h6&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                &lt;div class="table-responsive"&gt;
                  &lt;table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;ID&lt;/th&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                        &lt;th&gt;Residential Address&lt;/th&gt;
                        &lt;th&gt;Mailing Address&lt;/th&gt;
                        &lt;th&gt;Precinct&lt;/th&gt;
                        &lt;th&gt;Age&lt;/th&gt;
                        &lt;th&gt;Ethnicity&lt;/th&gt;
                        &lt;th&gt;Gender&lt;/th&gt;
                        &lt;th&gt;Party&lt;/th&gt;
                        &lt;th&gt;Race&lt;/th&gt;
                        &lt;th&gt;Phone Number&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tfoot&gt;
                      &lt;tr&gt;
                        &lt;th&gt;ID&lt;/th&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                        &lt;th&gt;Residential Address&lt;/th&gt;
                        &lt;th&gt;Mailing Address&lt;/th&gt;
                        &lt;th&gt;Precinct&lt;/th&gt;
                        &lt;th&gt;Age&lt;/th&gt;
                        &lt;th&gt;Ethnicity&lt;/th&gt;
                        &lt;th&gt;Gender&lt;/th&gt;
                        &lt;th&gt;Party&lt;/th&gt;
                        &lt;th&gt;Race&lt;/th&gt;
                        &lt;th&gt;Phone Number&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/tfoot&gt;
                  &lt;/table&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- /.container-fluid --&gt;
  
        &lt;/div&gt;
        &lt;!-- End of Main Content --&gt;
  
        &lt;!-- Footer --&gt;
        &lt;footer class="sticky-footer bg-white"&gt;
          &lt;div class="container my-auto"&gt;
            &lt;div class="copyright text-center my-auto"&gt;
              &lt;span&gt;Copyright &amp;copy; &lt;a href="https://cascosigns.com"&gt;Casco Signs Inc.&lt;/a&gt; 2019&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/footer&gt;
        &lt;!-- End of Footer --&gt;
  
      &lt;/div&gt;
      &lt;!-- End of Content Wrapper --&gt;
  
    &lt;/div&gt;
    &lt;!-- End of Page Wrapper --&gt;
  
    &lt;!-- Scroll to Top Button--&gt;
    &lt;a class="scroll-to-top rounded" href="#page-top"&gt;
      &lt;i class="fas fa-angle-up"&gt;&lt;/i&gt;
    &lt;/a&gt;
  
    &lt;!-- Logout Modal--&gt;
    &lt;div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Ready to Leave?&lt;/h5&gt;
            &lt;button class="close" type="button" data-dismiss="modal" aria-label="Close"&gt;
              &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;Select "Logout" below if you are ready to end your current session.&lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button class="btn btn-secondary" type="button" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
            &lt;a class="btn btn-primary" href="login.html"&gt;Logout&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Bootstrap core JavaScript--&gt;
    &lt;script src="vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="vendor/bootstrap/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Core plugin JavaScript--&gt;
    &lt;script src="vendor/jquery-easing/jquery.easing.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Custom scripts for all pages--&gt;
    &lt;script src="js/sb-admin-2.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Page level plugins --&gt;
    &lt;script src="vendor/datatables/jquery.dataTables.min.js"&gt;&lt;/script&gt;
    &lt;script src="vendor/datatables/dataTables.bootstrap4.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Page level custom scripts --&gt;
    &lt;script src="js/datatables.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  </code></pre>