Site load all 5000 rows then show datatable

Site load all 5000 rows then show datatable

xaibixaibi Posts: 5Questions: 1Answers: 0
edited November 21 in Free community support

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.

Answers

  • allanallan Posts: 57,300Questions: 1Answers: 9,127 Site admin
  • xaibixaibi Posts: 5Questions: 1Answers: 0

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

  • allanallan Posts: 57,300Questions: 1Answers: 9,127 Site admin

    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

  • xaibixaibi Posts: 5Questions: 1Answers: 0

    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 :neutral:

  • allanallan Posts: 57,300Questions: 1Answers: 9,127 Site admin

    Easiest option is probably:

    echo json_encode( $row );
    

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

    Allan

  • xaibixaibi Posts: 5Questions: 1Answers: 0
    edited November 22

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

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

  • allanallan Posts: 57,300Questions: 1Answers: 9,127 Site admin

    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

  • xaibixaibi Posts: 5Questions: 1Answers: 0

    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%' ;" );
    ?>
    
    <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(); ?>
    
  • allanallan Posts: 57,300Questions: 1Answers: 9,127 Site admin
    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

Sign In or Register to comment.