Recreate datatable on button click

Dharmeshdhabu

New member
I have a datatable which loads on page loading. I wish to recreate it on button click so that it shows data as per input provided in input box. Please guide me. Below is code for datatable.

Code:
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example1">
                                <thead>
                                    <tr>
										
                                        <th>Reg. No</th>
										<th>Case</th>
                                        <th>Name</th>
										<th>Age/Sex</th>
                                        <th>Date</th>
                                        
                                        <th>Priscription</th>
										<th>Print</th>
										<th>Bill</th>
										<th>Amount</th>
										<th>Edit</th>
										
										
                                    </tr>
                                </thead>
								
								<tbody>
				<?php while ($row = mysqli_fetch_array($result)) { ?>
					<?php 
					if($row['Status']== "P"){
					?>  <tr style="background-color:#7FFFD4;"><?php
					} elseif ($row['Status']== "B") {
					?> <tr style="background-color:#7FFFD4;"> <?php
					
					} elseif ($row['Status']== "R") {
					?> <tr style="background-color:orange;"> <?php
					} elseif ($row['Status']== "I") {
					?> <tr style="background-color:pink;"> <?php
					
					} else  
						
					?>
						
						<td><?php echo $row['RegNo']; ?></td>
						<td><?php echo $row['Caseo']; ?></td>
						<th class="blue"><?php echo $row['PatientName']; ?></th>
						
						<td><?php echo $row['Age']. "/" . $row['Sex'] ; ?></td>
						<td><?php echo $row['Date']; ?></td>
						
						
						
						
						
						<?php  if ($_SESSION['username'] == "Dr Dharmesh") { ?>
						<td><a class="btn btn-success" href="clinical.php?view=<?php echo $row['ID']; ?>" class="edit_btn" ><i class="fa fa-plus fa-fw"></i> Clinical</a></td>
						<?php } ?>
						<td>
							<?php if ($row['Status']== "P") { ?>
								 <a class="btn btn-danger" <?php if (strlen($row['Treatment1'])>10) { ?> href="clinical_print.php?view=<?php echo $row['ID']; ?>" <?php }  ?>  class="del_btn"><i class="fa fa-fw"></i> Print</a>
								<?php } ?>
							</td>
						
						<td>
						<?php if ($row['Billprint']== "Y") { ?>	
						<a class="btn btn-danger" href="bill_print.php?view=<?php echo $row['ID']; ?>" class="del_btn"><i class="fa fa-fw"></i> Print</a>
						<?php } ?>
						</td>
						<td><?php echo $row['Total']; ?></td>
						<td><a class="btn btn-success" href="patientregistration.php?edit1=<?php echo $row['ID']; ?>" class="edit1_btn" ><i class="fa fa-plus fa-fw"></i>Edit</a></td>
						
						
					</tr>
				<?php } ?>
				</tbody>

I have input for data search and a button to search and load data in data table as below.

Code:
<button class="btn btn-danger form-control" type="submit" name="search" >View</button>
                                          
												
                                            <label>OPD No</label>
											
                                            <input class="form-control" onchange="fullname()" type="text" id="opd" name="opd" value="<?php echo trim($RegNo); ?>">

I wish that data should be searched from database and then loaded into datatable. Please guide me how to code for "View" button. Thanks
 
Michalio said:
Do you want to just copy a record or edit data and then save as a new entry?

I want to search a record from database and fetch it into datatable. I have a button for edit in datatable so that if required I can edit it but at present main thing is to search data from database and fetch it into datatable.
 
You need to send the data from search form to the backend by the post method (you can also use ajax request).
Then you need to create a sql query to find results that you want to display.
Please read this article about create a search field: https://pbphpsolutions.com/php-mysql-search-database-and-display-results.html
 
Michalio said:
You need to send the data from search form to the backend by the post method (you can also use ajax request).
Then you need to create a sql query to find results that you want to display.
Please read this article about create a search field: https://pbphpsolutions.com/php-mysql-search-database-and-display-results.html

Thanks a lot for you support. I could recreate table as I wished and search data. I have two minor issues remaining.
1) On data search page scrolls to the top. I wants to keep it at same scroll so that I do see the table right there and need not repeated scrolling.
2) On page loading I wish to have data of current date by default and need not to be searched.
Please guide me.
Below is my code

Code:
if(isset($_POST['search11']))
				{
						if(!empty($_POST['from']))
					{
						$from = $_POST['from'];
						$to = $_POST['to'];
						$stmt = $con->prepare("select * from bdaily where Date between '$from' and  '$to' ");
						$stmt->execute();
						$Reg = $stmt->fetchAll(PDO::FETCH_ASSOC);
						 //print_r($employee_details);
					}
					else
					{
						echo "<script>alert ('Please enter Reg No !' )</script>";
					}
				}

Code for input

Code:
<input $dt = new DateTime(); class="form-control" type="date" id="from" name="from" value="<?php echo trim($from); ?>"  >
												
												</td>
												
												<td width="5%">
												
                                           
												</td>	
											<td width="5%">
												
                                            <label>To</label>
											</td>												
												<td width="5%">
												
                                            <input class="form-control"  type="date" id="to" name="to" value="<?php echo trim($to); ?>">
												</td>
												<td width="2%">
												
												</td>
													<td width="5%">
												<button class="btn btn-danger form-control" type="submit" name="search11" >Date</button>
                                           <td width="5%">

Code for table

Code:
 <thead>
          <tr>
										<th>No</th>
										<th>Reg. No</th>
										<th>Case</th>
                                        <th>Name</th>
										<th>Age/Sex</th>
                                        <th>Date</th>
                                        
                                        <th>Priscription</th>
										<th>Print</th>
										<th>Bill</th>
										<th>Amount</th>
										<th>Edit</th>
										<th>Delete</th>
          </tr>
        </thead>
        <tbody>
		
                <?php
                 if(!$Reg)
                 {
                    echo '<tr>No data found</tr>';
                 }
                 else{
					
                    foreach($Reg as $key=>$row)
					
                    {
						
                        ?>
						
							
                    <tr>
					<?php 
					if($row['Status']== "P"){
					?>  <tr style="background-color:#7FFFD4;"><?php
					} elseif ($row['Status']== "B") {
					?> <tr style="background-color:#7FFFD4;"> <?php
					
					} elseif ($row['Status']== "R") {
					?> <tr style="background-color:orange;"> <?php
					} elseif ($row['Status']== "I") {
					?> <tr style="background-color:pink;"> <?php
					
					} else  
						
					?>
                        <td><?php echo $key+1;?></td>
                        <td><?php echo $row['RegNo'];?></td>
                        <td><?php echo $row['Caseo'];?></td>
						<td><?php echo $row['PatientName'];?></td>
                        <td><?php echo $row['Age']. "/" .$row['Sex'];?></td>
                        <td><?php echo $row['Date'];?></td>
                        <td><a class="btn btn-success" href="clinical.php?view=<?php echo $row['ID']; ?>" class="edit_btn" ><i class="fa fa-plus fa-fw"></i> Clinical</a></td>
						<td><a class="btn btn-danger" <?php if (strlen($row['Treatment1'])>10) { ?> href="clinical_print.php?view=<?php echo $row['ID']; ?>" <?php }  ?>  class="del_btn"><i class="fa fa-fw"></i> Print</a>
								</td>
								<td>
						<?php if ($row['Billprint']== "Y") { ?>	
						<a class="btn btn-danger" href="bill_print.php?view=<?php echo $row['ID']; ?>" class="del_btn"><i class="fa fa-fw"></i> Print</a>
						<?php } ?>
						</td>
						<td><?php echo $row['Total'];?></td>
						<td><a class="btn btn-success" href="patientregistration.php?edit1=<?php echo $row['ID']; ?>" class="edit1_btn" ><i class="fa fa-plus fa-fw"></i>Edit</a></td>
						<td><button class="btn btn-danger form-control" onclick="bdailyDelete(this);"  type="submit" name="Delete" >Delete</button></td>
						
					</tr>
                         
                        <?php
                    }
                     
                 }
                ?>
             
         </tbody>
      </table>
 
To recreate a data table on a button click in PHP, you would need to perform the following steps:

1) Define your data table in HTML and give it an ID so you can manipulate it with JavaScript:

<table id="myTable">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Jane</td>
<td>jane@example.com</td>
</tr>
</table>

2) Add a button to your HTML that will trigger the table recreation when clicked:

<button onclick="recreateTable()">Recreate Table</button>

3) Write a JavaScript function that will recreate the table when the button is clicked. In this example, we are simply replacing the existing table with a new one that has different data:

function recreateTable() {
var newTable = "<table id='myTable'><tr><th>ID</th><th>Quantity</th></tr><tr><td>1</td><td>10</td></tr><tr><td>2</td><td>20</td></tr></table>";
document.getElementById("myTable").outerHTML = newTable;
}

4) Finally, you would need to embed this JavaScript code into your PHP code, which can be done by wrapping the HTML and JavaScript in PHP echo statements. For example:

<?php
echo "
<table id='myTable'>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Jane</td>
<td>jane@example.com</td>
</tr>
</table>
<button onclick='recreateTable()'>Recreate Table</button>
<script>
function recreateTable() {
var newTable = \"<table id='myTable'><tr><th>ID</th><th>Quantity</th></tr><tr><td>1</td><td>10</td></tr><tr><td>2</td><td>20</td></tr></table>\";
document.getElementById('myTable').outerHTML = newTable;
}
</script>
";
?>

And here you go (Y) :)

If you want high quality php development services , you can contact at https://codup.co/services/php-development/
 
Back
Top