Click here to Skip to main content
15,064,915 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi!

I'm creating a small project using Php, Bootstrap and MySQL. When I display the data by clicking it's menu Bootstrap pagination and search is working fine, but when I try to add new data pagination and search is not working. My script calling the bootstrap table plugins is included to my fetch script but I can't figure out why is not working. Any idea on how to solve this problem? Thank you in advance.

What I have tried:

//PHP FETCH DATA

<?php 

include_once('../connection/pdo_db_connection.php');

$database = new Connection();
$db = $database->open();

	try {
		$data = $db->query("SELECT sid, asset_tag, particulars, status, user FROM sys_stocks WHERE status='AVAILABLE' ORDER BY asset_tag ASC")->fetchAll();
	foreach ($data as $row) {
	?>

    <tr>
	    <td><?php echo $row['asset_tag']; ?></td>
	    <td><?php echo $row['particulars']; ?></td>
		<td><?php echo $row['status']; ?></td>
		<td><?php echo $row['user']; ?></td>
	    <td>
			<button class="EditStocks" data-sid="<?php echo $row['sid']; ?>">class="fas fa-edit" id="ebutton"></button>
	    	<button class="deletestocks" data-sid="<?php echo $row['sid']; ?>">class="fas fa-trash" id="dbutton"></button>
		</td>				
	</tr>
	<?php
	}
}
	catch(PDOException $e) {
	echo "There's a problem with the connection: " . $e->getMessage();
	}
	    //close connection
		$database->close();
?>

//AJAX ADD DATA

	$('#AddStocks').click(function(){
		$('#AddStocksModal').modal('show');
	});
	$('#addFormstocks').submit(function(e){
		e.preventDefault();
		var addform = $(this).serialize();
		//console.log(addform);
		$.ajax({
			method: 'POST',
			url: 'functions/add_stocks_submit.php',
			data: addform,
			dataType: 'json',
			success: function(response){
				$('#AddStocksModal').modal('hide');
				$(this).find('form').trigger('reset');
				if(response.error){
					$('#alert').show();
					$('#alert_message').html(response.message);
				}
				else{
					$('#alert').show();
					$('#alert_message').html(response.message);
					fetch();
				}
			}
		});
	});
	//

//FETCH DATA TO DISPLAY

function fetch(){
	$.ajax({
		method: 'POST',
		url: 'functions/stocks_fetch.php',
		success: function(response){
			$('#tblbody').html(response);

			//SCRIPT CALLING BOOTSTRAP PLUGINS
               $(document).ready(function() {
                $('#dataTable').DataTable();
               });    
            //
		   }
	     });
       }

//TABLE

<pre> <div class="card shadow mb-4">
   <div class="card-header py-3">
     <center><h6 class="m-0 font-weight-bold text-primary">LIST OF STOCKS</h6> 
     </center>
   </div>
<div class="card-body">
  <div class="table-responsive">
    <table class="table table-bordered" id="dataTable" width="100%"    
      cellspacing="0">
                  <thead>
                    <tr>
                      <th>ASSET TAGS</th>
                      <th>PARTICULARS</th>
                      <th>STATUS</th>
                      <th>PREVIOUS USER</th>
                      <th>OPTION</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th>ASSET TAGS</th>
                      <th>PARTICULARS</th>
                      <th>STATUS</th>
                      <th>PREVIOUS USER</th>
                      <th>OPTION</th>
                    </tr>
                  </tfoot>
                  <tbody id="tblbody"></tbody>
                </table>
              </div>
            </div>
          </div>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900