AbdulBazith's avatar

Is it Possible to replace pagination after ajax search in Laravel Like replacing body content in atable

Guys i am working with a project.

i have view.blade which displays all record in tabular format.

i wrote the tbody portion as separate partial

This is my controller before search

public function index()
    {

        $loc=Location_details::orderBy('created_at','desc')->paginate(10);

        return view('Location_details.view')->withloc($loc);

    }

this is my Location_details.view


  <thead >

          <th >Location</th>
          <th> Area</th>
          <th>Booth</th>
          <th>Action</th>

  </thead>
  <tbody id="results">

        @include('Location_details.tbody')

  </tbody>
</table>

<div class="text-center" id="p">

     {!! $loc->Links(); !!}
 
</div>


This is my Location_details.tbody


   @foreach($loc as $locs)
        <tr>
            <td>{{ $locs->ven_loc }}</td>
            <td>{{ $locs->ven_area }}</td>
            <td>{{ $locs->ven_booth }}</td>
<td>
    {!! Form::open(['route'=>['Location_details.destroy',$locs->id], 'onsubmit' => 'return ConfirmDelete()','method'=>'Delete']) !!}
<a href="{{ route('Location_details.edit',$locs->id) }}" class="btn btn-info glyphicon glyphicon-edit"></a>

<button type="submit" class="btn btn-info glyphicon glyphicon-trash">
    </button>
</td>


this is my ajax request


 $('#location,#area,#booth').on('keyup',function(){

        $.ajax({

        type : 'get',

        url : '{{URL::to('search_location_details')}}',

        data:{
                'location': $('#location').val(),
                'area': $('#area').val(),
                'booth': $('#booth').val()
        },

        success:function(data)
        {
            console.log(data);

              $('#results').html(data);        

        }


This is my search_location_details function in controller


public function search_location_details( Request $request )
    {

            $loc = Location_details::where(function ($query) use ($request)
                {

                    if (!empty($request->location)) {
                    $query->Where('ven_loc', 'LIKE', '%' . $request->location . '%');
                    }

                if (!empty($request->area)) {
                    $query->Where('ven_area', 'LIKE', '%' . $request->area . '%');
                }

                if (!empty($request->booth)) {
                    $query->Where('ven_booth', 'LIKE', '%' . $request->booth . '%');
                }

            })->orderBy('created_at','desc')->get();

             return view('Location_details.tbody', compact('loc'));

    }


here after search the search result is passed to the ajax return and then it is passed to the . so it replaces the tbody portion with the search result.

But the pagination must change according to the search result. but it is not changed.

is it possible to replace the the below pagination also ???


<div class="text-center" id="p">

     {!! $loc->Links(); !!}
 
</div>

when i search using jquery that pagination link remains there and it is not updated as per my returned results. my pagination must update based on the return result this is what i expect.

Kindly some one help please..!!

0 likes
10 replies
tykus's avatar

In this case, I woiuld suggest expanding the partial to include the entire <table> element along with the pagination links, so that everything you need is returned from the asynchronous request.

1 like
AbdulBazith's avatar

@tykus thankz for your sugestion.

you are ryt. but actually my pagination link is out of the table

<div class="text-center" id="p">

     {!! $loc->Links(); !!}
 
</div>

see i will send my whole view can u suggest which part i can make it as the separate partial


  <thead >

          <th >Location</th>
          <th> Area</th>
          <th>Booth</th>
          <th>Action</th>

  </thead>
  <tbody id="results">
        @include('Location_details.tbody')
  </tbody>
</table>

<div class="text-center page" id="p">

     {!! $loc->Links(); !!}
      
</div>

// these closed div tags are tags which i have started before the thead


  </div>
</div>

</div>



tykus's avatar

I meant that you should include the entire table and the pagination links in the partial.

1 like
AbdulBazith's avatar

@tykus

ss i included. but nothing response the same old pagination is there.

see here..


<table id="design" class="table table-bordered"> <caption id="fo"><h2 align="center">LOCATION DETAILS PREVIEW</h2></caption>

  @include('Location_details.tbody')

</table>



this is my partial Location_details.tbody

 <thead >

            <th >Location</th>
            <th> Area</th>
            <th>Booth</th>
            <th>Action</th>

    </thead>
    <tbody id="results">
        
          @foreach($loc as $locs)
          <tr>
              <td>{{ $locs->ven_loc }}</td>
              <td>{{ $locs->ven_area }}</td>
              <td>{{ $locs->ven_booth }}</td>
  <td>

      {!! Form::open(['route'=>['Location_details.destroy',$locs->id], 'onsubmit' => 'return ConfirmDelete()','method'=>'Delete']) !!}
  <a href="{{ route('Location_details.edit',$locs->id) }}" class="btn btn-info glyphicon glyphicon-edit"></a>

  <button type="submit" class="btn btn-info glyphicon glyphicon-trash">
      </button>
  </td>

  {!! Form::close() !!}
   </tr>
      @endforeach

    </tbody>

    <div class="text-center page" id="p">

          {!! $loc->Links(); !!}
         
     </div>

this is my search just pasted the paginate code


 })->orderBy('created_at','desc')->paginate(1);


             return view('Location_details.tbody', compact('loc'));

see above just i gave paginate(1)

i searched for location= "Tirunelveli" i have 6 search result

so after search my paginate should have 6 pages becoz i given paginate(1). but not changed. the same old pagination only displaying 2 pages.

this is before search is same after search. nothing changed

what should i do?? please help mee

But in my inspect->network tab i checked its working..

according to my result pagination changes.

but in the view it not changing why??

tykus's avatar

Do not include the links within the <table> links that - it is not valid HTML.

This is the structure I am suggesting:

// parent view - the one that returns in response to a 'normal' web request

@include('location_details.results')
// results partial
<table id="design" class="table table-bordered">
    <caption id="fo">
        <h2 align="center">LOCATION DETAILS PREVIEW</h2>    
    </caption>
    <thead >
        <th >Location</th>
        <th> Area</th>
        <th>Booth</th>
        <th>Action</th>
    </thead>

    <tbody id="results">
        @foreach($loc as $locs)
            <tr>
                <td>{{ $locs->ven_loc }}</td>
                <td>{{ $locs->ven_area }}</td>
                <td>{{ $locs->ven_booth }}</td>
                <td>
                    {!! Form::open(['route'=>['Location_details.destroy',$locs->id], 'onsubmit' => 'return ConfirmDelete()','method'=>'Delete']) !!}
                    <a href="{{ route('Location_details.edit',$locs->id) }}" class="btn btn-info glyphicon glyphicon-edit"></a>
                    <button type="submit" class="btn btn-info glyphicon glyphicon-trash"></button>
                    {!! Form::close() !!}
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

<!-- Pagination links in partial but outside table element -->
<div class="text-center page" id="p">
    {!! $loc->Links(); !!}
</div>

Check that the links being created include the filters as GET params

1 like
AbdulBazith's avatar

@tykus

i tried your solution it worked, but after my pagination change why it is not rendering my header tags etc.

This is my view.blade


<div id="results">
  @include('Location_details.tbody')
</div>

This is my Location_details.tbody


<table id="design" class="table table-bordered"> <caption id="fo"><h2 align="center">LOCATION DETAILS PREVIEW</h2></caption>

    <thead >

            <th >Location</th>
            <th> Area</th>
            <th>Booth</th>
            <th>Action</th>

    </thead>
    <tbody id="results">
        
          @foreach($loc as $locs)
          <tr>
              <td>{{ $locs->ven_loc }}</td>
              <td>{{ $locs->ven_area }}</td>
              <td>{{ $locs->ven_booth }}</td>
  <td>

      {!! Form::open(['route'=>['Location_details.destroy',$locs->id], 'onsubmit' => 'return ConfirmDelete()','method'=>'Delete']) !!}
  <a href="{{ route('Location_details.edit',$locs->id) }}" class="btn btn-info glyphicon glyphicon-edit"></a>

  <button type="submit" class="btn btn-info glyphicon glyphicon-trash">
      </button>
  </td>

  {!! Form::close() !!}
   </tr>
      @endforeach

    </tbody>

</table>

    <div class="text-center page" id="p">

          {!! $loc->Links(); !!}


     </div>

Everything works fine the pagination is changing according to my search.. but when i change the page my headers are not included and my design are not included why??

in my first reload everything works fine. when i search name="Tirunelveli" as said i gave paginate(1) and my search records is 6. so the pagination changed to 6 pages.

Here is the problem. when i click page2 , my design which i wrote as header partial . all that are missing and the search boxex which i wrote in my view.blade. simply to say just it takes only my

tbody portion after i click page2. it leaves all the part


// just only taking this value. the content before this and the content after this are not taking why??

<div id="results">
  @include('Location_details.tbody')
</div>

and one more thing that when i click page2 my pagination changes adn shows 14 pages because i have total of 14 records in my db

What may be the problem??

1 like
Snapey's avatar

Why use ajax when clearly it is so difficult for you? You pretty much reload the whole page again - why not just fetch it as a regular request?

There is no special merit badge for using ajax (especially where its not required)

1 like
AbdulBazith's avatar

@Snapey thank you for your response. and sorry for the delay somewhat busy in another work

Ya You are ryt, i can reload it. But what i did is i am having two buttons as PDF and EXCEL.

So after my search is done using ajax if i click the pdf or excel button those search result will be downloaded as pdf and excel.

Say for example if i search for a Name="Abdul" it sorts and displays the sorted result in the view through ajax, the name i typed in the text box wont be erased due to ajax request, so i can see the sorted result in the page as well as if i need to download i can give PDF or excel. i think you understood what i am trying to say..

If iam not using ajax, and if i use normal reload i cant make it as pdf or excel. Am I right?? this is what the reason i am using ajax request for my search

Else is there any idea to do the search as well as the download related to the sorted result in same way, without ajax means Kindly suggest please.. ?

Please or to participate in this conversation.