Site load all 5000 rows then show datatable

xaibi

I added the datatable on my site but it loading all data first and then shows the datatable, how to fix this issue that doesn't load data first?

Here is my code

<table class="table display" id="example">
  <thead>
    <tr>
     <th>NAME</th>
     <th>GENDER</th>
     <th>ORIGIN</th>
     <th>RELEGION</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($row as $na){ ?>
    <tr>
      <td><?php echo $na->name_english ?></td>
      <td><?php echo $na->name_gender ?></td>
      <td><?php echo $na->name_origin ?></td>
      <td><?php echo $na->name_relegion ?></td>
    </tr>
    <?php }; ?>
  </tbody>
</table>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/r-2.4.0/datatables.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/r-2.4.0/datatables.js"></script>


<script type="text/javascript">
$(document).ready(function () {
    $('#example').DataTable();
});
</script>

I am using bootstrap 5 and also want to know, that I check my Source-code and it's showing all table with all 4000 entries.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

You could Ajax load JSON data. Here is an example.

Allan

xaibi

but I don't have data in ajax, all data comes from database. So how i can add all data in ajax?

allan

Create a second PHP file which will read that data from the database and respond with JSON. Then remove the PHP to create the table from the first file.

Allan

xaibi

Allan, it's really hard to do that, after 5 days I figure out to show data from the database and find some other codes. I was wondering to use the load more button but can't understand how to use it on my code. So finally I found datatable, it was easy for me to do that, but with the load issue I need to do with JSON part, which I don't know

allan

Easiest option is probably:

echo json_encode( $row );

Assuming that $row contains the result from the database, which it appears to from above.

Allan

xaibi

Actually Allan i was still reading server side, i was thinking that when i add data in database then i have save data in json also. This is double work for me.

I am using this query.

```php
<?php
global $wpdb;
$sql = $wpdb->get_results("SELECT * FROM wp_names_christian WHERE name_gender LIKE '%boy%'" );

<?php > ``` ?>

. And then foreach i am using

Also cant find to add html quotes.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I'm not clear how $sql then becomes $row in your original code, it from that it looks like you could just echo out the $sql variable, JSON encoded.

Allan

xaibi

OK here is the code that i am using and i have 4000 plus rows, inside.

<?php get_header(); ?>

<?php
global $wpdb;
$sql = $wpdb->get_results("SELECT * FROM wp_names_christian WHERE name_gender LIKE '%boy%' ;" );

<?php
>
?>


<table class="table display" id="example">
  <thead>
    <tr>
     <th>NAME</th>
     <th>GENDER</th>
     <th>RELEGION</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($sql as $row){ ?>
    <tr>
      <td><a target="_blank" href="https://lahorimela.com/name/christian/boy/name-meaning-in-english/<?php echo $row->name_english ?>/"><?php echo $row->name_english ?></a></td>
      <td><?php echo $row->name_gender ?></td>
      <td><?php echo $row->name_religion ?></td>
    </tr>
    <?php }; ?>
  </tbody>
</table>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/r-2.4.0/datatables.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/r-2.4.0/datatables.js"></script>


<script type="text/javascript">
$(document).ready(function () {
    $('#example').DataTable();
});
</script>


<?php get_footer(); ?>

allan

global $wpdb;
$sql = $wpdb->get_results("SELECT * FROM wp_names_christian WHERE name_gender LIKE '%boy%' ;" );

echo json_encode($sql);

Should do it then. Obviously include wherever $wpdb is being defined.

Then use ajax to point at the new PHP file containing that code.

Allan