URL encoding the space character

Question

Someone pls help me. I have search form and displaying data from database and im using jquery twbsPagination. So my problem is the space in url if the user search two or more words.I used encodeURIComponent(); its work perfectly fine its display data. but when i click on page 2. its display no data and when i go back to the first page the datas is not showing anymore. help me pls. im debugging for 12 hrs sorry for my english. this is my form

<div class="input-group input-group-lg">
            <input id="searchBar" type="text" class="form-control" placeholder="Search job">
            <span class="input-group-btn">
              <button id="searchBtn" type="button" class="btn btn-info btn-flat">Go!</button>
            </span>
        </div>

and this is my script

<script>
 function Pagination(){
<?php
  $limit=5;
  $sql="SELECT COUNT(id_jobpost) AS id from job_post";
  $result=$conn->query($sql);
  if($result->num_rows > 0)
  {
    $row = $result->fetch_assoc();
    $total_records = $row['id'];
    $total_pages = ceil($total_records / $limit);
  } else {
    $total_pages = 1;
  }
?>
$('#pagination').twbsPagination({
  totalPages: <?php echo $total_pages;?>,
  visible: 5,
  onPageClick: function(e, page){
    e.preventDefault();
    $(".target-content").html("Loading....");
    $(".target-content").load("job-pagination.php?page="+page);
  }
});
}
</script>

<script>
 $(function(){
  Pagination();
 });
</script>

<script>
$("#searchBtn").on("click", function(e){
  e.preventDefault();
  var searchResult = $("#searchBar").val();
  var filter = "searchBar";
  if (searchResult != "") {
    $('#pagination').twbsPagination('destroy');
    Search(searchResult,filter);
  }else{
    $('#pagination').twbsPagination('destroy');
    Pagination();
  }
});

<script>
      function Search(val,filter){
        $('#pagination').twbsPagination({
        totalPages: <?php echo $total_pages; ?>,
        visible: 5,
        onPageClick: function(e, page){
          e.preventDefault();
          val = encodeURIComponent(val);
          $(".target-content").html("Loading....");
          $(".target-content").load("search.php?page="+page+"&search="+val+"&filter="+filter);
        }
      });
      }
    </script>

and this is my search.php

<?php
session_start();
require_once("db.php");
 $limit = 5;

 if (isset($_GET['page'])) {
   $page = $_GET['page'];
 }else{
    $page = 1;
 }

 $start_from = ($page-1) * $limit;
 $search = $_GET['search'];
 $sql = "SELECT * FROM job_post WHERE jobtitle LIKE '%$search%' ORDER BY id_jobpost DESC LIMIT $start_from, $limit";
$result=$conn->query($sql);
       if ($result->num_rows>0) {
        while ($row=$result->fetch_assoc()) {
            $sql1 = "SELECT * FROM company WHERE id_company='$row[id_companyname]'";
                $result1 = $conn->query($sql1);
                if($result1->num_rows > 0) {
                while($row1 = $result1->fetch_assoc()) 
                    {
       ?>

            <div class="attachment-block clearfix">
                <img class="attachment-img" src="uploads/logo/<?php echo $row1['logo']; ?>" alt="Attachment Image">
                <div class="attachment-pushed">
                  <h4 class="attachment-heading"><a href="view-job-post.php?id=<?php echo $row['id_jobpost']; ?>"><?php echo $row['jobtitle']; ?></a> <span class="attachment-heading pull-right">₱<?php echo $row['maximumsalary']; ?>/Month</span></h4>
                  <div class="attachment-text">
                      <div><strong><?php echo $row1['companyname']; ?> | <?php echo $row1['province'].",".$row1['city']; ?> | Experience Required(in years): <?php echo $row['experience']; ?></strong></div>
                  </div>
                </div>
              </div>

       <?php
                }
            }
        }
       }else{
        echo "<center><strong>No Job Matched!</strong></center>";
       }
       $conn->close();
       ?>

Answer 1

I think the error is in your search.php page code. You need to change your ending limit.

 $limit = 5;

 if (isset($_GET['page'])) {
   $page = $_GET['page'];
 }else{
    $page = 1;
 }

 $start_from = ($page-1) * $limit;
 $search = $_GET['search'];
 $sql = "SELECT * FROM job_post WHERE jobtitle LIKE '%$search%' ORDER BY id_jobpost DESC LIMIT $start_from, $limit";

When you are on the first page, you are doing: LIMIT 0, 5. When you are on the second page, you are doing: LIMIT 5, 5.

I suggest:

$limit = 5;

if (isset($_GET['page'])) {
   $page = $_GET['page'];
}else{
    $page = 1;
}

$start_from = ($page-1) * $limit;
$end_at = $page * $limit;
$search = $_GET['search'];
$sql = "SELECT * FROM job_post WHERE jobtitle LIKE '%$search%' ORDER BY id_jobpost DESC LIMIT $start_from, $end_at";

However I also noticed that in your search page you are doing a query inside of a query, I think a better way to do this is with a join so you only hit the database once. I don't know the structure of your database but the below code is an example of a better way to go about it so that you only hit the database once:

<?php
session_start();
require_once("db.php");
$page_size = 5;

if (isset($_GET['page'])) {
   $page = $_GET['page'];
}else{
    $page = 1;
}

$start_from = ($page-1) * $page_size;
$end_at = $page * $page_size;

$search = $_GET['search'];
$sql = "
  SELECT 
    j_p.*, 
    c.* 
  FROM 
    job_post j_p, 
    company c 
  WHERE 
    jobtitle LIKE '%$search%' 
    and c.id_company = j_p.id_companyname
  ORDER BY 
    id_jobpost DESC 
  LIMIT 
    $start_from, 
    $end_at
";
$result=$conn->query($sql);
if ($result->num_rows>0) {
  while($row1 = $result1->fetch_assoc()) {
?>

  <div class="attachment-block clearfix">
    <img class="attachment-img" src="uploads/logo/<?php echo $row1['logo']; ?>" alt="Attachment Image">
    <div class="attachment-pushed">
      <h4 class="attachment-heading"><a href="view-job-post.php?id=<?php echo $row1['id_jobpost']; ?>"><?php echo $row1['jobtitle']; ?></a> <span class="attachment-heading pull-right">₱<?php echo $row1['maximumsalary']; ?>/Month</span></h4>
      <div class="attachment-text">
          <div><strong><?php echo $row1['companyname']; ?> | <?php echo $row1['province'].",".$row1['city']; ?> | Experience Required(in years): <?php echo $row1['experience']; ?></strong></div>
      </div>
    </div>
  </div>
<?php
  }
}else{
  echo "<center><strong>No Job Matched!</strong></center>";
}
$conn->close();
?>