Home » Php » javascript – datatables is not working when fetching data from database

javascript – datatables is not working when fetching data from database

Posted by: admin February 25, 2020 Leave a comment

Questions:

I am using DataTables to have a pagination.

I think I set the script correctly, since I followed the instruction in their website. But feel free to pinpoint if there’s any wrong/mistake to the indicated script link

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin Reservation Management</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/datepicker3.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script>
    $(document).ready(function(){
    $('#myTable').DataTable();
    });
    </script>
    <!--Custom Font-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        td,tr {
            white-space: nowrap;
            width: 45%;
        }
        th{
            text-align: center;
        }
        form {
            display: inline;
        }
    </style>

</head>

And now this is my table and stuff, I am fetching the datas from my database.

I did some research here in Stackoverflow, regarding to this issue and the results that I’ve found was they did not put and which I included, but feel free to pinpoint if I haven’t included any.*

php

<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#"> <em class="fa fa-home"></em></a></li>
            <li class="active">Manage Room</li>
        </ol>

            </div>
            <div class="row">
        <div class="col-lg-12">
            <br>
            <h3> Super Admin Reservation Management </h3>
            <hr>
<!-- 

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

# FUNCTIONALITY

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

## --> <!--

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

# FUNCTIONALITY

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

## --> <div class="container"> </div> <br> <div class="container"> <table class="table table-bordered" id="myTable" style="background-color: white;" cellpadding="0" cellspacing="0"> <thead> <tr> <th> Room Number</th> <th> Room Availability </th> <th> Action </th> </tr> </thead> <!--

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

FETCHING DATA FROM THE DATABASE

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

--> <?php $connection = mysqli_connect("localhost", "root"); $db = mysqli_select_db($connection, 'db_hotelreservation'); $query = "SELECT * FROM tbl_reservation WHERE room_status = 'Pending' OR room_status ='Booked'"; $query_run = mysqli_query($connection, $query); $resultCheck = mysqli_num_rows($query_run); if($resultCheck > 0) { while($row = mysqli_fetch_assoc($query_run)) { ?> <tbody> <tr> <td style="display: none;"> <?php echo $row['ID'];?> </td> <td> <?php echo $row['room_number']; ?></td> <td> <?php echo $row['room_status'];?></td> <td style="display: none;"> <?php echo $row['room_type'];?> </td> <td style="display: none;"> <?php echo $row['first_name'] . " " .$row['last_name']?> </td> <td style="display: none;"> <?php echo $row['check_in'];?> </td> <td style="display: none;"> <?php echo $row['check_out'];?> </td> <td style="display: none;"> <?php echo $row['contact_number'];?> </td> <td style="display: none;"> <?php echo $row['numberof_days'] ." ". "day/s";?> </td> <td style="display: none;"> <?php echo $row['calculated_price'];?> </td> <td> <form action="approve.php" method="POST" onclick="return confirm('Are you sure you want to Approve this Booking?');"> <input type="hidden" name="id" value="<?php echo $row['ID'] ?>" style=""> <input type="submit" name="update" class="btn btn-success" value="Approve"> </form> <button type="button" class="btn btn-primary viewbtn">View Details</button> </td> </tr> </tbody> <?php } } else{ echo "No Records Found"; } ?> </table> </div> </div> </div> </div>
How to&Answers:

This might be because of delayed data binding, you can try datatable ajax approach to bind the data. Refer datatable option.