How to retrieve table rows in MySQL using PHP and Display it with Javascript?

Question

I am trying to load a database table inside MYSQL using and display it in datatable of html. But for some reasons, no data were retrieve even though I test my query in the database. Can someone help me to solve this problem? See code below:

function loadAccountsList() {
  $.ajax({
    type: 'POST',
    url: '../back_php_Code/pAdminList.php',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    success: function(response) {
      $('#AccountList').empty();
      var cells = eval("(" + response + ")");
      alert(cells);
      for (var i = 0; i < cells.length; i++) {
        $('#AccountList').append('<tr data-empid="' + cells[i].Code + '">' +
          '<td style="font-size:11px; text-align:center;">' + cells[i].name + '</td>' +
          '<td style="font-size:11px; text-align:center;">' + cells[i].typeofloan + '</td>' +
          '<td style="font-size:11px; text-align:center;">' + cells[i].bank + '</td>' +
          '<td style="font-size:11px; text-align:center;">' + cells[i].amount + '</td>' +
          '<td style="font-size:11px; text-align:center;">' + cells[i].status + '</td>' +
          '</tr>');
      }
    },
    error: function(error) {
      console.log(error);
    }
  });
}

<script type="text/javascript" src="..\jsScripts\jsAdminList.js"></script>


<div class="card">
  <div class="card-block">
    <div class="dt-responsive table-responsive">
      <table id="alt-pg-dt" class="table table-striped table-bordered nowrap">
        <thead>
          <tr>
            <th>CI_CODE</th>
            <th>Fullname</th>
            <th>Type of Loan</th>
            <th>Bank</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody id="AccountList"></tbody>
        <tfoot>
          <tr>
            <th>CI_CODE</th>
            <th>Fullname</th>
            <th>Type of Loan</th>
            <th>Bank</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

Thanks and Regards,

I see you put the ajax inside a function, how did you call that function? — catcon
– catcon, Commented Aug 7, 2019 at 5:29
@catcon , I call it sir like this . $(document).ready(function(){ loadAccountsList(); }); — Ban Tot
– Ban Tot, Commented Aug 7, 2019 at 5:31
These are steps that I would do: 1. look at the browser's console, check for any javascript error, 2. check the response code of the ajax, 3. enable PHP error report and see there is any error with PHP — catcon
– catcon, Commented Aug 7, 2019 at 5:35
Do some debugging first to narrow down where the error occurs. Open the php file directly in your browser. Do you see the expected output? — Shadow
– Shadow, Commented Aug 7, 2019 at 5:36

Veshraj Joshi · Accepted Answer · 2019-08-07 05:55:19Z

1

I think you are mistaking in success function. You donot need to add quotes in response and assign to the cells variable

 success: function (response) {
        // Now your `response` is in json which which is an array of objects
        // emptying table which is fine
        $('#AccountList').empty();
        // you are using jquery so you can simply iterate through queries like this
        $(response).each(function(index, row){
          $('#AccountList').append('<tr data-empid="' + row.empID + '">'
                + '<td style="font-size:11px; text-align:center;">' + row.badgenum + '</td>'
                + '<td style="font-size:11px; text-align:center;">' + row.empName + '</td>'
                + '<td style="font-size:11px; text-align:center;">' + row.groupName + '</td>'
                + '<td style="font-size:11px; text-align:center;">' + row.email + '</td>'
                + '<td style="font-size:11px; text-align:center;">' + row.contact_no + '</td>'
                + '<td style="font-size:11px; text-align:center;">' + row.empStatus + '</td>'
            + '</tr>');

        });

    },

answered Aug 7, 2019 at 5:55

Veshraj Joshi

3,5874 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ban Tot Over a year ago

Hi Sir, Thank you for the Answer, but may I know, what is (index,row)?

Veshraj Joshi Over a year ago

Sorry I was busy in my stuffs, please read - api.jquery.com/each, after reading this you can query me thanks, for accepting and upvoting the answer

Ban Tot Over a year ago

Thank you again Sir, now I get it. :)

Collectives™ on Stack Overflow

How to retrieve table rows in MySQL using PHP and Display it with Javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related